3 шага до создания вариативного товара в WooCommerce

WooCommerce, Вариации  /  32 комментария

Когда я проводил оффлайн-семинары по WooCommerce, у многих возникали трудности при создании вариативных товаров (добавлении вариаций товаров), поэтому сейчас мы подробно с этим разберёмся.

Вариативный товар — это товар, у которого имеется возможность при покупке выбрать определённые параметры, например цвет, размер или материал.

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

Если вы всё ещё не представляете себе, что это такое, то вот этот скриншот демонстрирует прекрасно:

Что такое вариативный товар в WooCommerce?

Шаг 1. Тип товара — Вариативный товар

В первую очередь нужно выбрать соответствующий тип товара. Ничего сложного — скроллим до метабокса Данные товара и выбираем Вариативный товар из выпадающего списка.

Вариативный тип товара WooCommerce

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

Прежде, чем создавать вариации товаров, нам нужно добавить атрибуты.

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

Шаг 2. Всё начинается с атрибутов товара

Для начала вспомните метки (да-да, стандартная таксономия WordPress). Вы же умеете ими пользоваться?

Вы можете заранее насоздавать себе меток, а потом при редактировании записи просто выбирать их из выпадающего списка. У атрибутов есть одно отличие — если вы создаёте их через страницу редактирования товара, то они не будут доступны для всех остальных товаров (не случайно же там пишется — Индивидуальный атрибут).

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

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

Переходим в Товары — Атрибуты и добавляем, всё просто. Под каждой настройкой подробно описано, что она значит, так что у вас не должно возникнуть каких-либо трудностей с этим.

Общие атрибуты товаров

После добавления атрибутов на этой странице их уже можно будет выбирать на вкладке добавления атрибутов на странице редактирования самого товара.

Добавляем атрибуты уже к конкретному товару. Индивидуальные атрибуты.

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

Итак, сейчас нам нужно добавить какие-либо атрибуты к товару. Для этого в метабоксе с данными товара отправляемся на вкладку Атрибуты.

И тут, как мы видим, мы можем использовать заранее созданные атрибуты либо добавить индивидуальный атрибут.

Вкладка атрибутов товара WooCommerce

На скриншоте ниже я подсветил важные моменты, а сейчас я про них ещё и поговорю:

  • Сначала я выбрал тип товара — Вариативный,
  • потому что иначе я бы не смог отметить галку Используется для вариаций,
  • eсли вы используете заранее созданные атрибуты, то можете выбрать из уже использованных значений, либо кликнуть на кнопку Добавить новое,
  • а если вы добавляете Индивидуальный атрибут товара, то там значения нужно указывать в строку и разделять палками |.
Использование атрибутов товара для вариаций в WooCommerce

Также покажу вам более серьёзную настройку атрибутов, но в текстовой версии урока (тут) для вариаций я буду использовать только атрибут цвета. Подробнее покопаемся в этом в видео.

Использование нескольких атрибутов товара вукоммерс для вариаций

Шаг 3. Настраиваем вариации

Наконец-то мы можем переключаться на вкладку Вариации! И сразу же WooCommerce ставит нас перед выбором:

WooCommerce может автоматически создать вариации из всех комбинаций атрибутов

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

Понимаете, да, что означает вторая опция? Это например если у вас 3 размера и 3 цвета, то будет создано 9 вариаций.

Итак, вот что получилось у меня:

Вариации товара в WooCommerce

Очень прошу обратить внимание на то, что я обвёл красным цветом — эти кнопки появляются при наведении на ту или иную вариацию, соответственно тут вы можете её удалить, передвинуть по порядку либо, самое главное, нажав на стрелку, подробно её настроить!

Настройка вариации товара в интернет-магазине вукомерс

Например меня интересовала в первую очередь только цена и индивидуальная для вариации картинка товара — это я и настроил.

Иии… вот что у меня получилось:

Что такое вариативный товар в WooCommerce?

Видеоурок по созданию вариаций товаров в WooCommerce

Если вам было лень читать всё, что было до этого, а возможно вы прочитали, но не всё поняли, тогда это видео специально для вас 😎

В качестве поддержки моего блога подписывайтесь на мой канал, добавляйтесь в друзья 🙂

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Комментарии — 32

Комментирование этого поста более не доступно.