15.08.2020

Как создать красивые страницы продукта WooCommerce с Elementor

Стандартные страницы продукта WooCommerce довольно функциональны и красивы! Но мы можем добиться большего успеха, особенно соединяя WooCommerce и Elementor!

В этом руководстве мы покажем вам, как создавать собственные (и красивые) страницы продуктов WooCommerce, чтобы «ВАУ» вашим клиентам и увеличить продажи.

Что вам нужно

Помимо того, что у вас уже есть – работающей установки WordPress и WooCommerce, добавленной к этому – вам понадобится плагин для конструктора страниц Elementor.

Elementor поставляется в двух вариантах – бесплатном и платном. Несмотря на то, что в Elementor есть некоторые настройки, которые можно использовать для WooCommerce, чтобы получить действительно хорошие вещи, вам нужно перейти на профессиональную версию. Это будет стоить вам 49 долларов за один сайт.

 Elementor – не единственный конструктор страниц, который работает с WooCommerce и позволяет создавать собственные страницы продуктов WooCommerce.  Тем не менее, Elementor является нашим любимым решением для настройки WooCommerce.

Прежде чем приступить к работе, вы должны установить на свой сайт бесплатные плагины Elementor и Elementor pro:

  • Установить Elementor бесплатно просто. Просто иди в Плагины → Добавить новый и введите Elementor  в поле поиска. Установите и активируйте.
  • Чтобы установить Elementor pro, сначала необходимо совершить покупку на Elementor.com. Вы сможете загрузить пакет Elementor pro из своего профиля пользователя – это ZIP-файл. Перейти к Плагины → Добавить новый и нажмите на Загрузить плагин. Выберите Elementor ZIP на рабочем столе и загрузите его на свой сайт. Активируйте плагин.

Elementor попросит вас подтвердить свою лицензию до того, как все начнет действовать.

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

Для начала перейдите к Шаблоны и нажмите на Добавить новое,

Шаблоны Elementor для страниц продуктов WooCommerce

Из списка выберите Один продукт,

Один продукт

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

Шаблоны продуктов Elementor

Вы увидите, что ваш шаблон добавлен на холст Elementor. Теперь вы можете настроить шаблон так, как считаете нужным – добавить новые элементы на страницу, настроить текущие элементы, удалить ненужные элементы и т. Д.

Панель управления Elementor WooCommerce

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

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

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

Добавьте свой брендинг и цвета

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

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

карандаш

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

Вкладка «Стиль» для страниц вашего продукта WooCommerce

Давайте нажмем на Типография, Это покажет другое окно, где вы можете изменить шрифт и все его параметры.

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

изменить типографику на страницах продуктов WooCommerce

Перестроить / переместить описание товара

WooCommerce отображает описания ваших продуктов в нескольких местах. Нам не нужно сейчас вдаваться в подробности, но давайте сосредоточимся на двух вещах:

  • Краткое описание
  • ваши вкладки данных продукта

Краткое описание это только что нужно. WooCommerce берет этот текст из Краткое описание (одно из полей, которые вы заполняете при создании нового продукта). Желательно, чтобы краткое описание отображалось где-то в верхней части страницы продукта.

Вы можете взять Elementor’s Краткое описание и перетащите его туда, где вам нужно.

Краткое описание для отображения на страницах продуктов WooCommerce

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

вкладки данных для страниц продукта WooCommerce

Не забудьте также стилизовать цвета и типографику этих блоков.

Настройте кнопку «Добавить в корзину»

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

Вы можете использовать два разных типа блоков для кнопки «добавить в корзину» в Elementor.

Custom Добавить в корзину

Поэкспериментируйте с ними обоими, чтобы увидеть, что лучше в вашем случае. Нажать на карандаш и посмотреть, что доступно на боковой панели, когда дело доходит до настроек данного блока.

добавить в корзину варианты

В пару щелчков вы можете сделать вашу кнопку намного лучше.

последняя кнопка

Добавить / удалить рейтинг продукта

Отображение рейтингов продуктов может быть отличным способом дать вашим покупателям возможность окончательно подтолкнуть вас к покупке. Единственная проблема заключается в том, что вам нужно иметь некоторые рейтинги в первую очередь. 🤷♂️

Если ваш магазин новый и у вас еще нет оценок, лучше не размещать блоки оценок на странице. Щелкните правой кнопкой мыши на Рейтинг продукта и удалить его.

удалить оценки со страниц продукта WooCommerce

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

стиль рейтинга

Настроить мобильный и планшетный вид

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

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

В левом нижнем углу интерфейса Elementor есть кнопка которая нам поможет.

адаптивный режим для страниц продукта WooCommerce

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

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

мобильные шрифты

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

Просматривайте шаблон по элементам, пока не настроите все для мобильных устройств и планшетов.

Публикация пользовательских страниц продуктов WooCommerce

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

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

состояние дисплея

Чтобы использовать шаблон для всех продуктов, просто выберите «Продукты» из списка, например:

включить для продуктов

Нажмите на СОХРАНИТЬ И ЗАКРЫТЬ.

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

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

конечные пользовательские страницы продукта WooCommerce с Elementor

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *