Próbki wariantów WooCommerce: pokaż kolory i etykiety zamiast list rozwijanych

Klient wybierający kolor lub rozmiar na karcie produktu WooCommerce napotyka tę samą kontrolkę dla obu: listę rozwijaną. Działa, ale ukrywa właśnie to, co klient chce porównać. Próbki zamieniają ten wybór w coś widocznego i klikalnego. Ten przewodnik wyjaśnia, czym są próbki wariantów, dlaczego listy rozwijane spowalniają decyzję i czego szukać we wtyczce próbek, która pozostaje szybka i dostępna.

Czym są próbki wariantów i dlaczego mają znaczenie

Produkt z wariantami w WooCommerce ma atrybuty takie jak kolor i rozmiar, a każdy atrybut jest domyślnie pokazywany jako lista rozwijana. Klient musi otworzyć listę, przeczytać nazwy opcji i wybrać w ciemno: kolor to słowo, a nie kolor.

Próbki wariantów zastępują te listy kontrolkami wizualnymi:

• Kropki kolorów dla atrybutu koloru, żeby klient widział faktyczny kolor.
• Pigułki przyciski lub etykiety dla rozmiarów i innych atrybutów, żeby każda opcja była widoczna od razu.

Decyzja przyspiesza, bo nic nie jest ukryte za kliknięciem, a sklep wygląda bliżej konkurencji, z którą klienci i tak go porównują. Haczyk jest taki, że próbka jest przydatna tylko wtedy, gdy nadal zachowuje się jak kontrolka, którą zastąpiła.

Czego szukać we wtyczce próbek

Trzy rzeczy odróżniają wtyczkę próbek, której można zaufać, od takiej, która później sprawia kłopoty:

• Steruje natywnym formularzem wariantów. Próbka powinna być polem wejściowym do własnej logiki wariantów WooCommerce, a nie równoległym systemem. W przeciwnym razie cena, stan magazynowy i koszyk mogą się rozsynchronizować.
• Nie spowalnia sklepu. Wiele wtyczek próbek ładuje jQuery i dodatkowe biblioteki na każdej stronie. Mały skrypt wpięty w zdarzenia wariantów WooCommerce robi to samo bez tego ciężaru.
• Jest dostępna. Próbki będące nieopisanymi klikalnymi kwadratami wykluczają użytkowników klawiatury i czytników ekranu. Poprawna semantyka radiogroup, nawigacja strzałkami i widoczny fokus utrzymują kontrolkę użyteczną dla każdego.

Jak robi to Swatch

Swatch dla WooCommerce to darmowa wtyczka open source, która zastępuje listy rozwijane wariantów wizualnymi próbkami na karcie produktu, w oparciu o trzy powyższe punkty.

• Dwa typy próbek. Kropki kolorów oraz pigułki przyciski lub etykiety, wybierane osobno dla każdego atrybutu na ekranie atrybutów globalnych.
• Kolor i etykieta per termin. Ustaw kolor przy każdym terminie, zapisywany przez sanitize_hex_color, lub niestandardową etykietę jako term meta, na ekranie Produkty, Atrybuty.
• Natywny formularz wariantów. Próbki zasilają własny formularz WooCommerce, więc cena, stan i przycisk koszyka aktualizują się tak jak przy listach rozwijanych.
• Obsługa klawiatury. Semantyka radiogroup i nawigacja strzałkami, z etykietami dla czytników ekranu.
• Dostępne wizualnie. Widoczne obramowania fokusu, odpowiedni kontrast, przyjazne dla reduced-motion i bez przeskoków układu, gdy próbki się renderują.
• Łagodny fallback. Atrybut bez danych próbki zachowuje standardową listę rozwijaną, więc nic się nie psuje.
• Czysty JavaScript. Frontend wpina się w zdarzenia wariantów WooCommerce bez zależności od jQuery.
• Strona ustawień. Włącz lub wyłącz próbki i wybierz domyślny typ próbki w menu WooCommerce.

Wersja darmowa w pełni obejmuje próbki kolorów oraz przyciski lub etykiety. Próbki obrazkowe per termin, obrazy galerii per wariant, próbki na listach sklepu i kategorii, tooltipy po najechaniu oraz własne rozmiary i kształty są częścią Swatch PRO.

Swatch a domyślny WooCommerce

WooCommerce domyślnie pokazuje każdy atrybut wariantu jako listę rozwijaną. Oto różnica dla samego wyboru wariantu:

Funkcja	Domyślny WooCommerce	Swatch
Wyświetlanie atrybutu koloru	Lista nazw	Kropki kolorów
Rozmiar i inne atrybuty	Lista nazw	Pigułki przyciski lub etykiety
Typ próbki per atrybut	nie dotyczy	Wybierany osobno per atrybut
Cena, stan, koszyk	Natywny formularz	Steruje tym samym natywnym formularzem
Klawiatura i czytnik ekranu	Natywny select	Radiogroup, strzałki, etykiety
Zależność od jQuery	nie dotyczy	Brak, czysty JavaScript
Nieskonfigurowany atrybut	Lista rozwijana	Wraca do listy rozwijanej
Koszt	Za darmo (rdzeń)	Za darmo; PRO dodaje próbki obrazkowe, galerie, podglądy na listach

W skrócie

Próbki wariantów ułatwiają czytanie karty produktu WooCommerce, zamieniając listy kolorów i rozmiarów w widoczne, klikalne kontrolki. Te warte użycia nadal sterują natywnym formularzem wariantów WooCommerce, unikają jQuery i pozostają dostępne dla klawiatury i czytników ekranu. Swatch robi to za darmo dzięki próbkom kolorów i etykiet, wraca do listy rozwijanej, gdy atrybut nie ma danych próbki, i zostawia próbki obrazkowe oraz podglądy galerii dla PRO.