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

Filtrowanie produktów to nie luksus – to standard UX w e-commerce. Klienci przyzwyczajeni do Allegro i Amazona oczekują możliwości zawezenia wyników po: cenie, kolorze, rozmiarze, materiale, marce, ocenie.
Dane mówią same za siebie: sklepy z wdrożonymi filtrami Ajax (bez przeładowania strony) notują średni wzrost konwersji o 26% i 35% dłuższy czas na stronie. Mniej klientów odchodzi sfrustrowanych, więcej trafia do koszyka. Więcej o optymalizacji konwersji.

YITH WooCommerce Ajax Product Filter – darmowa wersja + premium ($79/rok). Filtrowanie po atrybutach, cenie, kategoriach, tagach. Ajax (bez przeładowania). Dobra integracja z motywami YITH. Najpopularniejsza opcja.
JetSmartFilters (Crocoblock) – premium ($49/rok w pakiecie Crocoblock). Zaawansowane filtry z Elementorem i Gutenbergiem. Hierarchiczne filtry, zakres dat, checkbox + radio + slider. Najlepsza opcja dla stron budowanych w Elementorze.
WooCommerce Product Filter by BeRocket – darmowa + premium ($39/rok). Ajax filtering, widget sidebar, color swatches. Solidna darmowa wersja. Wada: mniej aktualizacji niż konkurencja.
FacetWP – premium ($99/rok). Najszybsze działanie przy dużej liczbie produktów (1 000+). Faceted search, Ajax, kompatybilność z praktycznie każdym motywem. Wada: brak darmowej wersji.
Potrzebujesz profesjonalnej konfiguracji filtrów? Skontaktuj się z nami – dobierzemy i wdrożymy filtry dopasowane do Twojego asortymentu.

1. Zainstaluj wtyczkę i aktywuj ja w panelu WordPress.
2. Utwórz filtry po atrybutach – kolor, rozmiar, materiał. Upewnij się, ze produkty mają wypełnione atrybuty w panelu WooCommerce (Produkty -> Atrybuty).
3. Dodaj filtr cenowy – dwie opcje: slider (przesuwny zakres) lub checkboxy z predefiniowanymi zakresami (0–50 zl, 50–100 zl, 100–200 zl). Slider jest bardziej elastyczny, checkboxy szybsze na mobile.
4. Umiejscowienie filtrów – sidebar (klasyczne podejście, sprawdza się na desktopie), nad produktami (widoczne od razu), popup/drawer na mobile (najlepsza opcja UX na telefonach).
Atrybuty produktów to fundament filtrów – jeśli nie masz ich wypełnionych, filtry nie będą działać. Przeczytaj o wariantach i atrybutach WooCommerce.

To temat, który wiekszoscsc artykułów pomija, a jest krytyczny:
Problem duplikacji treści. Filtrowanie tworzy setki kombinacji URL (np. /sklep/?color=red&size=xl). Każdy taki URL to potencjalny duplikat w oczach Google. Rozwiązanie: canonical URLs wskazujące na glowna stronę kategorii.
Noindex dla filtrowanych stron. Dodaj noindex do stron generowanych przez filtry – nie chcesz, żeby Google indeksował /sklep/?color=red&size=xl&price=50-100. W wyjatkach: indeksuj popularne kombinacje z dużym wolumenem wyszukiwań (np. "czarne buty męskie rozmiar 44").
Crawl budget. Setki filtrowanych URL mogą wyczerpać budżet crawlowania bota Google. Rozwiązanie: zablokuj parametry filtrów w robots.txt lub Google Search Console. Więcej o crawl budget w artykule o optymalizacji crawlowania.
Ajax a boty Google. Filtry Ajax ładują treści dynamicznie – Googlebot może ich nie widzieć. Upewnij się, ze wtyczka generuje prawdziwe URL-e lub używa pushState dla przyjaznych adresów.

Mobile-first. 70%+ ruchu w e-commerce to mobile. Sidebar z filtrami nie działa na telefonach – użyj drawer (wysuwanego panelu) lub bottom sheet. Przycisk "Filtry" widoczny nad produktami, po kliknięciu – panel wysuwa się z dołu ekranu.
Lazy loading wyników. Zamiast ładować 100 produktów naraz – pokazuj 20 i doladowuj przy scrollowaniu. Zmniejsza First Load Time i poprawia Core Web Vitals.
Wpływ na CLS i LCP. Filtrowanie Ajax może powodować Content Layout Shift (CLS) – produkty "przeskakują" po załadowaniu filtrów. Ustaw stala wysokość kontenera produktów i placeholder skeleton. Sprawdź LCP po wdrożeniu filtrów – dodatkowy JavaScript może spowalnic renderowanie.