Filtry produktów WooCommerce - jak poprawić nawigację i konwersje w sklepie

Filtry powinny odpowiadać decyzji zakupowej. W obuwiu ważny będzie dostępny rozmiar, w oświetleniu gwint i barwa światła, a przy częściach zamiennych zgodność z konkretnym urządzeniem. Nie kopiuj jednego rozbudowanego panelu do wszystkich kategorii, jeśli większość kryteriów w części katalogu nie ma zastosowania.

Zbierz pytania kierowane do obsługi, frazy z wyszukiwarki sklepu i informacje potrzebne do odróżnienia podobnych produktów. Przy każdym proponowanym filtrze zapisz, jaką decyzję ułatwia i skąd pochodzi dana. Jeśli odpowiedź wymaga ręcznego czytania opisów, najpierw trzeba przygotować uporządkowany atrybut.

Ułóż scenariusze odbioru przed konfiguracją. Przykładowo: klient szuka czarnej koszulki w rozmiarze L, dostępnej od ręki. Oczekiwany wynik to produkt z takim dostępnym wariantem, a nie dowolna koszulka występująca osobno w kolorze czarnym i rozmiarze L. Ta różnica pozwala wykryć błąd, którego nie widać po samym wyglądzie panelu.

Nie ma uniwersalnego minimum produktów, od którego filtry są potrzebne. Nawet mały katalog części może wymagać precyzyjnego dopasowania, podczas gdy duża, jednorodna kolekcja potrzebuje niewielu kryteriów.

W dokumentacji WooCommerce dotyczącej atrybutów globalne atrybuty tworzy się w obszarze Produkty > Atrybuty. Pozwalają używać tych samych nazw i wartości w wielu produktach. Ustal słownik oraz jednostki: pojemność 500 ml powinna być porównywalna w całej kategorii, zamiast występować raz jako tekst, a raz jako inny zapis liczby.

Odbierz dane na produktach prostych i zmiennych. Przy wariantach sprawdź połączenia dostępne i niedostępne, nie tylko pojedynczy kolor. Jeśli towar przychodzi z hurtowni, potwierdź, czy import aktualizuje właściwy wariant po SKU.

WooCommerce używa także tabeli wyszukiwania atrybutów, której zachowanie opisuje oficjalna dokumentacja optymalizacji lookup table. Rozbieżności między kartą produktu a filtrem mogą wynikać z nieaktualnych danych pomocniczych lub niedokończonego przetwarzania. Zanim uruchomisz przebudowę, ustal przyczynę i sprawdź kolejkę zadań na kopii sklepu.

WooCommerce wprowadził nowy blok Product Filters w wersji 9.9, co potwierdza komunikat wydania z 9 czerwca 2025 roku. Nie oznacza to, że każda funkcja dzisiejszego bloku była dostępna już w pierwszym wydaniu. Przy wdrożeniu korzystaj z dokumentacji odpowiadającej zainstalowanej wersji i przetestuj zgodność motywu.

Aktualna dokumentacja filtrów katalogu opisuje między innymi filtrowanie ceny, atrybutów, dostępności, kategorii, marek i tagów oraz prezentację aktywnych kryteriów. Blok działa w powiązaniu z katalogiem i kolekcją produktów. Starsze widżety i własny listing motywu mogą mieć inny sposób konfiguracji.

Dodatkowa wtyczka ma sens, gdy potrzebujesz konkretnej brakującej funkcji, na przykład zależnych kryteriów dopasowania albo integracji z niestandardowym źródłem danych. Oceń ją na własnym katalogu: poprawność wyników, obsługa wariantów, telefon, klawiatura, adresy URL oraz kompatybilność z aktualną wersją WooCommerce.

Nie wybieraj na podstawie samej deklaracji AJAX. Brak pełnego przeładowania strony jest cechą interfejsu, a nie dowodem poprawności wyników, dostępności czy indeksowania. Sprawdź też cenę odnowienia licencji i dostęp do aktualizacji po jej wygaśnięciu.

W motywie blokowym otwórz edytor witryny i szablon katalogu produktów. W aktualnej dokumentacji producent prowadzi przez Wygląd > Edytor > Projekt > Szablony, a następnie Product Catalog. Nazwy w panelu zależą od tłumaczenia i wersji. Jeśli motyw nie udostępnia tego widoku, sprawdź jego własny sposób budowy katalogu zamiast szukać identycznego ekranu.

Dodaj Product Filters przy właściwej kolekcji produktów, wybierz potrzebne podfiltry i przypisz atrybuty. Ustaw etykiety zrozumiałe dla kupującego, sposób prezentacji wartości oraz widoczność liczby wyników. Dodaj aktywne kryteria i możliwość wyczyszczenia wyboru, aby użytkownik rozumiał, dlaczego widzi określony zestaw produktów.

W ustawieniach opisanych przez WooCommerce dostępne są rozwiązania dla małych ekranów oraz zachowania kolekcji przy przeładowaniu. Ustaw je świadomie. Panel boczny z desktopu nie może zasłaniać całego katalogu na telefonie bez czytelnego zamknięcia i informacji o zastosowanych kryteriach.

Po zapisaniu porównaj wyniki z wcześniej przygotowaną listą produktów. Sprawdź również sortowanie, kolejną stronę wyników, przycisk Wstecz i otwarcie skopiowanego adresu. Filtr działający tylko do pierwszego przejścia między stronami nie jest gotowy do odbioru.

Użytkownik powinien widzieć, co wybrał, ile wyników pozostało i jak usunąć pojedyncze kryterium. Przy wielu wartościach zadbaj o czytelne etykiety oraz wyszukiwanie w obrębie listy, jeśli używane rozwiązanie je obsługuje. Nie zastępuj nazw kolorów samymi próbkami: nazwa musi być dostępna także dla osoby, która nie rozróżnia barw.

WCAG 2.2, kryterium 2.5.8 na poziomie AA określa minimalny rozmiar celu wskaźnika jako 24 × 24 piksele CSS albo spełnienie wskazanych wyjątków, na przykład odpowiednich odstępów. Nie należy przedstawiać 44 pikseli jako tego samego wymagania AA. Większy, wygodny obszar aktywacji nadal może być dobrą decyzją projektową.

Obsłuż cały panel klawiaturą. Sprawdź widoczny fokus, kolejność przechodzenia, otwieranie panelu na telefonie oraz powrót do miejsca pracy po jego zamknięciu. Suwak ceny uzupełnij dostępnymi polami wartości, jeśli sam suwak utrudnia precyzyjne ustawienie zakresu.

Przy aktualizacji wyników bez przeładowania potrzebny jest zrozumiały komunikat. WCAG dotyczące komunikatów stanu opisuje możliwość przekazania informacji technologiom asystującym bez wymuszania zmiany fokusu. Sam spinner i wizualna zmiana liczby produktów mogą nie wystarczyć osobie korzystającej z czytnika ekranu.

Nie każdy wybór koloru i ceny zasługuje na osobną stronę w wynikach wyszukiwania. Najpierw wskaż kombinacje odpowiadające rzeczywistej potrzebie zakupowej, z trwałą ofertą i sensowną treścią. Pozostałe adresy mogą służyć wyłącznie nawigacji użytkownika. Decyzja wymaga znajomości kategorii, a nie automatycznego indeksowania wszystkich parametrów.

Dla stron przeznaczonych do indeksowania zadbaj o stabilny adres, jednoznaczny zestaw produktów i linkowanie wewnętrzne. Unikaj wielu adresów reprezentujących tę samą kolejność lub ten sam zestaw parametrów. Samo wygenerowanie tytułu z nazw filtra nie tworzy wartościowej strony docelowej.

Google zaleca dla nawigacji fasetowej: "Return an HTTP 404 status code when a filter combination doesn't return results." Dotyczy to odpowiedzi serwera dla pustych kombinacji i wskazanych błędnych adresów. Przy wdrożeniu trzeba pogodzić czytelny komunikat dla kupującego z właściwym statusem HTTP, zamiast przekierowywać wszystkie takie adresy na ogólną kategorię.

AJAX nie przesądza o indeksowalności. Sprawdź rzeczywisty adres, odpowiedź HTTP, wyrenderowaną treść i sposób odkrywania odnośników. Strona wygląda poprawnie w przeglądarce użytkownika, ale może wysyłać robotowi inną informację.

