Як створити варіативний товар WooCommerce

Загальна інформація

Варіативний товар – це товар, в котрого існують варіації, наприклад – різні кольори, розміри, або якісь технічні параметри тощо. На скріні вгорі – варіативний товар, в котрого пропонується декілька кольорів, всі інші параметри однакові.

Варіативний товар – це той самий звичайний (простий) товар, в котрому додані варіації. Вони можуть бути водночас за декількома параметрами, наприклад – колір, і потужність двигуна тощо. Тож кількість варіацій прямо залежить від набору параметрів, і кількості значень в кожному.

Тут ми не розгядатимемо особливості дизайну відображення у фронт-енд варіацій; за замовчуванням, без застосування додаткових плагінів, або без наявності відповідного функціонала в темі (шаблоні), варіації відображуються випадними списками. Отже, розглянемо лише алгоритми створення варіативного товару взагалі, і варіацій зокрема.

При створенні варіативного товару всі блоки, окрім “Дані товару”, заповнюються так само, як і під час створення простого товару. Відтак, з ними повторюватися не будемо.

Встановлення типу “Варіативний товар”

Щодо блоку “Дані товару”: перше, що ми маємо зробити, то замість типу “Звичайний товар” обрати тип “Варіативний товар”. Для цього кліком відкриваємо випадний список, і кліком обираємо “Варіативний”. Відповідно, у віконці зміниться тип товару.

При цьому вікна “Звичайна ціна” та “Ціна зі знижкою” сховаються, натомість відобразяться вікна “Артикул”, “GTIN, UPC, EAN або ISBN”, та чек-бокси “Керування запасами” та “Продавати індивідуально”:

Отже, потрібні дані можна одразу тут і встановити.

Встановлення атрибутів

Атрибути – обов’язкова компонента створення варіативності товарів, без них це неможливо, бо саме воні визначають можливі варіації.

Ми тут не розглядаємо створення атрибутів, ані попереднє, ані в процесі створення варіацій, це предмет окремого розгляду.

Увага: ГЛОБАЛЬНІ (типові,розповсюджені у магазині) атрибути треба створювати не в цій вкладці, а на сторінці адмінпанелі Товари–>Атрибути – там робиться один раз, і може використовуватися будь-яким товаром. Тут може бути доцільним створити ЛОКАЛЬНИЙ (індивідуальний) атрибут, якщо він “екзотичний”, і притаманний виключно цьому товару.

Ми вже розглядали встановлення атрибутів для простого товару. Втім, для варіативного товару є невеличкі відмінності. Отже, подивимося на це знов, в повному обсязі, але з зазначенням відмінностей варіативності.

Як бачимо – все те саме, що і для атрибутів, що встановлюються для простого товару, але додається одна-єдина галочка: “Використовувати для варіацій”. Для чого це потрібно? Атрибути для варіативного товару можуть бути встановлені не лише для створення варіацій. а й для взаємодії з фільтрами тощо. Відповідно – не всі вони потрібні для варіацій. Отже, в кожному атрибуті, котрий створює варіації – ця галочка має бути, в інших – знімається, щоб не створювати фейкових варіацій, і потім їх не видаляти вручну.

Для вибору атрибуту тиснемо на “Add global” (наразі український переклад Вукоммерце ще не отримав перекладу цього елементу).

Натискання відкриває випадний список, в котрому представлені наявні (створені раніше) атрибути. Якщо атрибутів багато, і вони всі не вміщуються у видиму частину випадного списку, можна набрати у віконці над ними декілька літер назви потрібного атрибуту – він відобразиться вгорі списку, і його можна буде обрати.

Тиснемо на потрібний атрибут для вибору.

Обраний атрибут відобразився в блоку. Далі маємо вибрати параметри цього атрибута, котрі потрібні для цього товару, в цьому випадку – потрібні кольори з наявних.

Якщо потрібні всі наявні – тиснемо “Вибрати все”. Якщо більшість наявних – так само, бо простіше потім видалити зайві, аніж додавати по одному.

Можна також створити новий параметр (значення) просто тут, але зручніше на сторінці атрибутів.

Якщо клікнути у віконці “Виберіть значення”, з’явиться випадний список наявних значень атрибута, і можна (по одному) додавати їх, додані будуть відображені у віконці.

Також можна у віконце вставляти декілька літер значення, наприклад – “жов” – вгорі списку опиняться ті значення, що містять таку комбінацію літер.

На кожному доданому атрибуті (у віконці) буде хрестик видалення.

