WooCommerce Off-Canvas Produktfilter: Slideout-Panel einrichten und reparieren

4 November 2026

Ein WooCommerce Off-Canvas Produktfilter hält die Shop-Seite aufgeräumt: Der Filter wartet in einem Panel am Bildschirmrand und gleitet herein, wenn der Besucher auf einen Tab oder eine Schaltfläche Filtern (Filter) tippt. HUSKY bringt dies als Erweiterung Slideout mit, sodass weder eine Theme-Schublade noch ein Popup-Plugin nötig ist. Diese Anleitung erklärt, wie das Panel funktioniert, wie Sie es auf Shop- und Kategorieseiten beschränken, wie Sie es über einen eigenen Button öffnen und nach dem Filtern schließen und wie Sie ein Panel reparieren, das nicht scrollt, sich hinter der Kopfzeile versteckt oder gar nicht erscheint.

Slide-out-Panel, mobiler Modus oder Theme-Schublade

HUSKY bietet drei Wege, den Filter aus dem Blickfeld zu halten, bis er gebraucht wird. Wählen Sie einen pro Seite; werden sie kombiniert, entstehen zwei Filter oder eine Schaltfläche, die nichts öffnen kann.

Slideout (Erweitert (Advanced) → Herausgleiten (Slideout) oder der Shortcode [woof_slideout]): ein Panel, das am linken, rechten, oberen oder unteren Rand des Fensters fixiert ist, mit einem Tab, der es öffnet. Funktioniert auf Computern und Smartphones. Darum geht es in dieser Anleitung.
Mobiler Modus: Nur auf Smartphones wird der Filter durch eine Schaltfläche Filter öffnen (Open filter) ersetzt, die ihn als Vollbild-Panel öffnet. Siehe die Anleitung zum mobilen Filter.
Der automatische Filter mit Automatischen Filter standardmäßig ausblenden (Hide auto filter by default) = Ja: eine Schaltfläche über den Produkten, die den Filter über dem Raster herunterklappt. Siehe der horizontale Filter über den Produkten.

Auch eine Schublade oder eine Off-Canvas-Seitenleiste aus dem Theme oder einem Page Builder funktioniert, solange sie nur Filter-HTML ein- und ausblendet, das beim Laden bereits in der Seite steht. Fügt die Schublade ihren Inhalt erst später ein, wird das Formular nie initialisiert, und Klicks bewirken nichts; die Elementor-Anleitung zeigt, wie Sie diesen Fall erkennen. Solche Schubladen brauchen außerdem eigenen Code, um sich nach dem AJAX-Filtern zu schließen, beschrieben unter verschiedene Filter für Mobilgeräte und Desktop.

Das Slide-out-Panel einschalten

Slideout ist eine eingebaute Erweiterung und immer aktiv. Ihre Einstellungen finden Sie unter WooCommerce → Einstellungen → Products Filter → Erweitert (Advanced) → Herausgleiten (Slideout):

Globale Sichtbarkeit (Global visibility): Zeigen (Show) fügt das Panel automatisch zu WooCommerce-Seiten hinzu.
Button als (Button as): als Bild (as Image) verwendet das Slideout-Bild (Slideout image) in der Größe, die Bildgröße des Buttons (Button image size) festlegt; als Text (as Text) zeigt den Slideout-Text (Slideout text) auf dem Tab.
Position: der Rand, von dem das Panel hereingleitet. Offset ist sein Abstand vom oberen Fensterrand (bei linker und rechter Position) oder vom linken (bei oberer und unterer).
Aktion (Action): Klicke (Click) oder Schweben (Hover). Smartphones kennen kein Hover, verwenden Sie daher Klicke (Click), wenn das Panel für sie gedacht ist.
Containergröße (Container size): Breite und Höhe des Panels. Ist Globale Sichtbarkeit (Global visibility) eingeschaltet und keine Breite festgelegt, ist das Panel 350px breit.
Zustand nach Initialisierung (State after init): Nein (No) hält das Panel beim Laden der Seite geschlossen.
Mobile-Verhalten (Mobile behavior): Auf allen Geräten anzeigen (Show on all devices), Nur auf dem Handy anzeigen (Show only on mobile) oder Nur auf dem Desktop anzeigen (Show only on desktop).

Bei eingeschalteter Globaler Sichtbarkeit (Global visibility) gibt das Plugin [woof_slideout ...][woof][/woof_slideout] im Fußbereich der Seite aus: ein gewöhnliches Filterformular in einem Panel mit position: fixed, außerhalb des Fensters geparkt. Ein Klick auf den Tab lässt es hereingleiten, ein Klick irgendwo außerhalb des Panels lässt es wieder hinausgleiten; im Panel gibt es keine Schließen-Schaltfläche. Weil das Formular von Anfang an Teil der Seite ist, funktioniert jeder Filtertyp wie in einer Seitenleiste, den AJAX-Modus eingeschlossen.

