Filtr produktów off-canvas w WooCommerce: wysuwany panel i poprawki

4 November 2026

Filtr produktów off-canvas w WooCommerce utrzymuje stronę sklepu w czystości: filtr czeka w panelu przy krawędzi ekranu i wysuwa się, gdy odwiedzający dotknie zakładki lub przycisku Filtr (Filter). HUSKY ma to wbudowane jako rozszerzenie Slideout, więc nie potrzeba szuflady z motywu ani wtyczki wyskakujących okien. Ten poradnik wyjaśnia, jak działa panel, jak ograniczyć go do stron sklepu i kategorii, jak otwierać go własnym przyciskiem i zamykać po filtrowaniu oraz jak naprawić panel, który się nie przewija, chowa się za nagłówkiem albo w ogóle się nie pojawia.

Wysuwany panel, tryb mobilny lub szuflada z motywu

HUSKY oferuje trzy sposoby, by filtr nie rzucał się w oczy, dopóki nie jest potrzebny. Wybierz jeden na stronę; połączenie ich daje dwa filtry albo przycisk, który niczego nie może otworzyć.

Slideout (Zaawansowane (Advanced) → Slideout albo shortcode [woof_slideout]): panel przymocowany do lewej, prawej, górnej lub dolnej krawędzi okna, z zakładką, która go otwiera. Działa na komputerach i telefonach. Tego dotyczy ten poradnik.
Tryb mobilny: tylko na telefonach filtr jest zastąpiony przyciskiem Otwórz filtr (Open filter), który otwiera go jako panel na pełnym ekranie. Zobacz poradnik o filtrze mobilnym.
Filtr automatyczny z Ukryj auto filtr domyślnie (Hide auto filter by default) = Tak: przycisk nad produktami, który rozwija filtr nad siatką. Zobacz poziomy filtr nad produktami.

Szuflada lub boczny panel off-canvas z motywu albo kreatora stron też działa, o ile tylko pokazuje i ukrywa kod HTML filtra, który jest już na stronie w chwili jej ładowania. Jeśli szuflada wstawia swoją zawartość później, formularz nigdy nie zostaje zainicjowany i kliknięcia nic nie robią; poradnik o Elementorze pokazuje, jak rozpoznać taki przypadek. Takie szuflady potrzebują też własnego kodu, który zamknie je po filtrowaniu AJAX, opisanego w artykule różne filtry na urządzeniach mobilnych i komputerach.

Włącz wysuwany panel

Slideout to wbudowane rozszerzenie i jest zawsze aktywne. Jego ustawienia znajdują się w WooCommerce → Ustawienia → Filtr produktów (Products Filter) → Zaawansowane (Advanced) → Slideout:

Widoczność globalna (Global visibility): Pokaż (Show) dodaje panel automatycznie do stron WooCommerce.
Przycisk jako (Button as): jako obraz (as Image) używa Obraz wysuwanego panelu (Slideout image) w rozmiarze ustawionym przez Rozmiar obrazu przycisku (Button image size); jako tekst (as Text) pokazuje na zakładce Tekst wysuwanego panelu (Slideout text).
Pozycja (Position): krawędź, z której wysuwa się panel. Przesunięcie (Offset) to jego odległość od góry okna (pozycje lewa i prawa) albo od lewej strony (pozycje górna i dolna).
Akcja (Action): Kliknięcie (Click) lub Najechanie (Hover). Telefony nie mają najechania, więc użyj Kliknięcie (Click), gdy panel ma być dla nich.
Rozmiar kontenera (Container size): szerokość i wysokość panelu. Przy włączonej Widoczność globalna (Global visibility) i braku ustawionej szerokości panel ma 350px szerokości.
Stan po inicjalizacji (State after init): Nie (No) utrzymuje panel zamknięty po załadowaniu strony.
Zachowanie na urządzeniach mobilnych (Mobile behavior): Pokaż na wszystkich urządzeniach (Show on all devices), Pokaż tylko na urządzeniach mobilnych (Show only on mobile) lub Pokaż tylko na komputerach (Show only on desktop).

