Статьи

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

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

Продукт WooCommerce по умолчанию

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

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

… Все без программирования!

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

Примеры индивидуальных продуктов WooCommerce

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

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

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

Цвета WooCommerce

Цвета WooCommerce

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

Плагин WooCommerce Colors

Изменение цвета кнопки «Добавить в корзину» с помощью плагина WooCommerce Colors.

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

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

Желтый карандаш

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

Плагин YellowPencil

Изменение шрифта заголовка страницы продукта, цвета цены и цвета кнопки с помощью плагина YellowPencil

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

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

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

CSS Hero

Плагин CSS Hero Live CSS Editor

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

Плагин CSS Hero

Изменение цвета кнопки «Добавить в корзину» с помощью плагина CSS Hero

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

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

Цена: Платный, от 29 долларов в год

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

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

Настройка страницы одного продукта WooCommerce

Настройка страницы одного продукта WooCommerce

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

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

Настройка страницы одного продукта

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

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

Вкладки пользовательских продуктов для WooCommerce

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

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

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

Вкладки пользовательских продуктов для WooCommerce

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

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

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

Видео о продукте для WooCommerce

Видео о продукте для WooCommerce

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

Видео о продукте для WooCommerce

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

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

Цена: Выплачено, в настоящее время 49 долларов

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

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

Набор инструментов

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

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

Цена: Платный, тарифные планы от 69 долларов США

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

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

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

Пользовательский шаблон продукта Toolset

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

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

Шаблон набора инструментов для товаров, которых нет в наличии

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

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

Набор инструментов для настройки вашего магазина WooCommerce

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

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

Набор инструментов для настройки вашего магазина WooCommerce

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

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Кнопка «Наверх»

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: