Czy próbki kolorów WooCommerce działają z każdym motywem?
Próbki kolorów WooCommerce zależą od motywu blokowego, typu atrybutu i bloku wyboru wariantu. Sprawdź, co skonfigurować i przetestować przed zmianą karty produktu.
Nie. Natywne próbki kolorów WooCommerce wymagają motywu blokowego i włączonej eksperymentalnej funkcji „Color swatches for attributes”. Widoczne są w obsługujących je blokach, między innymi w selektorze wariantów bloku „Add to Cart + Options” oraz w bloku „Chips”. Samo przypisanie koloru do atrybutu nie sprawi więc, że próbki pojawią się w każdym motywie i każdym selektorze. WooCommerce opisuje tę funkcję jako eksperymentalną i przeznaczoną dla motywów blokowych.
Funkcję wprowadzono w WooCommerce 10.9; informacja o niej ukazała się 3 czerwca 2026 r. Warto sprawdzić nie tylko wersję wtyczki, ale też układ karty produktu i konkretny blok odpowiedzialny za wybór wariantu. Wpis deweloperski WooCommerce wymienia bloki obsługujące próbki.
W skrócie
- Motyw musi być blokowy, aby w ustawieniach pojawił się przełącznik natywnej funkcji próbek.
- Atrybut musi mieć typ „Color / image”, a jego wartość powinna mieć przypisany kolor lub obraz.
- Próbki wariantów działają w selektorze bloku „Add to Cart + Options” (Beta); standardowy blok dodawania do koszyka nie wyświetla ich w ten sam sposób.
- Po zmianie ustawień sprawdź kartę produktu na komputerze i telefonie. Motyw, szablon produktu i wybrany blok wpływają na to, co zobaczy klient.
Od czego zależą próbki kolorów WooCommerce?
Atrybut produktu opisuje jego cechę, na przykład kolor lub rozmiar. Terminy atrybutu to konkretne wartości, takie jak „Granatowy” i „Beżowy”. Gdy atrybuty definiują warianty, klient może wybrać właściwą kombinację, na przykład kolor i rozmiar koszulki. WooCommerce używa atrybutów również do filtrowania produktów. Dokumentacja WooCommerce wyjaśnia rolę atrybutów i ich użycie w produktach wariantowych.
Próbka to wizualny sposób pokazania wartości atrybutu: kolor może być przedstawiony jako pole w wybranym odcieniu, a wzór jako obraz. To, czy taka forma pojawi się na stronie, zależy od rodzaju atrybutu oraz bloku, który wyświetla opcje. Funkcja z WooCommerce nie jest automatyczną zmianą wyglądu każdego istniejącego selektora.
| Element konfiguracji | Kiedy zobaczysz próbki | Co sprawdzić |
|---|---|---|
| Motyw | Natywny przełącznik jest dostępny w motywie blokowym | Czy sklep korzysta z motywu blokowego |
| Funkcja WooCommerce | Próbki są dostępne po włączeniu eksperymentalnej funkcji | „WooCommerce > Settings > Advanced > Features” |
| Atrybut | Wizualny efekt wymaga typu „Color / image” i przypisanej wartości | Typ atrybutu oraz kolor lub obraz terminu |
| Selektor wariantu | Obsługę zapewnia między innymi „Add to Cart + Options” (Beta) | Jaki blok znajduje się w szablonie produktu |
| Filtr produktów | Bloki filtrów mogą pokazać próbki lub znacznik koloru | Czy użyty filtr to obsługiwany blok |
Jak skonfigurować i sprawdzić próbki
Instrukcja dotyczy WooCommerce 10.9 lub nowszego, ponieważ od tej wersji dostępny jest typ atrybutu Color / Image. WooCommerce 10.8 wymaga WordPressa 6.9 lub nowszego; aktualne wymagania dla WooCommerce 11.2 wskazują WordPressa 7.0 lub nowszego. Informacje o wersji 10.8 podają minimalną wersję WordPressa, a katalog WordPress.org publikuje bieżące wymagania WooCommerce. Jeśli ustawień nie ma w panelu, najpierw sprawdź motyw i wersję WooCommerce, zamiast szukać ich w innym miejscu.
- Sprawdź motyw. W natywnej konfiguracji przełącznik funkcji jest dostępny, gdy sklep używa motywu blokowego. Przy motywie klasycznym nie pojawia się w ustawieniach WooCommerce. Sam fakt, że sklep działa na WooCommerce, nie oznacza więc, że można użyć tej funkcji w aktualnym układzie.
- Włącz funkcję próbek. Przejdź do „WooCommerce > Settings > Advanced > Features” i włącz „Color swatches for attributes”. WooCommerce określa ją jako eksperymentalną. Przed zmianą karty produktu rozsądnie jest sprawdzić efekt w środowisku testowym.
- Ustaw typ atrybutu. Otwórz „Products > Attributes”, utwórz atrybut albo edytuj istniejący i wybierz „Color / image”. Dla terminu, na przykład „Granatowy”, ustaw kolor HEX. Dla wzoru, takiego jak kratka, wybierz obraz z biblioteki mediów. Dokumentacja opisuje ustawianie typu oraz wartości koloru lub obrazu.
- Dodaj atrybut do produktu wariantowego. W danych produktu wybierz zakładkę „Attributes”, dodaj atrybut i przypisz dostępne wartości. Kliknij „Save Attributes”, przejdź do zakładki „Variations” i wybierz „Generate variations”, aby utworzyć kombinacje, albo „Add manually”, aby wskazać dostępne warianty. Otwórz każdy wariant, ustaw wymaganą cenę regularną, a następnie kliknij „Save changes”. Dokumentacja produktów wariantowych opisuje zapis atrybutów, tworzenie wariantów, ustawianie cen i zapisywanie zmian. Atrybut utworzony tylko na poziomie pojedynczego produktu nie jest globalnym atrybutem dostępnym do ponownego użycia w całym katalogu.
- Sprawdź blok na karcie produktu. Zweryfikuj, czy szablon korzysta z „Add to Cart + Options” (Beta), a nie ze standardowego bloku dodawania do koszyka, jeśli oczekujesz próbek w selektorze. Zajrzyj też do szablonu produktu, bo starszy układ może zawierać inne bloki galerii lub wyboru wariantów.
- Przetestuj wybór wariantu. Otwórz produkt jako klient, wybierz kolor i sprawdź, czy można dodać właściwy wariant do koszyka. Jeśli produkt ma zdjęcia przypisane do wariantów, sprawdź również, czy galeria zmienia obraz po wyborze. Samo wyświetlenie próbki nie potwierdza jeszcze, że cały proces wyboru działa prawidłowo.
Który selektor wybrać?
Wpis deweloperski WooCommerce wskazuje, że próbki są dostępne w bloku „Add to Cart + Options” (Beta), a nie w klasycznym bloku dodawania do koszyka z opcjami. W komentarzu do tego wpisu podano też, że nowy blok współpracuje z nowym blokiem „Product Gallery”; starszy blok galerii może nie dać oczekiwanego efektu przy zmianie zdjęcia wariantu. Jeśli szablon pochodzi ze starszej konfiguracji, sprawdź w edytorze, które bloki są w nim użyte. Opis bloków i wyjaśnienie ich współpracy znajdują się we wpisie WooCommerce.
| Sytuacja | Czego się spodziewać | Następny krok |
|---|---|---|
| Motyw blokowy, funkcja aktywna, atrybut wizualny i „Add to Cart + Options” (Beta) | Selektor może pokazać próbki | Sprawdź wybór wariantu i działanie galerii |
| Motyw klasyczny | Natywny przełącznik funkcji nie jest dostępny | Sprawdź możliwości obecnego selektora lub rozważ zmianę układu motywu |
| Standardowy blok dodawania do koszyka | Natywne próbki wariantów nie są w nim dostępne w opisanym wariancie | Zweryfikuj blok użyty w szablonie produktu |
| Atrybut ma zwykły typ „Select” albo nie ma wartości wizualnej | Próbka może się nie pojawić | Ustaw „Color / image” i przypisz kolor lub obraz |
Dlaczego próbki mogą się nie wyświetlać?
Zacznij od sprawdzenia czterech rzeczy: czy motyw jest blokowy, czy funkcja jest aktywna, czy atrybut ma typ „Color / image” oraz czy szablon używa obsługiwanego bloku. Jeśli wszystkie te warunki są spełnione, sprawdź produkt na stronie i porównaj go z innym produktem wariantowym. W ten sposób łatwiej ustalisz, czy przyczyna dotyczy konfiguracji produktu, czy szablonu.
Pamiętaj też, że włączenie funkcji nie zmienia automatycznie dotychczasowych atrybutów. Trzeba wybrać dla nich nowy typ, a terminom przypisać kolor albo obraz. Zmiana typu atrybutu i przełączenie bloku to dwa osobne elementy konfiguracji.
Próbka koloru nie zastępuje zdjęcia produktu. W przypadku odcienia trudnego do odróżnienia albo materiału o wyraźnej fakturze warto sprawdzić, czy kolor lub miniatura rzeczywiście pomagają rozpoznać wybór. Jeśli klient ma wybrać kolor i rozmiar, przetestuj także kombinacje, których nie ma w sprzedaży, aby potwierdzić, że selektor nie sugeruje dostępności niedostępnego wariantu.
FAQ
Czy próbki kolorów WooCommerce działają z motywem klasycznym?
Natywna funkcja wymaga motywu blokowego. Dokumentacja WooCommerce podaje, że przełącznik „Color swatches for attributes” pojawia się tylko przy motywie blokowym. W motywie klasycznym ta opcja nie jest dostępna w ustawieniach.
Czy próbki zastąpią każdy dropdown wariantu?
Nie. Wybór zależy od bloku użytego na karcie produktu. Według wpisu WooCommerce próbki dla wariantów obsługuje „Add to Cart + Options” (Beta), a standardowy blok dodawania do koszyka nie wyświetla ich w ten sam sposób.
Czy funkcja działa z atrybutem utworzonym wcześniej?
Można edytować istniejący atrybut i zmienić jego typ na „Color / image”. Włączenie funkcji samo nie zmienia wcześniejszych atrybutów. Dla każdego używanego terminu ustaw kolor lub wybierz obraz.
Czy próbka zmieni zdjęcie produktu po kliknięciu koloru?
Sama próbka nie oznacza automatycznej zmiany galerii. Wpis WooCommerce wskazuje na współpracę bloku „Add to Cart + Options” (Beta) z blokiem „Product Gallery”. Sprawdź własny szablon i przypisane zdjęcia wariantów.