Przy włączonej Widoczność globalna (Global visibility) wtyczka wyświetla w stopce strony [woof_slideout ...][woof][/woof_slideout]: zwykły formularz filtra wewnątrz panelu z position: fixed, zaparkowanego poza oknem. Kliknięcie zakładki wysuwa go, a kliknięcie w dowolnym miejscu poza panelem chowa go z powrotem; wewnątrz nie ma przycisku zamykania. Ponieważ formularz od początku jest częścią strony, każdy typ filtra działa tak jak na pasku bocznym, także tryb AJAX.

Dwa szczegóły w wersji 3.4.6. Po pierwsze, „strony sklepu” w tej opcji oznaczają każdą stronę, na której is_woocommerce() z WooCommerce zwraca prawdę, a to obejmuje strony pojedynczych produktów. Po drugie, panel globalny zapisuje tekst zakładki w shortcodzie bez cudzysłowów, więc tekst z kilku słów jest ucinany przy pierwszej spacji: „Show filters” zmienia się w „Show”. Użyj tam tekstu jednowyrazowego albo poniższego shortcode'a, w którym możesz go ująć w cudzysłów. Zachowanie na urządzeniach mobilnych (Mobile behavior) jest ustalane na serwerze na podstawie identyfikacji przeglądarki, więc pamięć podręczna stron musi przechowywać osobne kopie dla telefonów i komputerów, jak wyjaśnia poradnik o urządzeniach mobilnych.

Pokaż panel tylko tam, gdzie chcesz

Aby kontrolować strony, ustaw Widoczność globalna (Global visibility) na Ukryj (Hide) i umieść shortcode samodzielnie. Przycisk Generuj shortcode (Generate shortcode) na dole zakładki Slideout zapisuje go na podstawie bieżących opcji; potem odśwież stronę zamiast zapisywać, jeśli te wartości nie mają stać się globalne, i ujmij w cudzysłów wartości ze spacjami. Typowy shortcode:

[woof_slideout location="left" image="null" text="Filters" width="320px" onloadslideout="false"]

image="null" zamienia zakładkę w zakładkę tekstową. Bez zawartości shortcode sam buduje wewnętrzny [woof] i przekazuje mu każdy atrybut, który nie jest ustawieniem slideout: tax_only, by_only, sid, btn_position, redirect i resztę atrybutów [woof]. Gdy między [woof_slideout] a [/woof_slideout] jest zawartość, wyświetlana jest ona zamiast tego, więc możliwy jest nagłówek i własny formularz: [woof_slideout text="Filters" image="null"]<h3>Filter products</h3>[woof btn_position="t"][/woof_slideout]. W tej postaci atrybuty [woof] trafiają do wewnętrznego shortcode'a.

Shortcode może znajdować się w treści strony lub w obszarze widżetów w stopce, ale nie na pasku bocznym, który motyw ukrywa na telefonach: panel jest wtedy wewnątrz tego paska i znika razem z nim. Aby pokazać panel tylko na stronach sklepu i archiwów produktów, wyświetl go z motywu:

/*
 * HUSKY: slide-out filter on the shop and product archive pages,
 * not on single products. Set Advanced → Slideout → Global visibility = Hide.
 * Child theme functions.php or a code snippets plugin.
 */
add_action('wp_footer', function () {
    if (!is_shop() && !is_product_taxonomy()) {
        return;
    }
    echo do_shortcode('[woof_slideout location="left" image="null" text="Filters" width="320px" onloadslideout="false"]');
}, 5);

