Мар
31
28

Создаем вариативный товар в 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% случаев для работы вам этого алгоритма хватит. Если есть что добавить/спросить по теме — пишите ниже.

комментариев 28 к статье “Создаем вариативный товар в 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 пробовали? по описанию он работает с вариациями.

  • Руслан   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 модуль. Потестируйте примеры кода, которые приведены в найденных заметках. Я могу чуть позже об этом написать, но думаю вам срочно это надо.

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


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

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

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

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

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

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