Blokada w robots.txt ogranicza pobieranie adresu. Dyrektywa noindex mówi o wykluczeniu z indeksu, ale robot musi mieć możliwość jej odczytania, co wyjaśnia dokumentacja noindex Google. Canonical wskazuje preferowaną wersję stron o tej samej lub bardzo podobnej treści. Tych trzech mechanizmów nie należy stosować zamiennie.

Jeżeli zablokujesz pobieranie adresu, Google może nie zobaczyć umieszczonego na nim noindex. Jeżeli wszystkie przefiltrowane listy wskażą canonical na kategorię, choć przedstawiają istotnie różne zestawy, sygnał może nie opisywać właściwie relacji między stronami. Regułę trzeba ustalić dla konkretnego typu adresu i sprawdzić w odpowiedzi HTML.

W dokumentacji Google canonical i nofollow nie są traktowane jako równie skuteczne metody ograniczania crawlowania co odpowiednio zaplanowana blokada. Nie obiecuj więc, że samo dodanie canonical rozwiąże problem ogromnej liczby kombinacji.

Nie szukaj narzędzia Parametry URL w Search Console: Google ogłosiło jego wycofanie w 2022 roku. Obecny odbiór powinien obejmować reguły w aplikacji i serwerze oraz próbkę rzeczywistych adresów. Zmiany sprawdzaj etapami, żeby nie wyłączyć z indeksowania wartościowych stron kategorii.

Zmierz te same działania przed zmianą i po niej: pierwsze otwarcie katalogu, wybór popularnego kryterium, kilka połączonych filtrów oraz przejście na kolejną stronę. Zanotuj czas odpowiedzi serwera, wielkość odpowiedzi i czas aktualizacji interfejsu. Oddziel pierwszy odczyt od wyniku podanego z pamięci podręcznej.

Sprawdź logi błędów, koszt zapytań i stan tabel pomocniczych. Przyczyną może być niestandardowe filtrowanie danych, konflikt rozszerzeń, nieaktualny indeks albo koszt renderowania dużej listy. Nie zakładaj, że każdy filtr wykonuje identyczne zapytania do metadanych produktów.

Pamięć podręczna musi uwzględniać kontekst cen i dostępności, na przykład walutę czy grupę klienta. Przyspieszenie odpowiedzi kosztem pokazania niewłaściwej ceny jest błędem. Redis, przebudowa indeksów i zmiana serwera wymagają uzasadnienia pomiarem oraz planu powrotu, a nie automatycznego dodania do każdej instalacji.

Jeżeli problem obejmuje cały katalog, zakres optymalizacji WooCommerce powinien objąć jego przyczynę. Obsługę aktualizacji można omówić w ramach prac WordPress, ale abonament opieki nie oznacza automatycznie wykonania nowych, niestandardowych filtrów.

Do odbioru przygotuj zestaw oczekiwanych wyników dla produktów prostych, wariantowych, promocyjnych i niedostępnych. Porównaj liczbę produktów, ceny, sortowanie oraz zachowanie po wyczyszczeniu filtrów. Osobno sprawdź telefon, klawiaturę, komunikaty czytnika i statusy HTTP adresów przewidzianych dla SEO.

Pomiar sprzedaży interpretuj ostrożnie. Osoby używające filtrów mogą mieć inną intencję zakupową niż pozostali odwiedzający. Wyższa konwersja tej grupy nie dowodzi wpływu samego wdrożenia. Przy audycie konwersji sklepu ustal metodę porównania, sezonowość i zmiany w ruchu zamiast obiecywać konkretny procent poprawy.

W nowym sklepie internetowym kryteria katalogu warto ustalić już na etapie projektu. W istniejącym sklepie najpierw rozdziel poprawki danych, interfejsu i integracji. Do kontaktu wystarczy adres kategorii i opis problemu, na przykład brak dostępnego rozmiaru w wynikach. Przykład produktu pomoże odtworzyć błąd, ale nie potrzebujesz kompletnej specyfikacji przed pierwszą rozmową.

• WooCommerce filter shortcode: jak osadzić filtr produktów w sklepie
• Jak dodać atrybuty do wybranego produktu w WooCommerce bez zmiany całego katalogu
• Ile produktów wyświetlać na stronie sklepu WooCommerce?