Мар

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оцените статью:

(голосов - 11, средний балл: 5,91 из 7)

Загрузка...

Категории: WooCommerce; Начинающим;

Теги: WooCommerce товары, wordpress руководство, админка wp, базовые знания, вордпресс веб-разработка, интернет-магазин, новичкам, электронная коммерция.

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

← Ранее 1 2

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