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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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