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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Elementor и WooCommerce увеличивают объем продаж продуктов

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

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

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

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

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

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

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

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

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

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