WooCommerce вариации: размери, цветове и филтри стъпка по стъпка

Тениска в пет размера и четири цвята са двадесет комбинации. Ако ги въведете като двадесет отделни продукта, каталогът става неуправляем, а Google вижда двадесет почти еднакви страници. Ако ги въведете като един продукт с текст „изберете размер в коментара“, губите наличностите, филтрите и половината поръчки. Правилният начин в WooCommerce е променлив продукт с вариации – и той има няколко детайла, които решават дали филтрите и складът ще работят.

В това ръководство ще минем през WooCommerce вариациите от настройката на атрибутите до масовия импорт, филтрите по размер и цвят, визуалните бутони вместо падащи менюта и SEO.

Накратко:

• Вариациите в WooCommerce се създават в продукт от тип „Променлив продукт“, като всяка вариация е комбинация от стойности на атрибути, например размер M и цвят син.
• Глобалните атрибути, създадени от Продукти → Атрибути, са задължителни, ако искате филтри по размер или цвят в каталога.
• Всяка вариация може да има собствена цена, SKU, наличност, тегло и снимка, а наличностите трябва да се водят на ниво вариация, не на ниво продукт.
• Всички вариации споделят един URL, затова SEO усилията отиват към основната продуктова страница, а не към отделните варианти.
• При продукти с много комбинации е по-добре да ги разделите на няколко продукта, отколкото да натоварвате страницата със стотици вариации.

Атрибути и вариации: каква е разликата

Атрибутът е характеристика – „Размер“, „Цвят“, „Материя“. Стойностите (термините) са конкретните опции: S, M, L или черен, бял. Вариацията е конкретна комбинация, която клиентът купува и която има своя цена и наличност.

WooCommerce позволява два вида атрибути:

Вид	Къде се създава	Кога да го ползвате
Глобален	Продукти → Атрибути	Характеристики, общи за много продукти: размер, цвят, материя, марка на модела. Работи с филтрите.
Персонализиран (локален)	В самия продукт, таб „Атрибути“	Уникални опции само за един продукт, например „Надпис по избор: да/не“. Не работи с филтрите.

Най-честата грешка, която виждаме в магазини за дрехи и обувки, е че размерите са въведени като локални атрибути във всеки продукт. Магазинът изглежда наред, докато не поискате филтър „Размер 42“ – и се окаже, че трябва да преработите стотици продукти.

Как да създадете вариации стъпка по стъпка

1. Създайте глобалните атрибути. Продукти → Атрибути → добавете „Размер“ и „Цвят“. Слъгът (slug) задайте на латиница, например razmer и tsvyat.
2. Добавете стойностите. За всеки атрибут натиснете „Конфигуриране на термини“ и въведете стойностите в реда, в който искате да се показват.
3. Изберете тип продукт. В нов продукт изберете „Променлив продукт“ от падащото меню „Данни за продукта“.
4. Добавете атрибутите към продукта. В таб „Атрибути“ изберете глобалния атрибут, посочете само стойностите, които този продукт има, и отметнете „Използва се за вариации“.
5. Генерирайте вариациите. В таб „Вариации“ използвайте бутона за генериране на всички комбинации. При много комбинации WooCommerce ги създава на порции.
6. Попълнете всяка вариация. Цена, SKU, наличност, тегло. Използвайте масовите действия в същия таб, за да зададете цена или наличност на всички наведнъж.
7. Задайте стойности по подразбиране само ако наистина има най-популярен вариант. Иначе клиентът може да поръча размер, който не е избрал съзнателно.

Официалната документация на WooCommerce за променливи продукти описва всички полета, ако имате нужда от справка.

Какво да попълните на ниво вариация

• SKU – уникален за всяка комбинация. Ако работите със складов софтуер, кодът трябва да съвпада с този в склада.
• Цена и промоционална цена – когато различните размери струват различно, WooCommerce показва диапазон, например „24,90 € – 29,90 €“.
• Управление на наличността – включете го на ниво вариация. Наличност само на ниво продукт означава, че последният размер L може да бъде продаден три пъти.
• Тегло и размери – важни, ако куриерският модул за Еконт или Спиди изчислява цената на доставката по тегло.
• Снимка – задължителна за цветове. Когато клиентът избере „червен“, снимката трябва да се смени.
• GTIN/EAN – полето вече е налично в новите версии на WooCommerce и е важно за Google Shopping.