Zwei Details in Version 3.4.6. Erstens bedeutet „Shop-Seiten" in der Option jede Seite, auf der is_woocommerce() von WooCommerce wahr ist, und dazu gehören auch einzelne Produktseiten. Zweitens schreibt das globale Panel den Tab-Text ohne Anführungszeichen in den Shortcode, sodass ein Text aus mehreren Wörtern am ersten Leerzeichen abgeschnitten wird: „Filter anzeigen" wird zu „Filter". Verwenden Sie dort einen Text aus einem Wort oder den untenstehenden Shortcode, in dem Sie ihn in Anführungszeichen setzen können. Mobile-Verhalten (Mobile behavior) wird auf dem Server anhand der Browserkennung entschieden, sodass ein Seiten-Cache getrennte Kopien für Smartphones und Computer vorhalten muss, wie in der Anleitung zum mobilen Filter erklärt.

Das Panel nur dort anzeigen, wo Sie es wollen

Für die Kontrolle über die Seiten setzen Sie Globale Sichtbarkeit (Global visibility) auf Ausblenden (Hide) und platzieren den Shortcode selbst. Die Schaltfläche Shortcode erstellen (Generate shortcode) am Ende des Tabs Slideout erzeugt einen aus den aktuellen Optionen; laden Sie die Seite danach neu, statt zu speichern, wenn diese Werte nicht zu den globalen werden sollen, und setzen Sie Werte mit Leerzeichen in Anführungszeichen. Ein typischer Shortcode:

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

image="null" macht den Tab zu einem Text-Tab. Ohne Inhalt baut der Shortcode das innere [woof] selbst auf und gibt ihm jedes Attribut weiter, das keine Slideout-Einstellung ist: tax_only, by_only, sid, btn_position, redirect und die übrigen [woof]-Attribute. Steht Inhalt zwischen [woof_slideout] und [/woof_slideout], wird stattdessen dieser Inhalt angezeigt, sodass eine Überschrift und ein eigenes Formular möglich sind: [woof_slideout text="Filters" image="null"]<h3>Filter products</h3>[woof btn_position="t"][/woof_slideout]. In dieser Form gehören die [woof]-Attribute an den inneren Shortcode.

Der Shortcode kann im Seiteninhalt oder in einem Widget-Bereich im Fuß stehen, aber nicht in einer Seitenleiste, die das Theme auf Smartphones ausblendet: Das Panel liegt in dieser Seitenleiste und verschwindet mit ihr. Um das Panel nur auf dem Shop und den Produktarchiven anzuzeigen, geben Sie es aus dem Theme aus:

