Хотите узнать, как создать собственную страницу магазина WooCommerce с помощью Elementor?
Как вы, возможно, знаете, Elementor Pro включает в себя функцию конструктора WooCommerce, которая позволяет создавать собственные веб-сайты электронной коммерции WooCommerce без программирования. Эта функция позволяет создавать пользовательские страницы WooCommerce с помощью визуального редактора Elementor, который предлагает интуитивно понятный интерфейс.
Смотрите также: Как установить Elementor на WordPress
На момент написания этой статьи вы можете создавать собственные страницы для страницы магазина, страницы продукта и страниц архива продукта (теги и категории). Вскоре вы также сможете создавать собственные страницы для страницы оформления заказа и страницы корзины.
В этой статье мы покажем вам, как создать настраиваемую страницу магазина WooCommerce с помощью функции конструктора WooCommerce от Elementor Pro.
Сама страница магазина является одной из страниц по умолчанию в WooCommerce. Эта страница служит витриной для демонстрации ваших продуктов. Вы можете получить доступ к этой странице, перейдя в вашсайт.com/магазин. По умолчанию на странице магазина WooCommerce отображаются только продукты WooCommerce.
Создавая настраиваемую страницу магазина с помощью Elementor Pro, вы можете добавлять элементы, чтобы сделать вашу витрину более привлекательной.
Как создать собственную страницу магазина WooCommerce с помощью Elementor
Для создания пользовательской страницы магазина WooCommerce можно использовать как минимум два виджета Elementor: Архив продуктов и Товары.
В этом примере мы используем последний.
Функция виджета Продукты очень похож на виджет Сообщения. Разница в том, что виджет «Продукты» используется для отображения продуктов 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.
Читайте также: Как добавить разделитель для создания раздела в Elementor
До версии 3.2.2 Elementor Pro позволяет создавать только пользовательские страницы магазина, пользовательские страницы одного продукта и пользовательские страницы архива продуктов. Но Elementor объявил, что в следующей версии Elementor Pro вы также сможете создать настраиваемую страницу корзины, настраиваемую страницу оформления заказа и настраиваемую страницу учетной записи клиента.
Получите Elementor Pro прямо сейчас!
Заключение
Вот и всё! На этом статья завершается, и в ней рассказывается, как создать пользовательскую страницу магазина WooCommerce с помощью Elementor.. Если у вас есть вопросы о том, как туда добраться fдайте нам знать в Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...