Масово въвеждане на вариации с CSV импорт

При стотици продукти ръчното въвеждане не е вариант. Вграденият импорт от Продукти → Импорт работи с вариации, ако спазите структурата:

Колона	Основен продукт	Вариация
Type	variable	variation
SKU	TSH-100	TSH-100-M-BLK
Parent	(празно)	TSH-100
Attribute 1 name	Размер	Размер
Attribute 1 value(s)	S, M, L	M
Attribute 1 global	1	1
Regular price	(празно)	24.90

Съвет: експортирайте един ръчно създаден променлив продукт и използвайте файла като шаблон. Така колоните ще съвпадат точно с вашата версия на WooCommerce.

Филтри по размер и цвят в каталога

Филтрите са причината изобщо да се занимавате с глобални атрибути. В блоковите теми и в новите версии на WooCommerce има блокове за филтриране по атрибут, цена, наличност и оценка, които добавяте в шаблона на страницата с продукти. При класическите теми се използва джаджа (widget) „Филтър по атрибут“ или плъгин за филтри.

Практически правила за филтрите

• Показвайте само атрибути, по които хората наистина избират: размер, цвят, материя. Десет филтъра с по две стойности само объркват.
• Проверете как се държи филтърът с изчерпани вариации. Поведението зависи от версията и от настройката „Скриване на изчерпаните продукти“ – тествайте с реален продукт, на който един размер е свършил.
• На мобилен телефон филтрите трябва да се отварят в отделен панел, а не да избутват продуктите надолу.

Филтрите и SEO

Всяка комбинация от филтри създава URL с параметри. Ако тези адреси се индексират, получавате хиляди почти еднакви страници. Обикновено решението е канонични тагове към категорията и noindex за комбинациите. Изключение правят филтри с реално търсене, например „черни дамски кецове“ – за тях е по-добре да създадете отделна категория със собствен текст. Темата е разгледана подробно в статията за филтрите в онлайн магазина и SEO.

Бутони и цветни квадратчета вместо падащо меню

По подразбиране WooCommerce показва вариациите като падащи менюта. За дрехи, обувки и козметика с нюанси това е лошо изживяване: клиентът не вижда наведнъж кои размери има. Плъгините за „variation swatches“ заменят менютата с бутони за размер и цветни кръгчета или миниатюри.

При избора на такъв плъгин проверете три неща: дали маркира изчерпаните варианти като неактивни, дали работи с вашата тема и кеширане и колко скриптове добавя. Подбор на проверени разширения има в статията за WooCommerce плъгини.

Производителност: колко вариации са твърде много

Над определен брой вариации (по подразбиране 30) WooCommerce спира да зарежда всички комбинации наведнъж в страницата и започва да ги проверява с отделни заявки при всеки избор. Резултатът е, че недостъпните комбинации не се маркират предварително. Прагът може да се промени с филтър в темата или в малък плъгин:

add_filter( 'woocommerce_ajax_variation_threshold', function () {
    return 60;
} );

Не вдигайте прага прекалено – при стотици вариации HTML кодът на страницата става тежък. Ако продуктът има над 100 комбинации, помислете дали не е по-логично да го разделите, например по модел или по колекция. При бавни страници вижте и съветите за бавен WooCommerce.

Вариации и Google Shopping

В продуктовия фийд всяка вариация трябва да бъде отделен артикул със собствени ID, цена, наличност и снимка, а всички вариации на един продукт се свързват с общ идентификатор на групата (item_group_id). Повечето плъгини за фийдове правят това автоматично, но проверете дали предават цвета и размера като отделни атрибути, а не само в заглавието.

Често задавани въпроси

Ако мигрирате каталог с хиляди вариации или искате филтрите и наличностите да работят правилно от първия ден, вижте как изграждаме WooCommerce магазини – от 1 290 €, със срок 3–4 седмици.