Навпроти назви атрибуту праворуч бачимо клікабельне “Видалити”, трикутник згортання атрибуту (зручно, коли їх декілька – щоб тримати розкритим лише той, що потрібно), і між ними – три рисочки перетягування, котрим можна міняти порядок відображення атрибутів.

Отже, значення атрибута (тут – кольори) вибрані.

Якщо потрібно відображення обраних атрибутів на сторінці товару у вкладці “Додаткова інформація” – залишаємо галочку на “Видимість на сторінці товарів. Якщо ні – знімаємо.

Після цього – не забуваємо натиснути кнопку “Зберегти атрибути”.

Аналогічним чином можна додати інші атрибути та вибрати для них актуальні значення – кількість атрибутів для товару не обмежується.

НЕ забуваємо! – для атрибутів, котрі дотичні до варіацій – залишаємо галочку на “Використовувати для варіацій”, на інших – знімаємо її. Ну, і зберегти встановлені атрибути також – без цього далі діла не буде 🙂

Створення варіацій

Отже, коли всі потрібні атрибути призначені, можна створити варіації. Їх кількість залежить від загальної кількості атрибутів та їх значень. наприклад, якщо є три значення атрибуту “Колір”, і два значення атрибуту “Розмір”, і товар реально пропонується всіх кольорів для кожного розміру, то кількість варіацій буде дорівнювати результату множення 2 х 3 = 6. Якщо додати ще якийсь атрибут з трьома значеннями, то результат дорівнюватиме 2 х 3 х 3 = 18. Звісно, може бути ситуація, коли для якогось значення одного атрибута, наприклад, розмір “XL”, доступні не всі кольори, а лише, приміром, два – тоді кількість варіацій зменшиться на суму недоступних варіантів.

Відкриваємо вкладку “Варіації”. Увага! Якщо атрибути щойно збережені, і миттєво відкрити “Варіації” – буде певна пауза – збереження атрибутів відбувається не миттєво, і декілька секунд вкладка варіацій буде вважати, що атрибутів немає, і писати про це. Потім покрутить прелоедером, схаменеться, і прийде до готовності створення варіацій, це виглядатиме так:

Якщо в товарі призначено атрибутів, скажімо, на два десятки варіацій, а фактично плануєте створити, скажімо, дві-три – ну, можна погратися в ручне покрокове створення кожної варіації окремо. Можливо – це цікаво та захоплива справа… але це не точно – якось не доводилося спробувати 🙂 Здебільшого ж доцільно скористатися кнопкою “Генерувати варіації” – то воно саме створить всі можливі, і залишиться потому лише проставити в кожній дані.

Після натискання цієї кнопки система спершу вимагає підтвердження намірів. Для чого – загадка, бо (за умови повної відсутності варіацій. що створені раніше, за наявності) створення варіацій не може зламати нічого, і створені варіації за потреби видаляються легко та швидко. Втім – воно таки запитує, таким чином:

Для прикладу, щоб не плодити сутності без потреби, попередньо в єдиному атрибуті “Колір” було залишено три значення, а на отому темному транспаранті – натиснуто “ОК”, і ось що воно народило:

… тобто – створило три варіації, як і належало.

Одразу звертаємо увагу на віконце вгорі (скрін вище) “Типове значення форми:”, котре за замовчуванням має саме такий вигляд – зі значенням “Без замовчувань…”. Що це таке? Оце як воно в такому стані – у фронті, у блоку виборі варіацій, не буде попередньо вибрано жодної.

За кліком віконце вивалює випадний список, де можна обрати – яка сама варіація буде вже попередньо вибрана за замовчуванням при завантаження сторінки товару.

Це може бути потрібним зокрема й через те, що за відсутності обраної варіації сторінка товару не відображатиме ціну – бо для кожної варіації ціна проставляється окремо (і може бути різна). Отже, нема вибору – нема ціни, замість неї пише “Оберіть варіацію”. Відтак – обираємо якусь зручну кліком в неї – вона і буде прописана у віконці замість дефолтного значення.

Три кнопки нижче наразі не коментуємо – то знов про створення-перестворення, і остання (праворуч) – вже про управління, а ми зараз – про первісне створення.

Нижче (цих трьох кнопок – скріни вище) система попереджує: “3 варіації не мають цін. Варіації (і їх атрибути), які не мають цін, не будуть показані у вашому магазині.”. Тобто: нема ціни – товар не існує, і не демонструється покупцю. Якщо ціни для варіацій різні – доведеться проставляти окремо у кожній варіації. Якщо ж ціна єдина для всіх – тиснемо “Додати ціну”, і отримуємо такий спливаючий транспарант, куди й додаємо ціну – суто цифри. Щойно у віконці з’явиться хоч одна цифра – кнопка “Додати ціни” стане активною, синьою. Її і тиснемо.

