Korzystanie z próbek

Ten przewodnik prowadzi od świeżej instalacji do działających próbek na produkcie z wariantami, a następnie wyjaśnia zachowanie na sklepie.

1. Wybierz domyślny typ globalny

Otwórz WooCommerce → Swatch, włącz Włącz próbki i wybierz sensowny typ domyślny. Większość sklepów ustawia domyślnie kolor, bo to atrybut Kolor najbardziej zyskuje na wizualnych próbkach; atrybuty rozmiaru i materiału można nadpisać na przycisk/etykietę.

2. Wybierz typ per atrybut

Przejdź do Produkty → Atrybuty i otwórz każdy atrybut globalny używany na produktach z wariantami:

• Dla atrybutu Kolor ustaw typ Kolor, aby każdy termin renderował się jako kropka.
• Dla Rozmiar, Materiał itp. ustaw typ Przycisk / etykieta, aby każdy termin był czytelną pigułką.

3. Przypisz kolory i etykiety do terminów

Otwórz terminy atrybutu. Dla atrybutu koloru ustaw kolor hex na każdym terminie (na przykład #1a1a1a dla Czarny, #c0392b dla Czerwony). Dla atrybutu przycisk/etykieta pozostaw etykietę pustą, aby użyć nazwy terminu, lub ustaw własną etykietę, gdy chcesz krótszy lub czytelniejszy tekst na pigułce.

4. Sprawdź na produkcie z wariantami

Otwórz produkt z wariantami, który używa atrybutu. Lista rozwijana zostaje zastąpiona grupą radiogroup próbek. Wybór jednej z nich:

• przekazuje wybór do natywnego formularza wariantów WooCommerce,
• aktualizuje cenę, stan magazynowy i przycisk dodania do koszyka, dokładnie tak jak lista,
• automatycznie odzwierciedla stany wybrane i niedostępne w kombinacji (próbka, której nie da się połączyć z bieżącym wyborem, jest oznaczona jako niedostępna).

Zachowanie klawiatury i czytnika ekranu

Próbki każdego atrybutu to jedna grupa radiogroup:

• Tab przenosi fokus do grupy; strzałki poruszają się między próbkami.
• Aktywna próbka pokazuje widoczne obramowanie fokusu (focus-visible), więc użytkownicy klawiatury zawsze widzą, gdzie są.
• Każda próbka niesie nazwę terminu jako dostępną etykietę, więc użytkownicy czytników słyszą Czerwony, Duży itd. — a nie tylko „przycisk”.

Kiedy próbki wracają do listy

Swatch nigdy nie wymusza zepsutej kontrolki. Jeśli atrybut nie ma ustawionego typu próbki i użytecznych danych per termin, zachowuje standardową listę WooCommerce. Możesz wdrażać Swatch po jednym atrybucie, a reszta formularza działa dalej.

Uwagi o wydajności

Front-end to czysty JavaScript nasłuchujący własnych zdarzeń wariantów WooCommerce — Swatch nie dodaje jQuery ani żądań zewnętrznych. Rozmiary i kolory to zmienne CSS, próbki rezerwują miejsce z góry, a projekt respektuje prefers-reduced-motion, więc dodanie próbek nie powoduje przeskoku układu.