Utrzymaj priorytet poniżej 10. Rozszerzenie zapisuje style szerokości i wysokości panelu we własnym wywołaniu zwrotnym stopki z priorytetem 10, używając ostatniego panelu wyświetlonego przed jego uruchomieniem; panel wyświetlony później nie dostaje rozmiaru. Dla innego filtra w każdej kategorii sprawdzaj is_product_category('shoes') i nadaj każdemu panelowi własne tax_only="pa_size,pa_color". Aby udostępnić panel także na stronach bloga lub stronie głównej, dodaj redirect="https://example.com/shop/", żeby wyniki otwierały się na stronie sklepu.

Używaj jednego panelu na stronę. Skrypt slideout przygotowuje tylko pierwszy znaleziony panel; drugi, na przykład panel globalny plus panel z shortcode'a, zachowuje startowy styl, który parkuje go poza oknem, więc jego zakładki brakuje albo jest źle umieszczona.

Otwórz go własnym przyciskiem i zamknij po filtrowaniu

Panel reaguje na trzy zdarzenia: open, close i toggle. Jeden szczegół ma znaczenie dla własnego przycisku: panel zamyka się po każdym kliknięciu poza nim, a przycisk w nagłówku jest poza nim. Jeśli zdarzenie kliknięcia biegnie dalej do dokumentu, panel otwiera się i w tej samej chwili znów zamyka. Poniższa obsługa to zatrzymuje, a także zamyka panel po każdym filtrowaniu AJAX, używając zdarzenia wtyczki woof_ajax_done:

/*
 * HUSKY slide-out panel: custom open/close buttons, close after AJAX filtering.
 * Child theme functions.php or a code snippets plugin.
 * Buttons: <a href="#" class="open-husky-filter">Filter</a>
 *          <a href="#" class="close-husky-filter">Close</a> (inside the panel)
 */
add_action('wp_footer', function () {
    ?>
    <script>
    jQuery(function ($) {
        $(document.body).on('click', '.open-husky-filter', function (e) {
            e.preventDefault();   // a link with href="#" would jump to the top
            e.stopPropagation();  // otherwise the outside-click rule closes it at once
            $('.woof-slide-out-div').trigger('toggle');
        });
        $(document.body).on('click', '.close-husky-filter', function (e) {
            e.preventDefault();
            $('.woof-slide-out-div').trigger('close');
        });
        $(document).on('woof_ajax_done', function () {
            $('.woof-slide-out-div').trigger('close');
        });
    });
    </script>
    <?php
}, 100);

Aby używać tylko własnego przycisku, ukryj zakładkę za pomocą .woof-slide-out-div .woof-handle { display: none; }. Link zamykający umieść w panelu przez zawartość shortcode'a, przed [woof].

Zamykanie po filtrowaniu pasuje do przycisku Filtr (Filter). Przy włączonym Autowysyłanie (Autosubmit) każde kliknięcie filtruje, a panel zamykałby się po każdym wyborze; ustaw Autowysyłanie (Autosubmit) na Nie (No) w zakładce Opcje (Options), aby odwiedzający dokonali wszystkich wyborów, a panel zamknął się raz. Bez AJAX strona przeładowuje się po filtrowaniu, a panel startuje zamknięty, pod warunkiem że Stan po inicjalizacji (State after init) to Nie (No). Dopóki ustawienia wtyczki nie zostaną zapisane po raz pierwszy, shortcode bez onloadslideout otwiera się przy każdym załadowaniu strony; przykłady ustawiają onloadslideout="false", by od tego nie zależeć.

Zakładka, kolory, rozmiar i przewijanie

Skrypt panelu ustawia kilka wartości bezpośrednio w atrybucie style, więc niektóre reguły wymagają !important, a jego arkusz stylów ładuje się w stopce, po większości innych, więc niektóre selektory zaczynają się od body:

/* HUSKY slide-out panel. Advanced → Code → Custom CSS code,
   or the theme's Additional CSS. */

/* Tab colours; an image tab gets its background inline */
.woof-slide-out-div .woof-handle {
    background-color: #f5c200 !important;
    color: #000;
}

/* Left or right position: move only the tab down, not the panel */
.woof-slide-out-div .woof-handle {
    top: 40px !important;
}