Зауваження: якщо в ціні присутні копійки, вони відокремлюються КРАПКОЮ, не комою – ВуКоммерце так працює.

Отже – додали єдину ціну. далі маємо проставити інші дані в кожну варіацію. Одразу звернемо увагу на червоне “Видалити” праворуч – без коментарів, і на три рисочки перетягування – так, іх можна тягати, змінюючи послідовність. Ну, а “Редагувати” – відкриває варіацію для редагування, втім можна клікнути майже будь-де по варіації (окрім видалення, звісно)) – і вона так само відкриється.

за бажанням – можна змінити значення у віконцях ліворуч. тут – це недоцільно, легше тягати варіації, як такі. Але якщо варіацій багато – вони будуть не на одній вкладці, а на двох чи більше – тоді тягати не вийде. І значень може бути не одне, а два, три… Втім згенеровані можеть бути в незручній послідовності. Ось тоді – й може бути доцільним вручну змінювати значення в таких віконцях.

Наразі ж робимо клік в “Редагувати, або будь-де ще, і варіація відкривається для редагування:

Вгорі, за потреби і наявності, проставляємо “Артикул” та/або “GTIN, UPC, EAN або ISBN”. Увага: вони не можуть бути однакові для двох, або більшого числа варіацій, і не можуть співпадати зі значеннями в інших товарах. Кожне з цих значень має бути унікальним для магазина! – інакше система його не прийме, і не збереже.

Ліворуч від цих двох віконець – місце, де ставимо фото саме цієї варіації. Клік в це віконце відкриває медіа бібліотеку. де можна вибрати потрібне зображення, або й завантажити його, якщо це ще не зроблено. Фото варіації може бути одним з галереї товару, його дублювання тут – то нормально. Поставити тут фото (хоч це і не обов’язково) доцільно через те, що з фронту, коли покупець обере варіацію, поточне фото товару зміниться на те, що відповідає варіації – наочна демонстрація.

Наступний рядок – чек бокси “Увімкнено” – де, знявши галочку, можна вимкнути (приховати) варіацію, а також “Завантажуваний” та “Віртуальний” – обидва для не фізичних оварів (програми, доступи тощо), і “Керувати запасами?” – якщо те треба, наприклад – в конекті зі складським софтом за наявності.

Нижче поля “Regular price (₴)” (“Звичайна ціна” – знов недоліки українського перекладу WooCommerce), і “Sale price (₴) Запланувати” (“Ціна розпродажу”, або зі знижкою). Звичайна – в нас вже проставлена, бо ми те зробили раніше, для всіх варіацій однакову. Втім – можна тут ставити довільну. Звичайна має бути проставлена в будь-якому разі, інакше варіація “не існуватиме” у фронті. Якщо ж є і ціна зі знижкою (акційна) – ставимо і її також, звісно – вона має бути меншою. Тоді у фронті “Звичайна” буде перекресленою, акційна – валідною.

Нижче поле “Статус запасів”, за замовчуванням – “В наявності”, і це зазвичай відображається на сторінці товару (втім декотрі теми без “хука” те не показують). за потреби, окремо кожну варіацію, тут можна переводити в режими “Немає в наявності”, і “На замовлення”, це, якщо передбачено темою, відображатиметься на сторінці товару. і впливатиме на можливість додавання до кошика та оформлення замовлення.

Нижче поля ваги, та габаритних розмірів. Заповнювати їх доцільно, якщо є потреба показати ці дані покупцю, а також для правильної взаємодії з сервісами доставки. особливо, коли на сайті передбачено обраховування вартості доставки одразу при оформленні замовлення.

Поле “Клас достаки” дозволяє обирати клас, якщо такий (такі) створений(і).

Опис – має бути коротким. Він відображується нижче елементів вибору варіацій. коли варіація вибрана. наприклад: “Електроскутер Corso Extra GT 1200W 64V/30Ah Червоний” – і у варіаціях, еотрі різняться лише кольором – міняється лише колір.

В підсумку заповнеа варіація може виглядати приблизно так:

Аналогічно заповнюємо всі варіації, і не забуваємо потому про синю кнопку “Зберегти зміни” внизу ліворуч.

Власне, ось і все про створення варіацій товару. Достатньо не складно… допоки не трапиться товар, в котрому тих варіацій набиратиметься декілька десятків. Толді теж нічого складного, але потрібні будуть уважність, бо робота кропітка.

Наступний матеріал – про створення атрибутів.

До попередньої та наступної статей за сабжем: