Za darmo, open source

Swatch

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.

Open source GPLv2
Open source na licencji GPL Bez konta i bez karty Bez jQuery, dostępne dla klawiatury

Działa z

WooCommerceGutenbergStorefrontAstraGeneratePressKadence

Zobacz w działaniu

Kolory jako kropki, rozmiary jako przyciski na karcie produktu wariantowego
Wybór wariantu jednym dotknięciem na telefonie
Domyślny typ próbki i konfiguracja per atrybut w panelu

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 i domyślny typ próbki w menu WooCommerce.

Start w trzech krokach

Włączenie próbek i pierwszy wariant na karcie produktu.

01

Zainstaluj

Aktywuj Swatch obok WooCommerce.

02

Ustaw typy

W menu WooCommerce → Swatch wybierz domyślny typ, a na atrybutach globalnych ustaw typ per atrybut.

03

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

Co dodaje PRO i dlaczego to ważne

Próbki obrazkowe

Obraz per termin atrybutu renderowany jako miniatura próbki na karcie produktu.

Galeria per wariant

Dodatkowe obrazy galerii per wariant z paskiem miniatur pod główną galerią.

Próbki na listach

Próbki na liście sklepu, kategorii, tagów i wyszukiwania z linkiem do produktu z wybraną opcją.

Bogate tooltipy

Podgląd koloru, etykiety lub obrazu po najechaniu i fokusie na karcie produktu i listach sklepu.

Własne rozmiary i kształty

Małe/duże próbki oraz koło, kwadrat, zaokrąglony lub pigułka per atrybut globalny.

Co dostajesz: FREE czy PRO

PRO zachowuje wszystko z wersji darmowej i dodaje poniższe moduły.

Funkcja FREE PRO
Próbki kolorów i przyciski
Typ per atrybut
Kolor i etykieta per termin
Natywny formularz wariantów
Obsługa klawiatury
Dostępne wizualnie
Łagodny fallback
Strona ustawień
Próbki obrazkowe ×
Galeria per wariant ×
Próbki na listach ×
Bogate tooltipy ×
Własne rozmiary i kształty ×

Swatch vs Variation Swatches vs YITH Color & Label Variations

Jak Swatch wypada na tle popularnych wtyczek do próbek wariantów WooCommerce.

SwatchVariation SwatchesYITH Color & Label
Wersja darmowa TakTakTak
Próbki kolorów i przycisków/etykiet TakTakTak
Typ próbki per atrybut TakTak
Kolor lub etykieta per termin TakTakTak
Natywny formularz wariantów (bez przebudowy) Tak
Dostępne z klawiatury i czytnika ekranu Tak
Bez jQuery (lekkie) Tak
Open source (GPLv2) TakRdzeń GPLRdzeń GPL
Cena planu płatnego od €29/rok$49/rokDarmowa + premium

Dane i ceny konkurencji według stanu na czerwiec 2026; aktualne ceny sprawdź na stronach producentów.

Potrzebujesz więcej? Swatch Pro

Wersja darmowa pokrywa próbki kolorów i przyciski/etykiety. Swatch Pro dodaje próbki obrazkowe, galerię per wariant i próbki na listach sklepu.

  • Próbki obrazkowe per termin (wdrożone)
  • Galeria per wariant (wdrożone)
  • Próbki na listach sklepu (wdrożone w PRO)
  • Bogate tooltipy (wdrożone w PRO)
  • Własne rozmiary i kształty (wdrożone w PRO)

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.

Jak Swatch wypada na tle Variation Swatches i YITH Color & Label Variations?

Wszystkie trzy zamieniają listy wariantów w próbki kolorów i etykiet. Swatch używa natywnego formularza wariantów, jest dostępny z klawiatury i bez jQuery, za darmo i open source z PRO od €29/rok, wobec Variation Swatches Pro za $49/rok. Ceny wg stanu na czerwiec 2026.

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, galerię per wariant i próbki na listach.