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

Как вы, возможно, знаете, Elementor Pro поставляется с функцией конструктора WooCommerce, которая позволяет вам создать сайт индивидуальная электронная коммерция с WooCommerce без программирования. Эта функция позволяет создавать собственные страницы WooCommerce с помощьювизуальный редактор Elementor, который предлагает интуитивно понятный интерфейс.

Смотрите также: Как установить Elementor на WordPress

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

В этой статье мы покажем вам, как создать настраиваемую страницу магазина WooCommerce с помощью функции конструктора WooCommerce от Elementor Pro.

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

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

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

Существует как минимум два виджета Elementor, которые вы можете использовать для создания настраиваемой страницы магазина WooCommerce: Архив продуктов и Товары.

В этом примере мы используем последний.

Функция виджета Продукция очень похож на виджет Сообщения. Разница в том, что виджет «Продукты» используется для отображения продуктов WooCommerce, а виджет «Сообщения» - для отображения сообщений в блоге.

Читайте также: Как импортировать или экспортировать модели в Elementor

Обратите внимание, что вы можете найти виджет «Товары» только тогда, когда плагин WooCommerce установлен и активирован.

Чтобы начать создание настраиваемой страницы магазина WooCommerce с помощью Elementor Pro, перейдите к первый à Шаблоны -> Конструктор тем на панели управления WordPress. Щелкните вкладку Продукция архив страницы Конструктора тем, затем нажмите кнопку добавлять АРХИВ ПРОДУКЦИИ.

Дайте вашей модели имя и нажмите кнопку СОЗДАТЬ МОДЕЛЬ.

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

См. Также: Как использовать Color Sampler в Elementor

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

Перед добавлением виджета «Продукты» в поле редактирования вы можете определить макет, добавив разделы и столбцы. Когда макет будет готов, вы можете просто перетащить виджет «Продукты» в поле редактирования.

Как видите, виджет «Продукты» автоматически загружает и отображает последние продукты WooCommerce. Вы можете изменить запрос, открыв блок Запрос под вкладкой Содержание из панели настроек. На выбор есть пять вариантов:

• Текущий запрос - Текущий запрос
• Последние продукты - Последние продукты
• Продажа - Продажа
• Рекомендуемые - Рекомендуемые
• Ручной выбор - ручной выбор

Вы также можете установить порядок, в котором отображаются товары, или исключить определенные

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

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

Читайте также: Как использовать палитру цветов в Elementor

Когда вы закончите редактирование страницы, вы можете нажать кнопку ОПУБЛИКОВАТЬ внизу панели настроек.

Добавьте условие отображения, нажав кнопку добавить условие. Поскольку вы хотите создать собственную страницу магазина, выберите опцию Магазин Страница. Нажмите кнопку СОХРАНИТЬ И ЗАКРЫТЬ чтобы сохранить изменение.

До сих пор вы успешно создали настраиваемую страницу магазина WooCommerce с помощью Elementor Pro. Ты можешь идти на вашем сайте.com/store чтобы проверить результат.

Настроить виджет "Товары"

Перед публикацией страницы вы можете настроить виджет «Товары», чтобы сделать его более привлекательным. Для этого щелкните виджет в поле редактирования и перейдите на вкладку Стиль из панели настроек. Есть четыре блока, которые вы можете открыть следующим образом:

• 
  Продукция

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

• Коробка

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

• Нумерация страниц

Если вы активируете опцию Нумерация страниц из блока Содержание, вы можете открыть блок Нумерация страниц под вкладкой Стиль для настройки нумерации страниц. Вы можете установить такие параметры, как интервал, цвет границы, цвет фона и т. Д.

Вы также можете определить разные параметры для каждого состояния (нормальное, указывающее и активное).

• Грязная вспышка

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

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

В конце

WooCommerce Builder — одна из функций, предлагаемых Elementor Pro. Это позволяет вам создать сайт персонализированная и уникальная платформа электронной коммерции с WooCommerce и без кодирования. Нет необходимости устанавливать WordPress тема который утверждает, что создан для WooCommerce. Вместо этого вы можете самостоятельно создавать собственные страницы WooCommerce, используявизуальный редактор от Элементора.

Читайте также: Как добавить разделитель для создания раздела в Elementor

До версии 3.2.2 Elementor Pro позволяет создавать только пользовательские страницы магазина, пользовательские страницы одного продукта и пользовательские страницы архива продуктов. Но Elementor объявил, что в следующей версии Elementor Pro вы также сможете создать настраиваемую страницу корзины, настраиваемую страницу оформления заказа и настраиваемую страницу учетной записи клиента.

Получите Elementor Pro прямо сейчас!

Заключение

Здесь ! Вот и все, что касается этой статьи, в которой показано, как создать настраиваемую страницу для магазина WooCommerce с помощью Elementor.. Если у вас есть вопросы о том, как туда добраться fдайте нам знать в Комментарии.

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...