/* No transparency, above sticky headers and cookie bars */
body .woof-slide-out-div {
    opacity: 1 !important;
    z-index: 100000;
}

/* Scroll inside the panel when the filter is longer than the screen */
.woof-slide-out-div .woof-slide-content {
    max-height: calc(100vh - 140px); /* 100px offset + room at the bottom */
    overflow-y: auto;
}

/* Dim the page while the panel is open; a click on the dark area closes it */
.woof-slide-out-div.ui-slideouttab-open {
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
}

Dlaczego potrzebna jest reguła przewijania: po załadowaniu strony skrypt zmniejsza panel, by pasował do ekranu, jeśli jest zbyt wysoki lub zbyt szeroki, ale robi to tylko raz. Sekcje, które otwierają się później, lista „pokaż więcej” albo obrócony telefon sprawiają, że zawartość jest wyższa niż okno, i dolnej części nie da się dosięgnąć. max-height z overflow-y: auto zapewnia pasek przewijania w każdym stanie. Odejmowaną wartość ustaw jako swoje Przesunięcie (Offset) plus trochę zapasu.

Panel jest domyślnie w 95% nieprzezroczysty, przez co na telefonach prześwitują przez niego produkty. Jego poziom warstwy to 9999; przyklejony nagłówek, nakładka motywu lub baner cookie o wyższym poziomie zasłania go albo przejmuje jego kliknięcia, co wygląda jak filtr, którego nie można kliknąć. Jeśli podniesienie panelu nie pomaga, sprawdź element, który leży na wierzchu, i obniż jego z-index.

Gdy panel nie działa

Zakładki brakuje na telefonach. Shortcode jest na pasku bocznym, który motyw ukrywa na małych ekranach, Zachowanie na urządzeniach mobilnych (Mobile behavior) wyklucza telefony albo pamięć podręczna stron serwuje kopię dla komputerów.
Panel jest na stronach produktów lub wszędzie. Widoczność globalna (Global visibility) to Pokaż (Show); przełącz na Ukryj (Hide) i użyj fragmentu kodu do stopki.
Otwiera się przy każdym załadowaniu strony. Ustaw Stan po inicjalizacji (State after init) na Nie (No) i dodaj onloadslideout="false" do swoich shortcode'ów.
Pojawia się lub działa tylko jedna z dwóch zakładek. Na stronie są dwa panele; zostaw jeden.
Zakładka pojawia się późno lub nic nie robi. Optymalizacja JavaScript opóźnia lub łączy skrypty wtyczki. Wyklucz /wp-content/plugins/woocommerce-products-filter/ z opóźniania i łączenia, jak opisuje poradnik o wtyczkach optymalizujących, i wyczyść wszystkie pamięci podręczne.
Filtrowanie startuje z panelu, ale produkty się nie zmieniają. To problem siatki produktów, a nie panelu; obowiązują te same przyczyny co dla filtra na pasku bocznym, zobacz adres URL się zmienia, a produkty zostają takie same.

Lista kontrolna

Jeden sposób ukrywania filtra na stronę: Slideout, tryb mobilny, przycisk filtra automatycznego albo szuflada z motywu.
Jeden panel na stronę; Widoczność globalna (Global visibility) ustawiona na Ukryj (Hide), gdy shortcode umieszczasz samodzielnie.
Shortcode poza paskami bocznymi, które motyw ukrywa na telefonach, albo wyświetlony z wp_footer z priorytetem poniżej 10.
Zakładka tekstowa z cudzysłowami: image="null" text="Show filters"; onloadslideout="false".
Własne przyciski zatrzymują dotarcie kliknięcia do dokumentu; panel zamyka się na woof_ajax_done.
Zawartość panelu ograniczona przez max-height i przewijalna; z-index powyżej nagłówka.

Jeśli panel nadal działa nieprawidłowo, załóż temat na forum wsparcia HUSKY, podając link do strony oraz używany shortcode lub ustawienia, a my to sprawdzimy.