Często dostaję pytanie od klientów: jak sprawić, żeby sklep WooCommerce był po prostu wygodniejszy? Odpowiedź jest prosta — filtr produktów WooCommerce. Bo nic tak nie psuje zakupów jak przewijanie stu produktów bez możliwości zawężenia wyników. Dobrze ustawione filtry w WooCommerce sklepie to różnica między „klient się rozgląda” a „klient kupuje”.
Żeby poprawnie ustawić filtry produktów, trzeba ogarnąć kilka rzeczy – od tworzenia atrybutów po wybór odpowiedniej wtyczki i jej konfigurację. Zaraz pokażę Ci dokładnie, jak to zrobić krok po kroku. A jeśli nie masz jeszcze dobrze postawionej strony, sprawdź naszą ofertę na projektowanie stron internetowych WordPress – bo dobre filtry działają tylko na dobrze zrobionej stronie.
- Krok 1: Przygotowanie kategorii i atrybutów produktów w WooCommerce
- Krok 2: Wybór i instalacja odpowiedniej wtyczki do filtrowania
- Krok 3: Konfiguracja filtrów produktów według potrzeb sklepu
- Krok 4: Dodanie filtrów do strony sklepu i dopasowanie wyglądu
- Krok 5: Testowanie, optymalizacja i poprawki UX filtrowania
A jeśli chcesz wiedzieć dokładnie, jak przejść przez każdy z tych kroków — zostań ze mną dalej, bo zaraz wszystko rozpiszę konkretnie, bez lania wody.
Krok 1: Przygotowanie kategorii i atrybutów produktów w WooCommerce
Zacznijmy od podstaw – bez dobrze przygotowanych kategorii produktów WooCommerce i atrybutów produktów, żadne filtry nie będą działały logicznie. W panelu administracyjnym WordPress przejdź do Produkty → Atrybuty. Tam określasz np. kolor, rozmiar, materiał – czyli to, według czego klient będzie filtrował. Każdy atrybut powinien być przemyślany – nie ma sensu tworzyć dziesiątek opcji, jeśli później nie znajdą odzwierciedlenia w produktach.
Kategorie to główna struktura, według której budowana jest logika sklepu. Ważne, by nie dublować nazw ani tworzyć zbyt głębokiej hierarchii. Jeśli masz np. sklep z ubraniami, stwórz najpierw główne kategorie („Mężczyźni”, „Kobiety”), a potem podrzędne („Koszule”, „Spodnie”).Hierarchia kategorii musi być spójna – to wpływa na UX filtrowania produktów i indeksowanie w Google.
Warto też od razu przypisać atrybuty do produktów. W edycji produktu (zakładka „Atrybuty”) kliknij „Dodaj”, wybierz zdefiniowany wcześniej atrybut i przydziel odpowiednie wartości. To wszystko przygotowuje grunt pod filtrowanie dynamiczne WooCommerce, czyli np. „pokazuj tylko czerwone koszule w rozmiarze M”.
Dobrze zorganizowane atrybuty ułatwią Ci pracę w przyszłości, szczególnie jeśli planujesz integracje zewnętrzne. Więcej o tym, jak pracować na poziomie atrybutów, przeczytasz tutaj: zarządzanie atrybutami produktów WooCommerce.
| Nazwa atrybutu | Przykładowe wartości | Cel filtrowania |
|---|---|---|
| Kolor | Czerwony, Niebieski, Zielony | Filtracja według koloru produktu |
| Rozmiar | S, M, L, XL | Filtracja według rozmiaru |
| Materiał | Bawełna, Len, Poliester | Filtrowanie według rodzaju materiału |
| Cena | 0–100 zł, 100–300 zł | Filtracja według ceny produktu |
| Stan magazynowy | Dostępne, Brak w magazynie | Wyświetlanie tylko produktów w magazynie |
Krok 2: Wybór i instalacja odpowiedniej wtyczki do filtrowania
Można oczywiście korzystać z domyślnych widżetów WooCommerce, ale prawdziwa moc filtrów pojawia się dopiero po zainstalowaniu dedykowanej wtyczki do filtrowania. Na rynku jest kilka dobrych opcji: YITH WooCommerce AJAX Product Filter, Themify WooCommerce Product Filter czy WooCommerce Product Filter by WooBeWoo. Wszystkie mają wspólne cechy – filtrowanie dynamiczne AJAX, możliwość tworzenia filtrów po atrybutach, tagach i cenie oraz automatyczne aktualizacje wyników bez przeładowania strony.
Aby zainstalować wtyczkę, wejdź w Panel administracyjny WordPress → Wtyczki → Dodaj nową, wpisz jej nazwę w wyszukiwarce, kliknij Zainstaluj i Aktywuj. Po aktywacji pojawi się zwykle nowa zakładka w menu („Product Filters”, „WooBeWoo”, „YITH AJAX Filter” itp.), w której możesz dodać pierwszy filtr. To właśnie tam będziesz ustawiać wygląd, zakresy cenowe, sortowanie produktów i typy pól (checkboxy, suwaki, kolory itd.).
Jaką wtyczkę wybrać do swojego sklepu?
Jeśli dopiero zaczynasz, postaw na YITH WooCommerce AJAX Product Filter – jest intuicyjna i dobrze współpracuje z większością motywów. Masz większy sklep z setkami produktów? Wtedy lepiej sprawdzi się WooBeWoo – działa szybciej przy dużych bazach danych. Ważne, żeby sprawdzić kompatybilność wtyczek WooCommerce z Twoim motywem oraz innymi dodatkami (np. Elementor).
Wtyczka i motyw – duet, który musi się polubić
Nie każda wtyczka dobrze gra z każdym motywem. Zdarza się, że filtr nie pojawia się w panelu bocznym lub style CSS się rozjeżdżają. Dlatego po instalacji przetestuj wyświetlanie na desktopie i telefonie – filtry responsywne WooCommerce są absolutnym „must have”.
Po wyborze i konfiguracji filtrów zajmiemy się ich dodaniem do strony sklepu. Ale zanim do tego przejdziemy, upewnij się, że produkty mają aktualny stan magazynowy – pomoże Ci w tym integracja opisana tutaj: zarządzanie stanami magazynowymi WooCommerce.
Krok 3: Konfiguracja filtrów produktów według potrzeb sklepu
W tym momencie masz już gotowe kategorie i zainstalowaną wtyczkę. Teraz czas na ustawienia logiki i wyglądu. W panelu wtyczki dodaj nowy filtr produktów WooCommerce, nadaj mu nazwę (np. „Filtr koloru”), wybierz typ (checkbox, slider, lista rozwijana) i wskazanie źródła danych – czyli atrybut, według którego filtr ma działać. Dla ceny produktu wybierz slider z zakresami, dla rozmiaru produktu – checkboxy.
Nie przesadzaj z ilością filtrów – każdy dodatkowy element wpływa na wydajność filtrowania WooCommerce. Lepiej mieć trzy przydatne niż dziesięć nieużywanych. Zadbaj też o dobrą widoczność – w większości wtyczek możesz ustawić, czy filtr ma być rozwinięty czy zwinięty po załadowaniu strony.
Warto dodać też Ajax filtr WooCommerce (czyli dynamiczne odświeżanie). Klient nie musi klikać „Filtruj” – lista produktów aktualizuje się automatycznie po zmianie filtrów. To ogromny plus UX, który zmniejsza liczbę porzuconych koszyków.
Przy okazji sprawdź, czy filtr działa w trybie katalogu (jeśli nie chcesz pokazywać cen lub przycisków „dodaj do koszyka”) – o tym więcej przeczytasz tutaj: tryb katalogu w WooCommerce.
| Rodzaj filtru | Źródło danych | Typ pola | Obsługa AJAX | Widoczność |
|---|---|---|---|---|
| Cena produktu | WooCommerce meta | Suwak | Tak | Widoczny |
| Kolor produktu | Atrybut | Checkbox | Tak | Widoczny |
| Rozmiar produktu | Atrybut | Lista | Tak | Widoczny |
| Stan magazynowy | Meta danych | Checkbox | Tak | Widoczny |
| Ocena produktu | WooCommerce Rating | Gwiazdkowy | Tak | Widoczny |
Krok 4: Dodanie filtrów do strony sklepu i dopasowanie wyglądu
Teraz pora, by Twoje filtry faktycznie pojawiły się na stronie. Większość wtyczek umożliwia dodanie ich jako widżet filtrów w panelu bocznym lub w dowolnym miejscu za pomocą shortcode. Wchodzisz w Wygląd → Widżety, wybierasz boczną sekcję sklepu (np. „Sklep”) i przeciągasz tam widżet „Product Filter”. Wklejasz shortcode, zapisujesz – i gotowe.
Dopasowanie wyglądu do motywu sklepu WooCommerce
Styl filtrów powinien pasować do ogólnego designu Twojego sklepu opartego na WordPressie. Wtyczki dają sporo opcji – kolory przycisków, tła, marginesy. Jeśli używasz Elementor WooCommerce Filter, możesz wstawiać filtry bezpośrednio w układ strony, edytując ich pozycję i wygląd tak samo jak każdy inny widget.
Testy na urządzeniach mobilnych
Sprawdź koniecznie filtrowanie produktów mobilne. Filtry powinny chować się pod przyciskiem, nie zasłaniać listy produktów i odświeżać się poprawnie po zaznaczeniu. Użytkownicy mobilni to dziś często ponad połowa ruchu – zaniedbanie ich to strzał w kolano.
Hierarchia kategorii i logiczny układ filtrów
Umieszczaj filtry w logicznej kolejności – od najważniejszych (np. cena produktu) po szczegóły (np. materiał). Dobrze ustawiona hierarchia to klucz do navigacji bez frustracji. Ostatecznie chodzi o to, by klient po trzech kliknięciach był w miejscu, którego szukał.
Jeśli sprzedajesz też przez marketplace’y, polecam zerknąć, jak połączyć to z Allegro – o tym szerzej piszę tutaj: integracja WooCommerce z Allegro.
Krok 5: Testowanie, optymalizacja i poprawki UX filtrowania
Masz już wszystko ustawione – teraz najważniejsze: testy. Sprawdź, czy każdy filtr działa poprawnie i czy wyniki faktycznie się zawężają. Klikaj, zmieniaj, sprawdzaj kombinacje atrybutów.
Przy dużych bazach sprawdź też, czy strona nie zwalnia – słaba wydajność filtrowania WooCommerce może odstraszyć klienta bardziej niż brak zdjęć.
Warto także prześledzić, jak użytkownicy korzystają z filtrów. Jeśli zauważysz, że np. filtr „materiał” prawie nie jest używany, może lepiej go schować. UX to nie tylko projekt – to testy i obserwacje.
Zmieniaj i dopasowuj – to cały sens „żywego sklepu”.
Po finalnych poprawkach możesz też połączyć system z innymi kanałami sprzedaży (Amazon itp.), o czym więcej tutaj: integracja WooCommerce z Amazon.
Twoje filtry działają, Twój sklep zarabia
I to właśnie cały proces — od konfiguracji po dopieszczenie szczegółów. Jeśli dobrze ustawisz filtry produktów WooCommerce, Twój sklep stanie się intuicyjny i szybki. Klienci będą mogli łatwo odnaleźć to, czego szukają, a Ty zobaczysz to w konwersjach. A jeśli dopiero budujesz swoją stronę i potrzebujesz ekipy, która zrobi ją logicznie i z głową – zobacz nasze strony internetowe Zielona Góra i przekonaj się, jak wygląda projekt, który sprzedaje.
FAQ – najczęściej zadawane pytania o filtry WooCommerce
Czy mogę mieć filtry w sklepie bez instalacji wtyczki?
Tak, WooCommerce ma wbudowane podstawowe widżety filtrów po kategoriach, tagach i cenie, ale są one dość ograniczone i nie działają w trybie AJAX.
Czy filtry w WooCommerce wpływają na SEO?
Nie bezpośrednio, ale poprawiają czas przebywania użytkownika na stronie i ułatwiają indeksowanie produktów – co finalnie może poprawić widoczność sklepu.
Jak ukryć filtry na stronie produktu?
Najprościej przez warunek wyświetlania widżetu tylko dla strony sklepu (np. używając funkcji conditional w Elementorze lub odpowiedniego shortcode).
Czy filtry można dodać w górnej części sklepu, a nie w bocznym panelu?
Tak, większość wtyczek ma shortcode, który możesz wstawić w dowolnym miejscu – nad listą produktów, w nagłówku sekcji lub w stopce.
Jak sprawdzić, czy filtr działa poprawnie?
Przetestuj różne kombinacje atrybutów i porównaj wyniki. W razie problemów otwórz konsolę przeglądarki – błędy Ajax zwykle pojawiają się tam od razu.
Czy WooCommerce filtry działają z produktami zmiennymi?
Tak, ale musisz przypisać atrybuty do każdego wariantu produktu, inaczej filtr ich nie uwzględni.
Jak ustawić filtry dla produktów cyfrowych?
Tak samo jak dla fizycznych – po prostu dodaj odpowiednie atrybuty (np. format pliku, licencja). WooCommerce świetnie obsługuje produkty cyfrowe WooCommerce.
