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.

Włącz próbki

Główny przełącznik. Gdy wyłączony, każdy produkt z wariantami wraca do standardowych list rozwijanych <select> WooCommerce. Włącz go, aby renderować próbki dla każdego atrybutu, który ma dane próbki.

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.

Rozmiar

Wymiary próbki. Większe rozmiary łatwiej dotknąć na telefonie; mniejsze pasują do gęstych list atrybutów. Wartość steruje zmienną CSS, więc próbki skalują się bez przeskoku układu.

Kształt

Styl narożników próbek — zwykle koło lub kwadrat dla kropek kolorów oraz zaokrąglony lub kwadratowy dla pigułek przyciski/etykiety.

Podpowiedź

Gdy włączona, nazwa terminu pojawia się po najechaniu i przy fokusie klawiatury. Przydatne dla próbek kolorów, gdzie sama kropka nie nazywa koloru. Podpowiedź jest dla osób widzących; użytkownicy czytników ekranu zawsze otrzymują nazwę terminu przez dostępną etykietę, niezależnie od tego ustawienia.

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.