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.