Мар
31
45

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

Вариативный товар WooCommerceРассмотрим процесс создания вариативного товара в WooCommerce для интернет-магазина. Это сложнее чем реализовать опцию рекомендуемых Featured Products, но и значимость функции куда больше. Под данным термином в 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% случаев для работы вам этого алгоритма хватит. Если есть что добавить/спросить по теме — пишите ниже.

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

  • Павел   01.03.2019

    Добрый день, у меня та самая проблема что у Дмитра, а как быть с той пиццой при выборе размера на главной страницы магазина… Буду очень благодарен за ответ

  • Tod   01.03.2019

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

  • Tod   07.03.2019

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

  • Любовь   16.05.2019

    Добрый день, подскажите, хочу чтобы цена товара была например 1000, и в качестве опции доработка этого товара +200 руб. Т.е. чтобы клиент видел не диапазон цен, в цену в 1000, а если клиент выберет опцию с доработкой, тогда бы уже и высвечивалась цена 1200. Возможно это реализовать без доп.модулей?

  • Tod   16.05.2019

    Любовь, посмотрите плагин Extra Product Options (Product Addons) for WooCommerce — судя по описанию, он должен что-то такое делать.

  • Sam   07.08.2019

    Здравствуйте Tod, с вариативным товаром разобрался, но остался один вопрос. Как можно контролировать количество товара если товар на развес?

  • Tod   07.08.2019

    Sam, я если честно, вообще с количеством никогда не работал.. еще и на развес — поэтому точно не смогу подсказать.

  • Александр   01.06.2020

    Здравствуйте. Если разные размеры (m, s, l, xl, xxl, xxl и тд), но одна стоимость, приходится прописывать цену на каждый размер одну и ту же. Есть возможность указать один раз стоимость? Но чтобы размер можно было выбрать при заказе. Ставил обычные товары — тогда отображаются размеры просто в виде текста, без возможности выбора размера. А если вариативные, то цену прописывать постоянно под каждый размер каждого товара.

  • Tod   01.06.2020

    Александр, недавно заметил, что после создания вариативных товаров во вкладке «Вариации» в выпадающем списке появляется пункт «Задать базовую цену» — таким образом можно быстро установить значение для всех позиций, если цена одинаковая.

  • Ксения   28.02.2021

    Может тут кто поможет) например магазин футболок, есть выбор цвета: синий и голубой,(а под главной фотографией товара размещается галерея, где футболки и синего цвета и голубого) как сделать так чтобы при выборе цвета синий, все картинки по данному товару в галереи под главным фото стали тоже синими, то есть чтобы галерея фотографий менялась в зависимости от выбора цвета

  • Tod   28.02.2021

    Ксения, в статье Что нужно знать при создании онлайн-магазина я упоминал один плагин WooCommerce Variation images gallery который, по идее, подойдет вашей задаче. Там для вариаций можно создавать галереи и добавлять туда фотки — они будут показываться при переключении вариаций. Если модуль не найдется можно просто загуглить по этому названию и подобрать еще какой-то плагин.

  • Елена   04.04.2021

    Здравствуйте
    Нигде не могу найти ответ на свой вопрос — где поменять цвет текста названия атрибута на странице товара.
    Помогите, пожалуйста.
    Вот тут на страничке товара formula-vdohnovenia.com/product/albomostroenie/ не видно название атрибута Альбомостроение(возле выпадающего окна выбора опций).

  • Tod   06.04.2021

    Елена, это меняется с помощью стилей. Тут либо через FTP править файл style.css вашей темы, либо в админке в меню «Внешний вид» — «Настроить» открыть параметры шаблона и там где-то будет пункт с «Дополнительными стилями». В нем надо добавить строку:
    .woocommerce div.product form.cart .variations label {
    color: #000;
    }

  • Елена   19.04.2021

    Здравствуйте!
    Подскажите, пожалуйста, как настроить доставку вариативных товаров?
    Размер товара влияет на стоимость доставки.
    Спасибо.

  • Tod   19.04.2021

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

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


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

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

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

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

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