Создание интернет-магазина может быть увлекательным занятием. Это способствует успеху вашего бизнеса, чтобы иметь большую витрину. Однако, если вы хотите спроектировать магазин, который будет работать хорошо, вам придется столкнуться с трудностями.
Сайт электронной коммерции, который понравится вам и вашим клиентам, можно создать с помощью компоновщика страниц WooCommerce. Давайте посмотрим на WooCommerce плагин. Нашим следующим шагом будет демонстрация того, как легко создать свой интернет-магазин с помощью Beaver Builder. Давай, приступим!
Содержание:
Краткое введение в WooCommerce
С WooCommerce вы можете добавить функциональность электронной коммерции на свой сайт WordPress, чтобы вы могли продавать свои продукты в Интернете:
Кроме того, вы окажетесь в хорошей компании, поскольку, по прогнозам, к 28 году доля рынка WooCommerce составит около 2020 процентов.
WooCommerce — это решение с открытым исходным кодом и широкими возможностями настройки, как и WordPress. С его помощью вы можете настроить платежные шлюзы и различные варианты доставки и сразу же приступить к работе со своей империей электронной коммерции.
Используя WooCommerce, вы также можете создавать, редактировать и управлять своими продуктами:
Использование дополнительных плагинов WooCommerce дает вам доступ ко многим другим функциям.
Создание магазина WooCommerce и страниц продуктов с помощью Beaver Builder (в 4 простых шага)
Однако, прежде чем вы сможете освоить функции WooCommerce, вам сначала нужен веб-сайт для запуска. Начните с установки и активации плагинов WooCommerce, Beaver Builder и Beaver Themer WordPress. Теперь вы готовы создать свой продукт и страницы магазина.
Шаг 1. Создайте свой магазин, добавив товары
Создайте списки для своих продуктов в качестве первого шага к настройке вашего магазина. Когда вы используете WooCommerce, вы можете продавать физические товары, цифровые товары и предметы с вариациями (например, размером и цветом).
Вы можете установить образец набора продуктов, предоставленный WooCommerce, чтобы понять, как система работает с различными типами элементов, если вы новичок в WooCommerce. Здесь объясняются некоторые функции продукта WooCommerce, включая варианты вариантов и продажи.
Вы узнаете, как создать базовый продукт, если хотите начать с нуля. Независимо от того, что вы планируете продавать, другие разделы этого поста принесут вам пользу.
Создайте новый продукт в панели управления WordPress. Выберите «Продукты» > «Добавить новый» в меню слева. Заполните следующие поля для товара, который вы хотите добавить в свой магазин:
Вы можете установить большинство важных параметров для вашего товара, прокрутив вниз до панели данных продукта, включая цены, налоги и доставку. В WooCommerce у вас есть возможность включить налоги и варианты доставки для продуктов, которые можно переопределить на индивидуальной основе.
Решите, является ли ваш продукт загружаемым или виртуальным, в общих настройках. Не устанавливайте флажки, если продукт является физическим:
А также управление запасами, вы можете начать. Соединение продуктов дает вам возможность перекрестных и дополнительных продаж.
Вы также можете добавить второе, более краткое описание вашего товара в поле Краткое описание продукта под панелью данных о продукте. Списки витрин магазинов обычно содержат эту информацию.
Вы увидите категории продуктов и теги справа от экрана. Вот несколько полезных органайзеров:
Ваш список продуктов должен включать изображение или два. Доступны следующие варианты: отдельные изображения или группы изображений:
Вы можете загрузить фотографию со своего устройства или добавить изображение из своей медиатеки. Точно так же вы можете добавлять изображения в галереи товаров. Изображения можно просто перетаскивать, чтобы изменить их порядок.
Шаг 2: Дизайн новых страниц продукта
Чтобы отображать свои продукты, вы можете создавать страницы продуктов. Видеоруководство Beaver Themer содержит пошаговые инструкции по настройке страниц отдельных продуктов WooCommerce.
Beaver Themer — это мощный инструмент для расширения Beaver Builder до конструктора страниц WooCommerce. С помощью этого дополнения вы можете применять шаблоны ко всему сайту.
Нажмите «Макеты тем» > «Добавить новый» в Beaver Builder:
Ваш макет должен иметь заголовок. Вы должны выбрать макет и тип, прежде чем нажимать кнопку «Добавить макет темы».
Продолжайте следить за тем, чтобы новый дизайн применялся к каждой странице продукта, когда вы переходите на следующую страницу. Во втором поле выберите «Все продукты» в разделе «Местоположение», затем выберите «Продукт»:
Вы можете редактировать свой макет с помощью Beaver Builder после сохранения вашей работы. Начиная с правого верхнего угла, нажмите на синий плюсик. После того, как вы нажали «Шаблоны», нажмите «Создать»:
Замените существующий макет, выбрав «Продукт» > «Заменить существующий макет». Уже есть несколько полезных настроек по умолчанию, которые превращают ваш шаблон в страницу продукта:
Добавление или удаление модулей WooCommerce из вашего базового макета возможно после его создания. Доступ к модулям WooCommerce можно получить через «Модули» > «Модули темы» > «WooCommerce». Помимо рейтингов продуктов, описаний, дополнительных продаж и многого другого, у вас будет множество вариантов:
При редактировании макета вы можете переключиться на просмотр другого продукта с помощью функции «Предварительный просмотр как:» в Beaver Builder:
С помощью этой функции вы можете проверить, как выглядит каждый из ваших продуктов, когда вы их просматриваете. Опубликуйте страницу продукта, как только вы будете удовлетворены дизайном и модулями, которые она включает. Теперь страницы ваших отдельных продуктов будут оформлены в новом формате.
Шаг 3: Создайте страницу магазина WooCommerce
Пришло время сделать страницу магазина такой же, как ваши продукты WooCommerce. Макет магазина WooCommerce по умолчанию очень прост и не очень интересен:
При разработке страницы вашего магазина Beaver Themer — лучший выбор. Начните с перехода в WooCommerce > Настройки, щелкните вкладку продукта и убедитесь, что страница магазина указывает на магазин или любую другую пользовательскую страницу, которую вы создали. Он отображает ваши продукты в виде страницы архива, если вы ее укажете.
Выберите Themer Layouts > Add New в Beaver Builder > Theme Builder, а затем нажмите Add New. Выберите параметр «Макет темы» в разделе «Тип» на следующем экране:
Следующий экран позволит вам выбрать расположение архива продуктов. Товары вашего магазина будут отображаться на странице магазина и на страницах категорий товаров. При необходимости вы можете изменить его.
Нажав на Launch Beaver Builder, вы сможете настроить свой макет. Следующая страница появляется, когда вы нажимаете знак «плюс» в верхней части экрана, а затем выбираете «Шаблоны»:
Новую страницу магазина можно легко создать с помощью шаблона «Продукты». Используя все инструменты, которые мы рассмотрели до этого момента, вы можете вносить изменения в шаблон после его создания.
Убедитесь, что макет вашего магазина соответствует настройкам стиля модуля «Сообщения», настроив их, пока они не будут соответствовать.
В верхней части экрана нажмите «Готово» > «Опубликовать», как только изменения будут сохранены в модуле.
Последнее, что вам нужно сделать, это убедиться, что любая страница, которую вы обозначили как страницу магазина, появится в меню навигации вашего сайта. В противном случае вы можете добавить его из раздела «Внешний вид»> «Меню» панели управления WordPress.
Шаг 4. Настройте страницу своего магазина с помощью макетов WooCommerce
Модуль WooCommerce также является отличной функцией Beaver Builder, которая делает его отличным конструктором страниц WooCommerce. Это позволяет вам добавлять части функциональности WooCommerce в любую структуру Beaver Builder на вашем сайте. В этом модуле доступны следующие опции:
- Одиночные и множественные продукты:
- Вы можете отображать выбранные продукты на основе идентификаторов продуктов или категорий, или вы можете показывать продукты, которые находятся в продаже, последние продукты, продукты с самым высоким рейтингом или что-либо еще, что вы хотите.
- Корзина: отображает содержимое корзины покупок WooCommerce.
- Checkout: Отображает страницу оформления заказа, как обычно.
- Отслеживание заказов: в этой форме вводится информация о заказах.
- Моя учетная запись: эта страница содержит информацию, обычно находящуюся на странице «Моя учетная запись», такую как информация об учетной записи, прошлые заказы и сведения об адресе.
Полезное
Заключение
Создание интернет-магазина, эффективно представляющего ваш бренд, — непростая задача. Однако этот процесс можно упростить с помощью Beaver Builder, плагина для WooCommerce.
Как видите, мы наметили четыре важных шага для создания вашей витрины с помощью WooCommerce и Beaver Builder:
- Создайте магазин, добавив товары.
- Создайте новую страницу продукта.
- Создайте новую страницу магазина WooCommerce.
- С макетами WooCommerce вы можете дополнительно настроить свой сайт электронной коммерции.
Есть ли что-нибудь, что вы хотели бы узнать об использовании Beaver Builder для создания страниц продуктов и магазинов? Пожалуйста, поделитесь своими мыслями ниже в разделе комментариев!