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

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

Страницы продуктов WooCommerce

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

Макет по умолчанию

Вместо этого можно использовать другие плагины, чтобы делать такие вещи, как:

  • Добавить дополнительные элементы контента.
  • Изменить шрифты и цвета.
  • Внесите изменения в структуру страницы.
  • Или даже полностью настроить страницы продуктов с нуля.

И все это делать без программирования!

Некоторые идеи полностью настраиваемых шаблонов продуктов:

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

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

1. Измените стиль страниц продукта

Вот несколько плагинов, если вы ищете всего несколько косметических настроек, таких как изменения шрифтов, цвета или изменения отдельных элементов.

WooCommerce Colors

Плагин WooCommerce Colors

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

Настройщик WordPress

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

Цена: Бесплатно.

YellowPencil

Плагин YellowPencil

Благодаря плагину YellowPencil можно изменять шрифты, цвета, размеры шрифтов, расстояние между элементами и даже добавлять анимированные визуальные эффекты во внешний интерфейс вашего сайта. В бесплатной версии есть много вариантов стилей, но Yellow Pencil Pro добавляет расширенные параметры для градиентов, анимации, пользовательских шрифтов, цветовых палитр, фоновых изображений и многого другого.

Анимированные визуальные эффекты

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

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

Цена: бесплатно, с возможностью платного обновления.

CSS Hero

Плагин CSS Hero

Что он делает: CSS Hero – это визуальный редактор, с помощью которого можно вносить изменения в стиль вашего сайта, автоматически настраивая CSS по мере внесения визуальных изменений.

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

Цена: платно, от 29 долларов в год.

Смотрите также:

Плагины Gutenberg блоков для магазинов WooCommerce.

2. Добавьте новые элементы в списки продуктов

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

WooCommerce Single Product Page Customizer

Плагин WooCommerce Single Product Page Customizer

WooCommerce Single Product Page Customizer позволяет добавлять поля пользовательского текста или HTML в шаблон продукта и выбирать, где на странице их отображать.

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

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

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

Цена: Бесплатно.

Custom Product Tabs for WooCommerce

Плагин Custom Product Tabs for WooCommerce<

Custom Product Tabs for WooCommerce позволяет добавлять дополнительные вкладки с текстом, изображениями, HTML или короткими кодами на страницах продуктов. Затем вы можете выбрать, для каких продуктов отображать информацию.

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

Плагин для отображения дополнительной информации о производителях

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

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

Цена: бесплатно, с платной версией Pro.

Product Video for WooCommerce

Плагин Product Video for WooCommerce

Product Video for WooCommerce позволяет добавлять видео на страницы продуктов или в галерею продуктов. Можно встраивать видеоролики YouTube, Vimeo, Dailymotion, Metacafe, Facebook или загружать свои собственные. Он также предлагает несколько вариантов отображения: во всплывающем окне, внутри вашей страницы и в полноэкранном режиме.

Варианты отображения

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

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

Цена: платно, сейчас 49 долларов.

3. Создавайте индивидуальные продукты

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

Toolset

Плагин Toolset

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

Цена: платно, планы от 69 долларов.

Создайте собственный шаблон с динамическим контентом и полностью настраиваемым стилем

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

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

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

Выберите конкретные критерии отображения для ваших шаблонов

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

Разные шаблоны для товаров

Дальнейшая настройка вашего магазина WooCommerce с еще большей функциональностью

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

Настройка магазина WooCommerce

Например, вы можете:

  • Создавать интерфейсные формы, с помощью которых поставщики смогут добавлять свои продукты на ваш сайт.
  • Создавать отношения записей, которые позволяют вам связывать свои продукты с другими типами записей (такими как «Одежда»).
  • Отображать расположение магазинов на карте.
  • Добавлять мощные функции поиска и фильтрации.
  • Создавать дополнительные настраиваемые поля для дальнейшего определения ваших продуктов.

Настраиваемые поля

Выбор подходящих инструментов WooCommerce для вас

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

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

Алексей Шевченко
Алексей Шевченко
редактор wpcafe
Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Источник: hostenko.com/wpcafe

%d такие блоггеры, как: