Как редактировать страницу магазина WooCommerce с помощью Elementor

Опубликовано: 2022-01-26

Если у вас есть магазин WooCommerce и вы хотите развивать свой бизнес, мы здесь, чтобы показать вам, как редактировать страницу магазина WooCommerce с помощью Elementor.

В этой статье мы покажем вам процесс редактирования страницы магазина WooCommerce за несколько простых шагов. Вы должны быть с нами до конца, чтобы изучить процесс.

Я предполагаю, что вы установили WooCommerce и настроили страницу магазина для своего бизнеса. Давайте покажем вам процесс редактирования этой страницы.

Есть несколько простых шагов, чтобы отредактировать страницу магазина. Вам не нужно беспокоиться об этом.

Шаги приведены ниже:

Шаг 1. Создайте шаблон единого продукта

Шаг 2. Выберите готовый шаблон страницы продукта или создайте его с нуля.

Шаг 3: Добавьте виджеты продуктов, которые составят вашу страницу

Шаг 4. Предварительный просмотр страницы продукта с другим продуктом

Шаг 5: Установите условия

Давайте начнем!

Шаг 1. Создайте шаблон единого продукта

Как редактировать страницу магазина WooCommerce с помощью Elementor

Начните разрабатывать шаблон отдельного продукта в Elementor, следуя той же процедуре, что и при создании обычного одиночного шаблона.

Для этого вам нужно перейти в панель инструментов WordPress> Шаблон> Добавить новый. Затем вам нужно выбрать « Одна страница » в параметрах шаблона и нажать кнопку «Создать».

Шаг 2. Выберите готовый шаблон страницы продукта или создайте его с нуля.

Следуйте самому простому способу начать. Используйте один из предварительно разработанных шаблонов страниц продукта, настройте его в соответствии с вашим сайтом. Вы можете выбрать различные стили, потому что есть несколько разных стилей страниц продуктов на выбор.

Прежде чем приступить к добавлению виджетов, убедитесь, что вы работаете со страницей товара во всю ширину, переключившись на полноразмерный шаблон.

Используйте Elementor, чтобы иметь полный контроль над макетом и стилем страницы продукта.

Есть еще вариант построить его с нуля. В панели редактирования вы можете увидеть специальные виджеты для товара.

Шаг 3: Добавьте виджеты продуктов, которые составят вашу страницу

Теперь пришло время создать элементы, которые составят страницу вашего продукта. Полный список виджетов продукта см. в нашей документации по этому вопросу. В этом уроке вы будете использовать следующие виджеты Elementor и никакие другие плагины:

  • Виджет «Название продукта»
  • Виджет изображения продукта
  • Виджет Woo Breadcrumbs
  • Виджет с кратким описанием
  • Виджет оценки продукта
  • Виджет цен на товары
  • Мета-виджет продукта
  • Добавить в корзину виджет
  • Связанный с продуктом
  • Вкладки данных о продукте
  • Виджет дополнительных продаж

У вас есть полная свобода экспериментировать с макетом и перемещать элементы.

У вас есть возможность использовать любой другой виджет, чтобы сделать страницу продукта более эффективной и привлекательной. Вы можете добавить кнопки «Поделиться», виджеты призыва к действию, избранное изображение, раскрывающиеся меню и даже настраиваемые поля в шаблон с помощью функции динамического содержимого.

Шаг 4. Предварительный просмотр страницы продукта с другим продуктом

Мы советуем предварительно просмотреть его с несколькими различными продуктами, чтобы убедиться, что ваш шаблон продукта имеет правильный дизайн.

Вы должны нажать на значок глаза на нижней левой панели, затем настройки. В разделе «Настройки предварительного просмотра» выберите конкретный продукт, который вы хотите отобразить. Теперь подайте заявку и просмотрите, чтобы увидеть, как это выглядит.

Шаг 5: Установите условия

Это последний этап, на котором вы устанавливаете условия, определяющие, где будет отображаться ваш шаблон продукта. По умолчанию шаблон повлияет на все страницы товаров на вашем сайте. Вы также можете выбрать конкретную категорию товаров.

Нажмите «Опубликовать» — и ваш единственный продукт будет запущен!

Все сделано! Вы успешно отредактировали страницу своего магазина WooCommerce с помощью wsdgets. Теперь вы можете ожидать больше посетителей на свой сайт, чем раньше.

Заключение

Вы можете получить гибкость дизайна для визуального создания и точной настройки страниц продуктов с помощью Elementor WooCommerce Builder, который дает вам такую ​​возможность. Это поможет вам сэкономить ваше время и значительно сократить время, необходимое для перехода от идеи, которая у вас есть, к живому и полнофункциональному интернет-магазину WooCommerce.

Существует множество тем WooCommerce, на которые вы можете посмотреть и проверить эти примеры веб-сайтов WooCommerce для вдохновения.

Спасибо, что вы с нами. Хорошего дня.