Konfiguracja

Swatch konfigurujesz w dwóch miejscach: na globalnej stronie ustawień (domyślne ustawienia dla całego sklepu) oraz na ekranach atrybutów i terminów, gdzie wybierasz typ próbki i przypisujesz kolory lub etykiety.

Ustawienia globalne

Otwórz WooCommerce > Swatch w panelu.

Ekran ma trzy pola, zapisywane w opcji swatch_settings.

Włącz próbki

Główny przełącznik (enabled), domyślnie włączony. Gdy wyłączony, każdy produkt z wariantami wraca do standardowych list rozwijanych <select> WooCommerce, a wtyczka nie ładuje żadnego arkusza ani skryptu. Kolory i etykiety terminów zostają zapisane. Ten sam przełącznik wyłącza też próbki na listach sklepu: przy wyłączonym nie renderują się nigdy.

Próbki na liście sklepu

archive_enabled, domyślnie wyłączone, bo zmienia wygląd strony sklepu. Po zaznaczeniu każdy produkt z wariantami dostaje pod tytułem grupę próbek również na stronie sklepu, w archiwach kategorii i tagów oraz w wynikach wyszukiwania produktów.

Renderuje się dokładnie ta sama grupa próbek kolorów i etykiet co na karcie produktu, z tego samego typu per atrybut i tych samych kolorów lub etykiet per termin. Różnice są konstrukcyjne, nie wizualne:

• Pokazywany jest tylko pierwszy atrybut wariantowy, który ma użyteczne dane próbki, więc produkt z kolorem i rozmiarem dostaje jeden rząd, nie dwa.
• Każda próbka to odnośnik do produktu z wybraną opcją (?attribute_<slug>=<wartość>), a nie kontrolka formularza. Na liście nie ma formularza wariantów, więc kliknięcie otwiera produkt z już dokonanym wyborem.
• Grupa jest wypisywana na woocommerce_after_shop_loop_item_title z priorytetem 15 i tylko dla produktów WC_Product_Variable.

Jeśli nic się nie pojawia: produkt nie jest wariantowy, żaden atrybut nie ma użytecznych danych próbki albo główny przełącznik jest wyłączony.

Zaznaczenie tego pola jest wartością domyślną filtra swatch/archive_enabled, więc dodatek może odpowiedzieć inaczej dla konkretnego produktu. Odpowiada na niego również Swatch PRO: przy włączonym module próbek na listach renderują się one nawet przy odznaczonym polu, a PRO podmienia wtedy kropki na obrazy terminów przez swatch/archive_html. Żeby lista była czysta, odznacz pole i wyłącz ten moduł na ekranie Swatch PRO.

Typ domyślny

Typ próbki używany przez atrybut, który nie ma własnego typu:

• Kolor, okrągłe (lub kwadratowe) kropki kolorów wypełnione kolorem hex ustawionym per termin.
• Przycisk / etykieta, pigułki z tekstem etykiety terminu.

Atrybut może nadpisać typ na własnym ekranie, więc wartość domyślna to tylko punkt wyjścia dla nowych atrybutów.

Nie ma tu pól na rozmiar, kształt ani podpowiedź. Rozmiar, promień, odstęp, obramowanie i kolor zaznaczenia to zmienne CSS --swatch-*, które przemotywujesz z arkusza motywu; rozmiary i kształty per atrybut oraz bogatsze podpowiedzi dodaje Swatch PRO.

Typ per atrybut

Przejdź do Produkty > Atrybuty i otwórz atrybut globalny (na przykład Kolor lub Rozmiar). Wybierasz tam typ próbki dla tego atrybutu, kolor lub przycisk/etykieta, nadpisując ustawienie domyślne. Dzięki temu atrybut Kolor może używać kropek, a Rozmiar pigułek etykiet, w tym samym sklepie.

Kolor i etykieta per termin

Otwórz terminy atrybutu globalnego (ekran Konfiguruj terminy). Dla każdego terminu możesz ustawić:

• Kolor, wartość hex, sanityzowana przy zapisie przez sanitize_hex_color. Używana przez próbki typu kolor jako wypełnienie kropki.
• Własna etykieta, alternatywny tekst na pigułce przycisk/etykieta, zapisany jako term meta. Pozostaw puste, aby użyć nazwy terminu.

Jak ustawienia się łączą

Gdy renderuje się produkt z wariantami, każdy atrybut sprawdza swój typ (lub domyślny globalny), a następnie odczytuje kolor lub etykietę każdego terminu, by narysować próbki. Atrybut bez użytecznych danych próbki, na przykład atrybut koloru bez ustawionych kolorów, automatycznie wraca do standardowej listy, więc częściowo skonfigurowany atrybut nigdy nie psuje strony.

Stylowanie przez CSS

Swatch udostępnia rozmiary i kolory jako zmienne CSS, więc możesz je przemotywować z arkusza motywu bez nadpisywania znaczników. Obramowania fokusu, kontrast i obsługa reduced-motion są wbudowane i nie wymagają konfiguracji.