Źle podłączony filtr może wyglądać poprawnie, a mimo to nie zmieniać produktów albo aktualizować niewłaściwą listę. Żeby uniknąć takiego błędu, trzeba dopasować shortcode i dostawcę wyników do konkretnej wtyczki oraz sposobu wyświetlania katalogu.
Krótka odpowiedź
WooCommerce ma shortcode do wyświetlania produktów, ale nie jeden uniwersalny shortcode do filtrowania. Składnia i połączenie filtra z katalogiem zależą od wtyczki: na przykład oficjalne rozszerzenie WooCommerce Product Filters używa `[wcpf_filters id="123"]` oraz parametru `filter-id` przy shortcode `[products]`.
Skopiuj identyfikator z własnej konfiguracji wtyczki, umieść filtr nad właściwą listą i sprawdź działanie na stronie publicznej, także przy paginacji.
Usługi KC Mobile
Potrzebujesz pomocy w tym temacie?
Czytasz poradnik „WooCommerce filter shortcode: jak osadzić filtr produktów w sklepie”. Napisz, co chcesz zrobić i na jakim etapie jesteś. Ustalimy, czy możemy pomóc i jaki zakres prac będzie potrzebny.
Czy WooCommerce ma wbudowany shortcode do filtrowania produktów?
WooCommerce udostępnia shortcode do wyświetlania produktów, ale shortcode listy nie jest tym samym co shortcode filtra. Przykładowo `[products]` może wyświetlić katalog według kategorii, atrybutów lub innych parametrów, lecz samo wstawienie go nie tworzy interfejsu filtrowania. Szczegóły parametrów znajdują się w dokumentacji shortcode produktów WooCommerce.
Nie istnieje jedna składnia filtra działająca ze wszystkimi rozszerzeniami. Wtyczka może dostarczać osobny shortcode, blok, widget albo integrację z archiwum WooCommerce. Oficjalna wtyczka Product Filters for WooCommerce na przykład wykorzystuje `[wcpf_filters id="123"]`; liczba identyfikuje skonfigurowany projekt filtrów. W tej integracji parametr filtra do shortcode produktów to `filter-id`, a nie nazwa ogólnego filtra WooCommerce.
Przed wdrożeniem ustal więc, co generuje produkty, a co generuje kontrolki filtra. Ten podział ułatwia diagnozę i zapobiega traktowaniu shortcode `[products]` jak kompletnej funkcji filtrowania. Więcej o bazowej konfiguracji katalogu opisujemy w poradniku produkt WooCommerce: typy, warianty i lista kontroli.
Czytasz poradnik „WooCommerce filter shortcode: jak osadzić filtr produktów w sklepie”. Napisz, co chcesz zrobić i na jakim etapie jesteś. Ustalimy, czy możemy pomóc i jaki zakres prac będzie potrzebny. Omów temat tego poradnika
Jak znaleźć poprawny shortcode filtra w używanej wtyczce?
Najpierw sprawdź dokumentację producenta dla zainstalowanej wtyczki i wersji, a potem porównaj ją z ustawieniami w panelu. Nie kopiuj składni z forum ani z instrukcji dotyczącej innego rozszerzenia: nawet podobne nazwy funkcji mogą mieć inne parametry albo działać z innym typem listy.
| Wtyczka lub integracja | Gdzie sprawdzić składnię | Parametry i połączenie do sprawdzenia | Czy potrzebny identyfikator? |
|---|---|---|---|
| Product Filters for WooCommerce | Dokumentacja WooCommerce: Shortcodes oraz konfiguracja projektu filtrów | `id` dla `[wcpf_filters]`; zgodny `filter-id` przy `[products]`; `paginate` i ewentualnie `use-sorting` | Tak, identyfikator projektu musi odpowiadać konfiguracji |
| JetSmartFilters z shortcode WooCommerce | Dashboard > Crocoblock > JetPlugins Settings > JetSmartFilters, następnie ustawienia filtra | Włączony provider WooCommerce Shortcode; właściwy typ filtra i shortcode produktów na stronie | Zwykle nie dla pojedynczej listy; Query ID może być potrzebny przy wielu providerach |
| Inna wtyczka filtrów | Dokumentacja producenta oraz ekran tworzenia filtra | Typ provider/listing, identyfikator filtra, AJAX, atrybuty i zachowanie przy paginacji | Zależnie od producenta i liczby list na stronie |
W JetSmartFilters oficjalna instrukcja prowadzi przez Dashboard > Crocoblock > JetPlugins Settings > JetSmartFilters, gdzie włącza się provider WooCommerce Shortcode, a następnie tworzy filtr i wybiera odpowiedniego providera w polu This Filter For. To odmienna konfiguracja od shortcode `wcpf_filters`. Dokumentacja Crocoblock opisuje też, że Query ID łączy filtr z konkretnym providerem i bywa potrzebny przy kilku listach na stronie.
Gdzie można wstawić shortcode filtra produktów?
Wstaw shortcode w miejscu obsługiwanym przez używany edytor i wtyczkę. Najczęściej trafia nad listą produktów w tej samej treści lub szablonie, tak aby filtr i wyniki miały dostęp do tego samego kontekstu katalogu.
| Miejsce osadzenia | Typowe zastosowanie | Ograniczenie do sprawdzenia |
|---|---|---|
| Edytor blokowy WordPress | Blok Shortcode nad blokiem lub shortcode listy produktów | Rozszerzenie musi obsługiwać wybrany blok lub provider; wsparcie różni się między wtyczkami |
| Elementor | Widget Shortcode lub widget filtra producenta | Sam widget Shortcode nie ustawia połączenia filtra z listą; sprawdź provider i query |
| Edytor klasyczny | Treść strony lub produktu, w miejscu obsługującym shortcode | Motyw może nie renderować shortcode w każdym polu lub obszarze |
| Widget tekstowy lub blok HTML | Sidebar albo wybrany obszar widgetów | Niektóre obszary nie mają kontekstu bieżącego archiwum; shortcode może się nie wykonać |
| Szablon motywu | Dedykowany układ archiwum lub niestandardowa strona katalogu | Wymaga prawidłowego wywołania shortcode przez motyw i testu po aktualizacji |
Edytor blokowy WooCommerce pozwala też budować katalog z bloków produktów, ale rozszerzenia filtrów nie muszą z nimi współpracować. Oficjalna dokumentacja Product Filters for WooCommerce wprost podaje, że shortcode `[wcpf_filters]` nie filtruje Products block ani innych bloków WooCommerce. W takim układzie wybierz obsługiwaną integrację albo zastosuj listę produktów, którą wtyczka potrafi filtrować.
Jak wdrożyć shortcode filtra krok po kroku?
Wdrożenie rozpocznij od kopii zapasowej lub środowiska testowego, zwłaszcza gdy filtr zastąpi działające archiwum sklepu. Następnie przejdź przez konfigurację w tej kolejności:
1. Otwórz wtyczkę filtrującą i utwórz zestaw filtrów dla katalogu, na przykład według kategorii, atrybutu, ceny lub dostępności.
2. Zapisz konfigurację i skopiuj shortcode albo wybierz blok/widget wskazany przez producenta. W shortcode sprawdź identyfikator projektu, jeśli jest wymagany.
3. Dodaj element filtra nad listą produktów. Umieść oba elementy w tym samym kontekście strony lub szablonu.
4. Ustaw provider, czyli typ listy, którą filtr ma aktualizować. Jeśli wtyczka wymaga ID, wpisz ten sam identyfikator przy filtrze i przy providerze.
5. Zapisz stronę i sprawdź ją w nowej karcie jako niezalogowany użytkownik. Podgląd edytora nie zawsze ładuje skrypty, AJAX ani kontekst archiwum tak jak strona publiczna.
6. Wyczyść cache strony i optymalizacji skryptów, jeśli po zmianie widzisz stary układ albo skrypty nie startują.
Nie zmieniaj składni na podstawie przykładu z innej wersji rozszerzenia. Instrukcja Product Filters for WooCommerce pokazuje konkretnie `[wcpf_filters id="123"]` oraz `[products paginate="true" filter-id="123"]`; taki przykład dotyczy tej integracji, nie wszystkich pluginów. Jeśli zmieniasz sposób prezentacji katalogu, sprawdź też pozostałe ustawienia sklepu w poradniku WooCommerce dla sklepów online.
Jak połączyć shortcode filtra z listą produktów?
Filtr musi otrzymać właściwy zestaw wyników do zmiany. W prostym przypadku wtyczka rozpoznaje jedyną listę na stronie automatycznie; przy kilku gridach, własnych zapytaniach lub odrębnych sekcjach katalogu trzeba jawnie wskazać provider albo wspólny identyfikator.
W Product Filters for WooCommerce oba shortcode powinny używać tego samego ID projektu: filtr otrzymuje `id`, a lista produktów `filter-id`. Dokumentacja producenta podaje także, że można przekazać `paginate="true"`, a dla sortowania `use-sorting="true"`. Nie zakładaj, że te atrybuty będą rozpoznawane przez inne filtry.
W JetSmartFilters wybierz WooCommerce Shortcode jako provider w ustawieniach filtra. Jeśli na stronie jest więcej niż jeden provider, użyj Query ID zgodnie z dokumentacją wtyczki i sprawdź, czy wskazuje ten sam element. Nie myl ID filtra, Query ID i identyfikatora CSS: podobnie wyglądają, ale pełnią różne role.
Archiwum kategorii może już dostarczać własne zapytanie WooCommerce. Własna strona z shortcode może natomiast wyświetlać inną listę, niż sugeruje adres URL. Testuj osobno stronę sklepu, kategorię i stronę z niestandardowym katalogiem. Paginacja musi przechodzić do kolejnych wyników już po zastosowaniu kryteriów, a jej reset nie może wracać do pełnego katalogu bez zachowania wybranego kontekstu.
Jak sprawdzić działanie shortcode na stronie sklepu?
Testuj zachowanie po stronie klienta, a nie tylko obecność elementu na stronie. Otwórz publiczną stronę w oknie prywatnym i zacznij od pojedynczego kryterium, aby wiadomo było, które ustawienie wpływa na wynik.
| Test | Czego oczekujemy | Co sprawdzić przy niepowodzeniu |
|---|---|---|
| Jedno kryterium, np. kategoria | Lista zawiera produkty spełniające wybrany warunek | Źródło filtra, provider i przypisanie kategorii do produktów |
| Dwa kryteria jednocześnie | Wyniki spełniają oba warunki zgodnie z logiką wtyczki | Ustawienie operatora AND/OR, stan filtra i zapytanie |
| Reset filtrów | Wraca początkowa lista dla danej strony lub archiwum | Link resetu i zachowane parametry URL |
| Brak wyników | Pojawia się czytelny komunikat, układ strony nie znika | Szablon pustego wyniku i warunki zapytania |
| Kolejna strona paginacji | Wyniki nadal spełniają aktywne filtry | Parametry zapytania, AJAX i konfiguracja paginacji |
| Telefon i wąski ekran | Kontrolki da się obsłużyć, a lista nie zasłania filtra | Responsywność, panel off-canvas i kolejność elementów |
Przy błędzie otwórz narzędzia deweloperskie przeglądarki i sprawdź Console oraz Network. Błędy JavaScript, odpowiedź AJAX o statusie 4xx/5xx albo żądanie blokowane przez cache lub zaporę pomagają zawęzić problem. Porównaj wyniki na stronie publicznej z podglądem edytora i wyłączaj po jednym narzędziu optymalizującym skrypty na kopii testowej.
Co zrobić, gdy shortcode wyświetla się jako tekst albo filtr nie działa?
Diagnozuj objaw, zanim zmienisz shortcode lub motyw. Widoczny tekst zwykle wskazuje, że pole nie przetwarza shortcode albo wpis trafił do bloku tekstowego, który go nie renderuje.
| Objaw | Możliwa przyczyna | Następny krok |
|---|---|---|
| Shortcode pojawia się jako tekst | Nieobsługiwany blok/pole, błędne nawiasy albo shortcode dodany jako zwykły tekst | Wstaw go do bloku Shortcode lub widgetu wskazanego przez producenta; sprawdź zapis znaków `[` i `]` |
| Puste miejsce zamiast filtra | Nieprawidłowe ID, nieopublikowana konfiguracja albo warunek widoczności | Otwórz edycję filtra, potwierdź ID i sprawdź shortcode w prostym miejscu testowym |
| Produkty pozostają bez zmian | Wybrano zły provider, filtr nie jest połączony z listą albo użyto nieobsługiwanego bloku | Dopasuj provider do sposobu renderowania produktów i sprawdź ograniczenia integracji |
| Zmienia się inna lista | Na stronie działa kilka providerów bez odrębnych ID | Nadaj unikalny Query ID każdemu powiązanemu zestawowi i sprawdź go w obu elementach |
| AJAX kończy się błędem | Konflikt JavaScript, cache, zapora lub odpowiedź serwera | Sprawdź Console i Network, wyczyść cache, przetestuj na stagingu bez optymalizacji skryptów |
| Paginacja pokazuje powtórki lub gubi filtry | Niezgodne zapytanie, parametry URL albo ustawienia paginacji | Przetestuj drugi widok wyników i potwierdź, że filtr oraz lista korzystają z tego samego query |
Perspektywa KC Mobile. W sklepach, w których widzimy kilka list produktów na jednej stronie, samo skopiowanie shortcode rzadko zamyka temat. Najwięcej problemów wykrywa test, który sprawdza osobno provider, parametry URL i paginację po włączeniu filtra. Gdy chcesz powierzyć konfigurację i testy zespołowi wdrożeniowemu, tworzymy sklepy WooCommerce z katalogiem dopasowanym do sposobu pracy sklepu.
Czy shortcode filtra wpływa na SEO i szybkość sklepu?
Filtr może tworzyć wiele adresów z parametrami, a każda kombinacja kategorii, ceny i atrybutu może wyglądać jak osobna wersja katalogu. Zanim pozwolisz wyszukiwarce indeksować takie adresy, ustal, które widoki mają samodzielną wartość dla użytkownika i powinny być dostępne w wynikach.
Sprawdź raport indeksowania stron i przykładowe adresy w Google Search Console. W WordPressie i WooCommerce zweryfikuj canonicale generowane dla archiwów, reguły w robots.txt oraz zachowanie parametrów w linkach filtra. Sama blokada parametrów w robots.txt może uniemożliwić robotowi odczyt wskazówki canonical, dlatego plan indeksowania należy sprawdzić całościowo. Więcej o widoczności sklepu omawiamy w poradniku SEO dla WooCommerce.
Każdy dodatkowy filtr może ładować własne skrypty, zapytania i indeksy. Mierz stronę przed i po wdrożeniu, porównując liczbę żądań, czas odpowiedzi oraz zachowanie cache dla adresów z parametrami. Nie cache'uj odpowiedzi filtrowanych tak, jakby były identyczne z katalogiem bez parametrów.
Filtry mają też wpływ na ścieżkę zakupową. Jeśli w sklepie prowadzisz promocje, sprawdź, czy kryterium ceny i etykiety promocyjne odpowiadają aktualnym cenom produktów; ustawienia promocji opisujemy w instrukcji promocji czasowej WooCommerce. Atrybuty, po których klienci mają filtrować katalog, warto uporządkować przed wdrożeniem, zgodnie z poradnikiem atrybutów produktu WooCommerce.
Jak zaplanować wdrożenie filtra w istniejącym sklepie?
Wybór wtyczki powinien wynikać z układu katalogu i sposobu edycji strony. Jeśli sklep korzysta z archiwów WooCommerce, sprawdź integrację z archiwum; jeżeli wyświetlasz produkty shortcode, potwierdź obsługę shortcode; dla edytora blokowego zweryfikuj zgodność z blokami. Dobór i konfigurację filtrów opisujemy szerzej w materiale filtry produktów WooCommerce.
Przed publikacją przygotuj listę kryteriów, sprawdź atrybuty produktów i zapisz oczekiwane zachowanie paginacji. Wdrożenie powinno obejmować konfigurację providerów, test desktop/mobile, kontrolę błędów JavaScript, cache i adresów URL. Przy przebudowie większej części katalogu możesz skorzystać z projektu i wdrożenia sklepu WooCommerce.
Filtr porządkuje katalog tylko wtedy, gdy dane produktów są spójne. Dla produktów z wariantami sprawdź, czy kryterium ma działać na wariantach, produkcie nadrzędnym czy obu poziomach. Nie zakładaj również, że sam filtr poprawi jakość opisów w indeksowanych listingach; reguły tworzenia treści produktowych omawiamy w poradniku bezpiecznych opisów produktów SEO.
Więcej poradników w tym temacie
Wspomniane narzędzia
Najczęściej zadawane pytania
Czy WooCommerce ma własny shortcode do filtrowania produktów?
Jak znaleźć shortcode filtra wtyczki WooCommerce?
Gdzie wkleić shortcode filtra produktów w WordPressie?
Dlaczego shortcode filtra WooCommerce wyświetla się jako tekst?
Czy shortcode filtra WooCommerce działa w Elementorze?
Krzysztof Czapnik
Founder & Technical Lead, KC Mobile
Projektuję i rozwijam strony WordPress, sklepy WooCommerce oraz aplikacje internetowe. Łączę projektowanie z programowaniem, integracjami i technicznym SEO. Projekty KC Mobile prowadzę osobiście.
Potrzebujesz pomocy z tym tematem? Napisz - odpowiem osobiście w 24h.
Potrzebujesz pomocy w tym temacie?
Czytasz poradnik „WooCommerce filter shortcode: jak osadzić filtr produktów w sklepie”. Napisz, co chcesz zrobić i na jakim etapie jesteś. Ustalimy, czy możemy pomóc i jaki zakres prac będzie potrzebny.