Jak włączyć przyklejone filtry produktów w WooCommerce 11.2?
Sprawdź, jak przypiąć blok Product Filters w WooCommerce 11.2, włączyć filtry w katalogu produktów i zweryfikować ich działanie na komputerze oraz telefonie.
W WooCommerce 11.2 zaznacz blok Product Filters, a w jego karcie Styles ustaw Position na Sticky. Filtry będą pozostawać widoczne podczas przewijania w obrębie obszaru przewijania rodzica. Funkcja dotyczy bloku Product Filters, który możesz dodać do szablonu katalogu produktów w Edytorze witryny. WooCommerce opisało tę nowość 8 października 2026 r., a dokumentacja bloku podaje ścieżkę do ustawienia Sticky.
W skrócie
- Przyklejane położenie włączysz w ustawieniach stylu bloku Product Filters.
- Blok filtrów musi znajdować się na stronie lub w szablonie razem z blokiem Product Collection, którego produkty filtruje.
- Ustawienie Overlay decyduje, czy filtry są widoczne w treści, czy otwierają się jako nakładka. To osobna opcja od Position: Sticky.
- Po zapisaniu szablonu sprawdź efekt w podglądzie na komputerze i telefonie.
Jak włączyć przyklejone filtry produktów w WooCommerce 11.2
Poniższe kroki dotyczą katalogu produktów edytowanego w Edytorze witryny. Nazwy ustawień podaję po angielsku, zgodnie z dokumentacją WooCommerce.
- W panelu WordPress przejdź do Appearance > Editor > Design > Templates i otwórz szablon Product Catalog. WooCommerce wskazuje tę ścieżkę jako sposób edycji głównego szablonu katalogu. Szablon katalogu i jego edycję opisuje dokumentacja WooCommerce.
- W szablonie znajdź blok Product Collection. Blok Product Filters musi znajdować się na tej samej stronie lub w tym samym szablonie, ponieważ filtruje produkty z powiązanej kolekcji.
- Zaznacz blok Product Filters. Jeśli trudno go wybrać na podglądzie, skorzystaj z widoku listy bloków w edytorze.
- W panelu ustawień bloku otwórz kartę Styles i ustaw Position na Sticky. Dokumentacja WooCommerce wskazuje właśnie tę opcję jako sposób przypięcia filtrów.
- Zapisz zmiany szablonu, a następnie otwórz stronę katalogu lub kategorii w podglądzie. Przewiń listę produktów i sprawdź, czy blok pozostaje widoczny.
W praktyce: sprawdź również obszar nad filtrami. Jeśli sklep ma przyklejony nagłówek, obserwuj, czy nie zasłania on filtrów podczas przewijania. To praktyczna kontrola układu, bo widoczność zależy od tego, jak szablon wyświetla elementy strony.
Gdy nie widzisz ustawienia Sticky
Upewnij się, że zaznaczony jest nadrzędny blok Product Filters, a nie jeden z filtrów wewnątrz niego. Sprawdź też, czy korzystasz z WooCommerce 11.2 lub nowszego wydania zawierającego tę funkcję. WooCommerce w dokumentacji wiąże opcję Position: Sticky bezpośrednio z blokiem Product Filters.
Jeżeli edytujesz stronę opartą na wzorcu, który ogranicza zmianę układu, dokumentacja WooCommerce zaleca najpierw wybrać Edit pattern, a dopiero potem blok filtrów. Gdy nadal nie możesz znaleźć ustawienia, sprawdź, czy motyw udostępnia Edytor witryny dla szablonu, który chcesz zmienić.
Przyklejenie a nakładka: czym różnią się ustawienia?
Oba ustawienia dotyczą bloku Product Filters, ale kontrolują inne zachowanie. Position: Sticky określa, jak blok zachowuje się podczas przewijania. Overlay decyduje, czy filtry pozostają w treści strony, czy są wyświetlane jako nakładka. W WooCommerce tryb Mobile otwiera filtry w nakładce przy skonfigurowanym progu szerokości ekranu, a Always stosuje nakładkę przy każdej szerokości. Opcje te opisuje dokumentacja Product Filters.
| Ustawienie | Co zmienia | Kiedy rozważyć |
|---|---|---|
| Position: Sticky | Utrzymuje blok filtrów widoczny podczas przewijania w obrębie jego przewijalnego obszaru. | Długi katalog, w którym klient ma często zmieniać kryteria. |
| Overlay: Off | Wyświetla filtry bezpośrednio w treści strony. | Gdy filtry mają być od razu widoczne. |
| Overlay: Mobile | Pokazuje filtry jako nakładkę przy mniejszym widoku, zgodnie z progiem ustawionym w witrynie. | Gdy panel filtrów zajmowałby dużo miejsca na wąskim ekranie. |
| Overlay: Always | Pokazuje filtry jako nakładkę niezależnie od szerokości widoku. | Gdy chcesz udostępniać filtry przez osobny panel. |
Co sprawdzić po zapisaniu zmian
Samo włączenie Sticky nie zastępuje testu całego katalogu. WooCommerce opisuje Product Filters jako blok współpracujący z Product Collection; domyślnie zmiany filtrów aktualizują listę bez przeładowania całej strony. Jeśli w otaczającym bloku Product Collection włączono Reload full page, zastosowanie lub usunięcie filtra przeładuje stronę. Dokumentacja wyjaśnia zachowanie filtrowania i ustawienie przeładowania.
Po zapisaniu szablonu sprawdź:
- czy blok zatrzymuje się podczas przewijania i nie znika przed końcem obszaru, w którym ma działać;
- czy można wygodnie kliknąć filtry, gdy blok jest przyklejony;
- czy na telefonie filtry są widoczne albo otwierają się zgodnie z ustawieniem Overlay;
- czy zaznaczenie filtra rzeczywiście zmienia produkty w kolekcji;
- czy po usunięciu aktywnego filtra wracają poprzednie wyniki.
Warto obejrzeć zarówno podgląd edytora, jak i stronę sklepu. Wpis o WooCommerce 11.2 informuje, że przyklejanie filtrów jest nowością tej wersji, natomiast dokumentacja ustawień opisuje działanie bloku i jego opcje. Wsparcie dla konfigurowalnych progów widoku responsywnego WooCommerce wiąże z WordPressem 7.1. Jeśli sklep ma własny próg widoku tabletu lub telefonu, sprawdź, jak nakładka zachowuje się przy tym ustawieniu. Informację o breakpointach w WordPressie 7.1 podaje wpis deweloperski WooCommerce.
FAQ
Czy muszę dodawać blok Product Filters od nowa?
Nie, jeśli blok już znajduje się w szablonie katalogu. Zaznacz istniejący blok i zmień jego Position na Sticky. Jeśli go tam nie ma, dodaj go obok Product Collection. WooCommerce wymaga obecności kolekcji na tej samej stronie lub w tym samym szablonie.
Czy Sticky działa na stronach kategorii?
Blok jest kontekstowy i może filtrować produkty w odpowiednim katalogu lub archiwum taksonomii, w tym w szablonach katalogu produktów i taksonomii produktów. Zależnie od układu sklepu filtry mogą więc pojawiać się również przy kategoriach produktów.
Czy przyklejone filtry działają na telefonie?
WooCommerce udostępnia osobne ustawienie Overlay dla węższych widoków. Możesz zdecydować, czy filtry będą widoczne w treści, czy otwierane w nakładce. Po zmianie ustawień sprawdź podgląd na telefonie, bo nakładka i przyklejanie odpowiadają za różne elementy zachowania.
Czy przyklejenie wymaga kodu CSS?
Dokumentacja WooCommerce opisuje opcję Position: Sticky w ustawieniach stylu bloku Product Filters. Jeśli widzisz tę opcję, możesz włączyć przyklejenie bez dodawania własnego kodu.
Co dalej
Przyklejone filtry pomagają nawigować po długiej liście, a dobrze zaprojektowane kategorie ułatwiają klientom znalezienie właściwej grupy produktów. Przeczytaj też jak ułożyć kategorie sklepu w WooCommerce.