Мар

Создаем вариативный товар в 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 Далее →

Ярослав 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 пробовали? по описанию он работает с вариациями.
Руслан 05.12.2017
Фотки грузятся в вариациях. Кликаем на синюю картинку «загрузить картинку». Так можно сделать для каждой вариации.
Tod 06.12.2017
Руслан, спасибо за дополнение, все так в идеале должно работать. Просто у меня в старой версии магазина был глюк, и они не грузились подобным образом, пришлось все добавлять в галерею.
Караглин Сергей 28.12.2017
Добрый день! Спасибо большое за статью. Мне очень помогла. Вы большой молодец. Удачи и успехов Вам в работе!
Tod 29.12.2017
Сергей, спасибо за отзыв, будем работать дальше)
Эни 14.02.2018
Добрый день! наш инет магазин работает на базе мой склад, каждый цвет заливается через базу. Но на сайте выводятся одним товаром, с разными расцветками и др.харакеристиками. Теперь вопрос-делаю сопут.товары и апсейлы, получается к каждой отдельной расцветке этот маневр проделывать заново???
Tod 15.02.2018
Эни, сложно сказать как настроено все именно у вас. Я смотрю у меня в админке магазина одна обычная вкладка сопутствующих товаров, то есть по логике они будут одинаковые для всех вариаций.
иван 21.04.2018
Всем доброго дня. такая проблема: нужно вывести на странице с товаром таблицу с ценой, которая уменьшается при покупки большего количества товара (например 1 штука стоит 1000 рублей, 2 штуки стоит 1800 рублей, 3 штуки стоит 2600 рублей)… то есть для каждого нового количества одинакового товара цена разная (типа гибкая система скидок). мучился-мучился с плагином, пытался подставить вариативный вариант, но так ничего и не получил толком…
в вп-шоп есть такая функция, хоть и выглядит убого — в ряд выставлены все варианты с количеством (cost_1 , cost_2 итд …), а вот с вукомерцем ничего не понятно.
Никто не может подсказать, что делать?
Tod 21.04.2018
Иван, по описанию задачи вам может помочь плагин скидок Bulk Discount — там можно указывать разные цены в зависимости от количества товаров в заказе.
Полина 22.05.2018
Подскажите, а что с импортом/экспортом товаров? возможно ли залить сразу большое количество товаров с атрибутами для вариаций?
Tod 22.05.2018
Полина, с экспортом вариативных товаров пока что не сталкивался. Частично интересовался вариантами, есть модуль WP All Import но он вроде как платный частично. В репозитории был плагин на него похожий или с частью его функций — Import any XML or CSV File to WordPress. Если гуглить, то в выпаде есть видео Youtube про импорт — я бы их также глянул.
Рафаэль 21.06.2018
Здравствуйте! Подскажите, пожалуйста ответ на такой вопрос: как индексируются вариативные товары — весь товар как один пост, невзирая на вариации или КАЖДАЯ вариация индексируется как пост?
То есть если у меня меняется лишь только цвет товара, остальное всё одинаковое и писать к каждой вариации разное описание смысла нет, то будут ли расцениваться вариации как дубли?
И если я добавляю один товар в котором к примеру 8 вариаций, как поисковики это рассмотрят — как один пост или как 8 ?
Tod 22.06.2018
Рафаэль, учитывая то, что URL линк при выборе вариации не меняется, думаю, индексируется только одна страница и смысла описывать каждую вид товара нет смысла. Слишком накладно и возможно не эффективно будет продвигать каждый цвет\объем товара, лучше потратить деньги на саму продукцию или те же категории/фильтры магазина.
Рафаэль 25.06.2018
Tod, спасибо!) действительно было бы очень накладно. Спасибо)
Наталья 30.10.2018
Добрый вечер! Подскажите, пожалуйста, сейчас в консоли при добавлении нового атрибута нет типов атрибута (мне нужен «выбор»), каким образом тогда покупателю дать возможность выбирать, например, цвет при заказе?
Tod 31.10.2018
Наталья, если я правильно помню, эта опция влияла только на работу внутри админки и фактически не несла особой смысловой нагрузки. Поэтому не удивительно, что ее убрали. Попробуйте создать вариативный товар как сказано в инструкции, но без этой функции, просто задавая несколько значений для тех или иных атрибутов — пользователи смогут выбирать цвета/размеры и т.п.
Наталья 31.10.2018
Спасибо, все получилось!
Евгений 03.12.2018
Здравствуйте, столкнулся с проблемой:
Решил сделать вариативный товар таким образом:

Картинка товара в формате *.png, представляет из себя белый квадрат с прозрачным изображением (как трафарет).

Картинка для конкретного товара неизменна.

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

Хочу реализовать именно в таком виде, но к сожалению, не могу додумать.

Спасибо за уделенное время
Tod 03.12.2018
Евгений, а разве для вариаций нельзя загрузить отдельные картинки? я помню в некоторых версиях Woocommerce это уже работало.
Ваша идея, в принципе, интересная, но хз как это все реализовать — через какие-то CSS фильтры, посмотрите вдруг под вариации меняются CSS стили и тогда наложение можно через стили попытаться сделать.
Евгений 03.12.2018
Tod, в вариации конечно можно и отдельно картинки сделать для каждого цвета, но их получится примерно по 10 штук на каждый товар. Я думаю SEO мне этого не простит
Tod 04.12.2018
Евгений, типа это повлияет на скорость загрузки сильно? возможно есть какой-то скрипт lazy load для Woocommerce или просто загуглить модули для картинок этого плагина, например, нашел некий Smart Variations Images, который там с картинками делает всякие штуки (надо будет вникнуть). Есть и премиальные решения по типу Woocommerce Color or Image Variation Swatches как раз что-то там с цветами вариаций делает, вполне вероятно что стоимость в 20-30баксов дешевле труда разработчика по этой задаче.
Дмитрий 10.12.2018
Добрый день, мне нужно сделать сайт для пиццерии с выбором размера пиццы, соотвественно разный размер и разная цена, добавил вариации, но выбор размера происходит только на индивидуальной странице товара, а я хочу чтобы размер можно было выбрать с главной страницы магазина, установил плагин Show Attributes и че-то нифига не работает, цена у товара отображается в виде диапазона.
Tod 11.12.2018
Дмитрий, советую погуглить «woocommerce variations in archive» — нашел парочку записей по теме — есть 1-2 хака + какой-то Pro модуль. Потестируйте примеры кода, которые приведены в найденных заметках. Я могу чуть позже об этом написать, но думаю вам срочно это надо.
Светлана 08.01.2019
Доброго времени суток! Подскажите, пжл, как добавить платные опции к товару, чтобы при выборе каждой или нескольких опций, цена товара увеличивалась на определенную, указанную у каждой опции сумму. Спасибо.
Tod 09.01.2019
Светлана, придется гуглить какой-то плагин, по умолчанию таких фишек нет… сходу нашел модуль «Extra Product Options (Product Addons)», думаю можно попробовать поискать по похожим ключевым словам в гугле.