/*
 * 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);

Halten Sie die Priorität unter 10. Die Erweiterung schreibt die Breiten- und Höhenstile des Panels in ihrem eigenen Footer-Callback mit Priorität 10, wobei sie das letzte Panel verwendet, das vor ihrem Lauf ausgegeben wurde; ein später ausgegebenes Panel erhält keine Größe. Für einen anderen Filter pro Kategorie prüfen Sie is_product_category('shoes') und geben jedem Panel sein eigenes tax_only="pa_size,pa_color". Um das Panel auch auf Blog- oder Startseiten anzubieten, fügen Sie redirect="https://example.com/shop/" hinzu, damit die Ergebnisse auf der Shop-Seite geöffnet werden.

Verwenden Sie ein Panel pro Seite. Das Slideout-Skript bereitet nur das erste Panel vor, das es findet; ein zweites, zum Beispiel das globale Panel plus ein Shortcode-Panel, behält den Startstil, der es außerhalb des Fensters parkt, sodass sein Tab fehlt oder falsch platziert ist.

Über einen eigenen Button öffnen und nach dem Filtern schließen

Das Panel reagiert auf drei Ereignisse: open, close und toggle. Ein Detail ist bei einem eigenen Button wichtig: Das Panel schließt sich bei jedem Klick außerhalb seiner selbst, und ein Button in der Kopfzeile liegt außerhalb. Wandert das Klick-Ereignis weiter zum Dokument, öffnet und schließt sich das Panel im selben Moment wieder. Der Handler unten verhindert das und schließt das Panel außerdem nach jedem AJAX-Filtern, mithilfe des Ereignisses woof_ajax_done des Plugins:

/*
 * 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);

Wenn Sie nur Ihren eigenen Button verwenden möchten, blenden Sie den Tab mit .woof-slide-out-div .woof-handle { display: none; } aus. Setzen Sie den Schließen-Link über den Shortcode-Inhalt vor [woof] in das Panel.

Das Schließen nach dem Filtern passt zu einer Schaltfläche Filtern (Filter). Bei eingeschalteter Automatischer Übermittlung (Autosubmit) filtert jeder Klick, und das Panel würde sich nach jeder Auswahl schließen; setzen Sie Automatische Übermittlung (Autosubmit) im Tab Optionen (Options) auf Nein (No), damit Besucher alle Auswahlen treffen und das Panel sich einmal schließt. Ohne AJAX lädt die Seite nach dem Filtern neu, und das Panel startet geschlossen, sofern Zustand nach Initialisierung (State after init) auf Nein (No) steht. Bis die Plugin-Einstellungen zum ersten Mal gespeichert wurden, öffnet sich ein Shortcode ohne onloadslideout bei jedem Laden der Seite; die Beispiele setzen onloadslideout="false", um davon unabhängig zu sein.

Tab, Farben, Größe und Scrollen

Das Skript des Panels setzt einige Werte inline, sodass manche Regeln !important brauchen, und sein Stylesheet wird im Fußbereich nach den meisten anderen geladen, sodass manche Selektoren mit body beginnen:

/* 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);
}

Warum die Scroll-Regel nötig ist: Beim Laden der Seite verkleinert das Skript das Panel passend zum Bildschirm, wenn es zu hoch oder zu breit ist, aber nur einmal. Abschnitte, die sich später öffnen, eine „Mehr anzeigen"-Liste oder ein gedrehtes Smartphone machen den Inhalt höher als das Fenster, und der untere Teil ist nicht erreichbar. Ein max-height mit overflow-y: auto hält in jedem Zustand eine Bildlaufleiste bereit. Setzen Sie den abgezogenen Wert auf Ihren Offset plus etwas Spielraum.

Das Panel ist standardmäßig zu 95% deckend, wodurch auf Smartphones Produkte durchscheinen. Seine Stapelebene ist 9999; eine fixierte Kopfzeile, ein Theme-Overlay oder ein Cookie-Banner mit einem höheren Wert verdeckt es oder fängt seine Klicks ab, was wie ein Filter aussieht, der sich nicht anklicken lässt. Hilft das Anheben des Panels nicht, untersuchen Sie das Element, das darüberliegt, und senken Sie dessen z-index.

Wenn das Panel nicht funktioniert

Der Tab fehlt auf Smartphones. Der Shortcode steht in einer Seitenleiste, die das Theme auf kleinen Bildschirmen ausblendet, Mobile-Verhalten (Mobile behavior) schließt Smartphones aus, oder ein Seiten-Cache liefert die Desktop-Kopie aus.
Das Panel erscheint auf Produktseiten oder überall. Globale Sichtbarkeit (Global visibility) steht auf Zeigen (Show); stellen Sie sie auf Ausblenden (Hide) und verwenden Sie das Footer-Snippet.
Es öffnet sich bei jedem Laden der Seite. Setzen Sie Zustand nach Initialisierung (State after init) auf Nein (No) und fügen Sie Ihren Shortcodes onloadslideout="false" hinzu.
Nur einer von zwei Tabs erscheint oder funktioniert. Auf der Seite sind zwei Panels; behalten Sie eines.
Der Tab erscheint spät oder tut nichts. Die JavaScript-Optimierung verzögert oder kombiniert die Skripte des Plugins. Schließen Sie /wp-content/plugins/woocommerce-products-filter/ von Verzögern und Kombinieren aus, wie in der Anleitung zu Optimierungs-Plugins beschrieben, und leeren Sie alle Caches.
Das Filtern startet aus dem Panel, aber die Produkte ändern sich nicht. Das liegt am Produktraster, nicht am Panel; es gelten dieselben Ursachen wie bei einem Filter in einer Seitenleiste, siehe die URL ändert sich, aber die Produkte bleiben gleich.

Checkliste

Eine Möglichkeit, den Filter zu verbergen, pro Seite: Slideout, mobiler Modus, die Schaltfläche des automatischen Filters oder eine Theme-Schublade.
Ein Panel pro Seite; Globale Sichtbarkeit (Global visibility) auf Ausblenden (Hide), wenn Sie den Shortcode selbst platzieren.
Der Shortcode außerhalb von Seitenleisten, die das Theme auf Smartphones ausblendet, oder aus wp_footer mit einer Priorität unter 10 ausgegeben.
Text-Tab mit Anführungszeichen: image="null" text="Show filters"; onloadslideout="false".
Eigene Buttons verhindern, dass der Klick das Dokument erreicht; das Panel schließt sich bei woof_ajax_done.
Panel-Inhalt mit max-height begrenzt und scrollbar; z-index über der Kopfzeile.

Wenn sich das Panel weiterhin falsch verhält, eröffnen Sie im HUSKY-Support-Forum ein Thema mit dem Link zur Seite und dem Shortcode oder den Einstellungen, die Sie verwenden, und wir prüfen es.