Создайте и спроектируйте потрясающую страницу продукта WooCommerce с помощью Elementor.

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

Elementor — один из ведущих разработчиков веб-сайтов WordPress на рынке, но знаете ли вы, что с его помощью можно создавать магазины WooCommerce?

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

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

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

• Создание шаблона Elementor
• Создание изображения или галереи продукта Elementor
• Название продукта WooCommerce, цена и добавление в корзину
• Настройка вкладок продуктов Elementor
• Краткое описание продукта Elementor
• Дополнительные продажи продуктов Elementor и WooCommerce
• Заключение — конструктор страниц продуктов Elementor

Создание шаблона Elementor

Первым шагом в процедуре является создание нового шаблона Elementor, перейдя в раздел «Шаблоны» на панели управления WordPress. Нажмите «Создать новый», затем выберите «Один продукт» в качестве шаблона, который вы хотите создать.

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

Создание изображения или галереи продукта Elementor

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

Создайте простую строку из двух столбцов и введите модуль «Изображения продуктов» в левом столбце; это выглядит практично и выполняет свою работу, но давайте настроим значок продаж так, чтобы он соответствовал теме Elementor Hello, используемой в этой статье. Для этого нам нужно применить небольшую строку пользовательского CSS, который можно добавить, выбрав «Дополнительно» > «Пользовательский CSS», и вставив приведенный ниже код.

селектор .onsale {\sbackground-color: #cc3366; \s}

WooCommerce , цена и добавление в корзину

Мы добавим модули Elementor для названия продукта, цены продукта и добавления в корзину в правом столбце.

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

Содержание этих модулей превосходно. Таким образом, мы будем работать на вкладке «Стиль». Во-первых, давайте обновим шрифт и цвет названия продукта, чтобы они соответствовали тем, которые используются в теме Hello Elementor.

Затем нам нужно сделать то же самое для модулей «Цена продукта» и «Добавить в корзину», щелкнув каждый модуль и изменив цвет текста. Для цены продукта я буду использовать темно-серый цвет, чтобы он контрастировал с заголовком, поэтому, если вы следуете инструкциям, введите этот шестнадцатеричный код — #54595f.

Далее в модуле «Добавить в корзину» мы кое-что обновим. Цвет фона кнопки и радиус границы кнопки с использованием следующих настроек:

• Установите для содержимого значение «Добавить в корзину».
• Установите цвет фона на «#cc3366».
• Установите радиус границы на 0

Я изменил радиус границы селектора суммы на 0, что вы можете сделать на вкладке «Стиль» для «Количество».

Настройка вкладок продуктов Elementor

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

Создайте новую строку под верхней частью и перетащите модуль «Вкладки с данными о продукте» из конструктора Elementor в строку, чтобы вставить его. Здесь не требуется особого стиля, поскольку он наследует некоторые стили из темы Hello Elementor. Однако давайте изменим стиль кнопки отправки отзыва.

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

.woocommerce #review form #reply .form-submit input {background-color: #cc3366; цвет: #fff; радиус границы: 0 пикселей; }

Краткое описание продукта Elementor

Итак, на данный момент у нас есть приличный, простой на вид дизайн, но он выглядит немного скудным. Добавление модуля «Краткое описание продукта» в верхнюю часть может помочь дополнить это и добавить больше контекста.

Найдите модуль «Краткое описание WooCommerce», затем перетащите его под цену продукта и над модулем «Добавить в корзину».

Здесь пока не требуется никаких стилей, поскольку он унаследовал стили от Hello Elementor.

Дополнительные продажи продуктов Elementor и WooCommerce

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

Найдите модуль «Допродажа продукта» в конструкторе Elementor и вставьте его в новую строку за вкладками «Данные о продукте».

Как видите, это требует небольшой корректировки, чтобы дополнить остальную часть нашего стиля. Начните модифицировать модуль и внесите следующие изменения:

• Установите цвет заголовка — #cc3366.
• Установите цвет заголовка — #cc3366.
• Установите цвет цены — #54595f.
• Установите цвет фона кнопки — #cc3366.
• Установите цвет кнопки — #fff.
• Установите радиус границы кнопки t0 – 0.

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

Как только вы закончите, вы опубликуете свой шаблон. В следующем окне вы увидите вопрос «Где вы хотите отображать свой шаблон?». Нажмите «Добавить условие», чтобы определить, когда следует использовать этот шаблон. Вы можете выбрать «Все продукты», чтобы использовать шаблон на всех страницах вашего продукта. Вы также можете использовать этот шаблон только для продуктов, которые относятся к определенной категории или имеют определенный тег, связанный с ними.

Заключение — конструктор страниц продуктов

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

Вы также можете выбрать пустую страницу и создать ее с нуля, используя виджеты продукта для полностью индивидуального внешнего вида. Используйте пустую страницу, закройте всплывающее окно библиотеки шаблонов, когда оно появится, и начните создавать новую страницу. Пользовательская кнопка «Добавить в корзину», «Цена продукта», «Изображение продукта» и «Название и описание продукта» — это лишь некоторые из виджетов WooCommerce, которые вы можете использовать для настройки страницы вашего продукта. Вы можете просмотреть все различные виджеты, доступные в настоящее время, посетив эту страницу. При желании вы можете расположить виджеты в любом месте макета страницы и настроить их стили в соответствии с желаемым внешним видом.

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