Мар
31
6

Создаем вариативный товар в WooCommerce магазине

Вариативный товар WooCommerceРассмотрим процесс создания вариативного товара в WooCommerce для интернет-магазина на WordPress. Под этим термином подразумевают продукцию, которая может продаваться на сайте в нескольких вариантах. Самый простой пример — футболки (одежда), для которых существуют, во-первых, разные размеры, а во-вторых, цвета. Делать под каждый из параметров отдельную страницу с соответствующим товаром не особо эффективно — это запутает и посетителей, и поисковые системы. К счастью, в модуле магазина имеется отличная реализации данной функции.

Алгоритм создания вариативного товара в WooCommerce:

  1. Добавление атрибутов (свойств).
  2. Задание значений атрибутам.
  3. Непосредственно создание вариций в товарах

Новые атрибуты для товаров

Первым делом добавляем новые (вариативные) атрибуты товаров — это те самые «цвета», «размеры», если говорить об одежде. В других сферах они, разумеется, могут быть иными. Данные параметры вы потом сможете выбирать и заполнять при создании/редактировании товаров магазина (помимо базовых опций).

Итак, переходим в раздел «Товары» — пункт «Атрибуты». Эта страница админки визуально и функционально похожа на процесс создания категорий.

WooCommerce

В левой колонке пишете название атрибута, например, «Вес», а также определяете для него ярлык (slug), пусть будет — weight. Ниже есть 2 типа атрибутов:

  • Выбор — означает, что в будущем редактор сможет выбирать один из вариантов, указанных вами по умолчанию, например, для веса: 200г, 500г и 800г.
  • Текст — пользователь в админке сможет написать любой текст в качестве значения параметра.

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

Добавление значений для атрибутов

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

Элементы управления на странице аналогичны предыдущему шагу.

Значения атрибутов товаров в WooCommerce

Указываете название значений и ярлыки для них. Допустим, для параметра «Вес» это может быть: 100, 200, 500 грамм. Если у вас есть опция «Цвет», вводите свойства: «белый», «синий», «черный» и т.п. 

Создание вариативных товаров в WooCommerce

Данный этап состоит из двух шагов. Сначала заходим на страницу создания/редактирования товара, где стандартно указываете заголовок, текст, категорию, миниатюру и т.п. После этого:

  1. В блоке «Данные товара» ставим опцию с вариативным типом.
  2. Идем во вкладку «Атрибуты».
  3. Из списка индивидуальных атрибутов выбираем нужное свойство (его мы создавали в первых двух пунктах алгоритма).
  4. В блоке значений добавляем показатели атрибута, которые будут доступны для вариативного товара, например, вес 100 и 500 грамм.
  5. Обязательно ставим галочку «Используется для вариаций».

Создание вариативных товаров в WooCommerce

Кликаем по кнопке «Сохранить атрибуты».

На втором шаге переходим в закладку «Вариации». где в выпадающем меню выбираем «Создать вариации из всех атрибутов».

Создаем вариативный товар

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

Создание вариативных товаров в WooCommerce

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

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

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

Цена вариативного товара

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

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

комментариев 6 к статье “Создаем вариативный товар в WooCommerce магазине”

  • Ярослав   29.08.2017

    Здравствуйте!

    А как вывести фотографии вариативного товара? На сайте показываются фотографии только из первой карточки, и к тому же к вариативному товару прикрепляется одно изображение, а нужно 2,3..

    Есть ли модули, хаки?

  • Tod   29.08.2017

    Ярослав, с фотками вариативных товаров я особо не разбирался, думаю, нужно искать модули.

  • Вячеслав   02.10.2017

    А как вариативному товару задать оптовую и розничную цену(две цены)

  • Tod   02.10.2017

    Вячеслав, вопрос — у вас действительно вариативный товар или нужно сделать один вид продукции с разными ценами за 10,20 и т.п. штук? В любом случае совету обратить внимание на модуль скидок WooCommerce Bulk Discount. Я реализовывал похожую задачу через него.

  • Вячеслав   02.10.2017

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

  • Tod   03.10.2017

    Вячеслав, WooCommerce Bulk Discount пробовали? по описанию он работает с вариациями.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

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

Последние посты
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости