Próbki wariantów zamiast list rozwijanych
Swatch zastępuje domyślne listy rozwijane wariantów WooCommerce wizualnymi, dostępnymi próbkami na karcie produktu. Wybierz typ próbki per atrybut — kropki kolorów lub pigułki przyciski/etykiety — i przypisz kolor lub etykietę per termin. Próbki sterują natywnym formularzem wariantów, więc cena, stan i koszyk aktualizują się jak zwykle.
Działa z
Listy rozwijane wariantów są nieczytelne
Klient wybierający kolor czy rozmiar z listy rozwijanej nie widzi, jak wygląda wariant. Trudniej o szybką decyzję, a sklep wygląda mniej profesjonalnie niż konkurencja z próbkami.
- ✗ Kolory i rozmiary ukryte w liście rozwijanej
- ✗ Klient nie widzi wariantu przed wyborem
- ✗ Wtyczki próbek często ciągną jQuery i spowalniają sklep
- ✗ Próbki bez obsługi klawiatury i czytników ekranu
Swatch pokazuje warianty jako dostępne próbki
- ✓ Próbki kolorów i przyciski/etykiety zamiast list rozwijanych
- ✓ Typ próbki ustawiany osobno dla każdego atrybutu
- ✓ Natywny formularz wariantów — cena, stan i koszyk jak zwykle
- ✓ Render oparty o czysty JavaScript, bez jQuery
Co dostajesz w wersji darmowej
Wszystko, czego potrzeba, żeby pokazać warianty jako próbki.
Próbki kolorów i przyciski
Dwa typy próbek — kropki kolorów oraz pigułki przyciski/etykiety, wybierane dla każdego atrybutu.
Typ per atrybut
Wybór typu próbki na ekranie atrybutów globalnych, osobno dla każdego atrybutu.
Kolor i etykieta per termin
Kolor zapisany przez sanitize_hex_color, a niestandardowa etykieta jako term meta.
Natywny formularz wariantów
Próbki sterują formularzem WooCommerce — cena, stan i przycisk koszyka aktualizują się jak przy listach.
Obsługa klawiatury
Semantyka radiogroup i nawigacja strzałkami, z etykietami dla czytników ekranu.
Dostępne wizualnie
Widoczne obramowania fokusu, odpowiedni kontrast, reduced-motion i brak przeskoków układu.
Łagodny fallback
Atrybut bez danych próbki zachowuje standardową listę rozwijaną — nic się nie psuje.
Strona ustawień
Włącz/wyłącz, domyślny typ, rozmiar, kształt i tooltip w menu WooCommerce.
Start w trzech krokach
Włączenie próbek i pierwszy wariant na karcie produktu.
Zainstaluj
Aktywuj Swatch obok WooCommerce.
Ustaw typy
W menu WooCommerce → Swatch wybierz domyślny typ, a na atrybutach globalnych ustaw typ per atrybut.
Przypisz kolory
W Produkty → Atrybuty ustaw kolor lub etykietę przy każdym terminie i otwórz kartę produktu z wariantami.
Dla jakich sklepów
Gdy produkty mają warianty kolorów i rozmiarów — czytelny wybór bez ciężkiego pluginu.
Moda i odzież
Kolory i rozmiary widoczne od razu, bez zgadywania z listy rozwijanej.
- ✓ Próbki kolorów
- ✓ Etykiety rozmiarów
- ✓ Bez jQuery
Sklepy z wieloma wariantami
Typ próbki per atrybut — kolor jako kropka, rozmiar jako etykieta.
- ✓ Typ per atrybut
- ✓ Term meta
- ✓ Natywny formularz
Front bez jQuery
Lekki skrypt wpięty w zdarzenia wariantów zamiast biblioteki na każdej stronie.
- ✓ Vanilla JS
- ✓ ARIA radiogroup
- ✓ Zero CLS
Potrzebujesz więcej? Swatch Pro
Wersja darmowa pokrywa próbki kolorów i przyciski/etykiety. Swatch Pro doda próbki obrazkowe, obrazy per wariant i bogate tooltipy.
- ✓ Próbki obrazkowe per termin (planowane)
- ✓ Obrazy galerii per wariant (planowane)
- ✓ Tooltipy z podglądem i próbki na listach sklepu (planowane)
Wsparcie i zasoby
Każda wtyczka ma własną dokumentację z przewodnikiem konfiguracji. Błędy i pytania trafiają do publicznego repozytorium GitHub danej wtyczki — odpowiadamy otwarcie.
Częste pytania
Czy Swatch wymaga WooCommerce?
Tak. Swatch rozszerza produkty z wariantami WooCommerce i bez niego nie działa.
Co z atrybutami, których nie skonfiguruję?
Zachowują standardową listę rozwijaną WooCommerce. Próbki kolorów bez ustawionych kolorów wracają do listy automatycznie, więc nic się nie psuje.
Czy Swatch używa jQuery?
Nie. Frontend jest oparty o czysty JavaScript, który wpina się w zdarzenia wariantów WooCommerce.
Czy próbki są dostępne z klawiatury?
Tak. Próbki mają semantykę radiogroup, działają na strzałkach i są opisane dla czytników ekranu.
Gdzie ustawiam kolor i etykietę?
Na ekranie Produkty → Atrybuty, przy każdym terminie atrybutu globalnego. Kolor jest zapisywany przez sanitize_hex_color, a etykieta jako term meta.
Czy próbki zmieniają cenę i stan magazynowy?
Tak. Próbki sterują natywnym formularzem wariantów WooCommerce, więc cena, stan i przycisk koszyka aktualizują się tak samo jak przy listach.
Jakie typy próbek są dostępne?
Kropki kolorów i pigułki przyciski/etykiety, wybierane osobno dla każdego atrybutu.
Czy Swatch pasuje do Sizer i Shortlist?
Tak. Sizer dodaje przewodnik rozmiarów na karcie produktu, a Shortlist listę życzeń. Swatch uzupełnia wybór wariantu czytelnymi próbkami.
Pokaż warianty jako próbki
Próbki kolorów i etykiet zamiast list rozwijanych, dostępne i bez jQuery. Pełna edycja FREE na GPL.
Zobacz dokumentacjęDarmowa edycja to pełne próbki kolorów i etykiet — PRO dodaje próbki obrazkowe i obrazy per wariant (planowane).