Filtre de produits WooCommerce off-canvas : panneau coulissant et correctifs

4 November 2026

Un filtre de produits WooCommerce off-canvas garde la page boutique épurée : le filtre attend dans un panneau au bord de l’écran et glisse en place lorsque le visiteur touche un onglet ou un bouton Filtrer (Filter). HUSKY intègre cette fonction sous la forme de l’extension Slideout ; aucun tiroir de thème ni plugin de popup n’est nécessaire. Ce guide explique comment fonctionne le panneau, comment le limiter à la boutique et aux pages de catégories, comment l’ouvrir depuis votre propre bouton et le refermer après le filtrage, et comment réparer un panneau qui ne défile pas, qui passe derrière l’en-tête ou qui n’apparaît pas du tout.

Panneau coulissant, mode mobile ou tiroir du thème

HUSKY propose trois façons de garder le filtre hors de vue jusqu’à ce qu’il soit utile. Choisissez‑en une par page ; les combiner donne deux filtres, ou un bouton qui ne peut rien ouvrir.

Slideout (Avancé (Advanced) → Slideout, ou le shortcode [woof_slideout]) : un panneau fixé au bord gauche, droit, supérieur ou inférieur de la fenêtre, avec un onglet qui l’ouvre. Fonctionne sur ordinateur et sur mobile. C’est le sujet de ce guide.
Mode mobile : sur téléphone uniquement, le filtre est remplacé par un bouton Ouvrir le filtre (Open filter) qui l’ouvre en panneau plein écran. Voir le guide du filtre mobile.
Le filtre automatique avec Masquer le filtre automatique par défaut (Hide auto filter by default) = Oui : un bouton au‑dessus des produits qui fait descendre le filtre par‑dessus la grille. Voir le filtre horizontal au‑dessus des produits.

Un tiroir ou une barre latérale off-canvas du thème ou d’un constructeur de pages fonctionne aussi, à condition qu’il ne fasse qu’afficher et masquer du HTML de filtre déjà présent dans la page au chargement. Si le tiroir insère son contenu plus tard, le formulaire n’est jamais initialisé et les clics ne font rien ; le guide Elementor montre comment reconnaître ce cas. Ces tiroirs ont aussi besoin de leur propre code pour se fermer après un filtrage AJAX, décrit dans des filtres différents pour mobile et ordinateur.

Activer le panneau coulissant

Slideout est une extension intégrée, toujours active. Ses réglages se trouvent dans WooCommerce → Réglages → Products Filter → Avancé (Advanced) → Slideout :

Visibilité globale (Global visibility) : Afficher (Show) ajoute automatiquement le panneau aux pages WooCommerce.
Bouton en tant que (Button as) : en tant qu’image (as Image) utilise Image du Slideout (Slideout image) à la taille définie par Taille de l’image du bouton (Button image size) ; en tant que texte (as Text) affiche Texte du Slideout (Slideout text) sur l’onglet.
Position : le bord depuis lequel le panneau glisse. Décalage (Offset) est sa distance par rapport au haut de la fenêtre (positions gauche et droite) ou à la gauche (positions haut et bas).
Action : Clic (Click) ou Survol (Hover). Les téléphones n’ont pas de survol ; utilisez donc Clic (Click) lorsque le panneau leur est destiné.
Taille du conteneur (Container size) : largeur et hauteur du panneau. Avec Visibilité globale (Global visibility) activée et aucune largeur définie, le panneau fait 350 px de large.
État après l’initialisation (State after init) : Non (No) garde le panneau fermé au chargement de la page.
Comportement mobile (Mobile behavior) : Afficher sur tous les appareils (Show on all devices), Afficher uniquement sur mobile (Show only on mobile) ou Afficher uniquement sur ordinateur (Show only on desktop).

Avec Visibilité globale (Global visibility) activée, le plugin affiche [woof_slideout ...][woof][/woof_slideout] dans le pied de page : un formulaire de filtre ordinaire placé dans un panneau en position: fixed, garé hors de la fenêtre. Un clic sur l’onglet le fait glisser en place, et un clic n’importe où en dehors du panneau le fait repartir ; il n’y a pas de bouton de fermeture à l’intérieur. Comme le formulaire fait partie de la page dès le départ, tous les types de filtres fonctionnent comme dans une barre latérale, mode AJAX compris.

Deux précisions pour la version 3.4.6. Premièrement, les « pages de la boutique » dans l’option désignent toutes les pages où is_woocommerce() de WooCommerce vaut vrai, ce qui inclut les pages de produit unique. Deuxièmement, le panneau global écrit le texte de l’onglet dans le shortcode sans guillemets, de sorte qu’un texte de plusieurs mots est coupé au premier espace : « Afficher les filtres » devient « Afficher ». Utilisez-y un texte d’un seul mot, ou le shortcode ci‑dessous, où vous pouvez le mettre entre guillemets. Le Comportement mobile (Mobile behavior) est décidé côté serveur à partir de l’identification du navigateur ; un cache de pages doit donc conserver des copies séparées pour les téléphones et les ordinateurs, comme l’explique le guide mobile.

Afficher le panneau uniquement là où vous le souhaitez

Pour contrôler les pages, réglez Visibilité globale (Global visibility) sur Masquer (Hide) et placez vous‑même le shortcode. Le bouton Générer le shortcode (Generate shortcode) en bas de l’onglet Slideout en écrit un à partir des options actuelles ; rechargez ensuite la page au lieu d’enregistrer si ces valeurs ne doivent pas devenir les valeurs globales, et mettez entre guillemets les valeurs contenant des espaces. Un shortcode type :

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

image="null" transforme l’onglet en onglet de texte. Sans contenu, le shortcode construit lui‑même le [woof] interne et lui transmet chaque attribut qui n’est pas un réglage du slideout : tax_only, by_only, sid, btn_position, redirect et le reste des attributs de [woof]. Avec du contenu entre [woof_slideout] et [/woof_slideout], c’est ce contenu qui est affiché à la place, ce qui permet un titre et un formulaire personnalisé : [woof_slideout text="Filters" image="null"]<h3>Filter products</h3>[woof btn_position="t"][/woof_slideout]. Dans cette forme, les attributs de [woof] se placent sur le shortcode interne.

Le shortcode peut se trouver dans le contenu de la page ou dans une zone de widgets du pied de page, mais pas dans une barre latérale que le thème masque sur téléphone : le panneau se trouve dans cette barre latérale et disparaît avec elle. Pour n’afficher le panneau que sur la boutique et les archives de produits, affichez‑le depuis le thème :

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

Gardez une priorité inférieure à 10. L’extension écrit les styles de largeur et de hauteur du panneau dans son propre rappel de pied de page à la priorité 10, en utilisant le dernier panneau affiché avant son exécution ; un panneau affiché plus tard ne reçoit aucune taille. Pour un filtre différent par catégorie, testez is_product_category('shoes') et donnez à chaque panneau son propre tax_only="pa_size,pa_color". Pour proposer aussi le panneau sur les pages du blog ou d’accueil, ajoutez redirect="https://example.com/shop/" afin que les résultats s’ouvrent sur la page boutique.

Utilisez un seul panneau par page. Le script du slideout ne prépare que le premier panneau qu’il trouve ; un second, par exemple le panneau global plus un panneau en shortcode, conserve le style de démarrage qui le gare hors de la fenêtre, de sorte que son onglet est absent ou mal placé.

L’ouvrir depuis votre propre bouton et le fermer après le filtrage

Le panneau réagit à trois événements : open, close et toggle. Un détail compte pour un bouton personnalisé : le panneau se ferme au moindre clic en dehors de lui, et un bouton situé dans l’en-tête est en dehors. Si l’événement de clic se propage jusqu’au document, le panneau s’ouvre et se referme au même instant. Le gestionnaire ci‑dessous l’empêche et ferme aussi le panneau après chaque filtrage AJAX, grâce à l’événement woof_ajax_done du plugin :

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

Pour n’utiliser que votre bouton, masquez l’onglet avec .woof-slide-out-div .woof-handle { display: none; }. Placez le lien de fermeture dans le panneau via le contenu du shortcode, avant [woof].

Fermer après le filtrage convient à un bouton Filtrer (Filter). Avec Envoi automatique (Autosubmit) activé, chaque clic filtre et le panneau se fermerait après chaque choix ; réglez Envoi automatique (Autosubmit) sur Non (No) dans l’onglet Options pour que les visiteurs fassent tous leurs choix et que le panneau se ferme une seule fois. Sans AJAX, la page se recharge après le filtrage et le panneau démarre fermé, pourvu que État après l’initialisation (State after init) soit sur Non (No). Tant que les réglages du plugin n’ont pas été enregistrés une première fois, un shortcode sans onloadslideout s’ouvre à chaque chargement de page ; les exemples définissent onloadslideout="false" pour ne pas dépendre de ce comportement.

Onglet, couleurs, taille et défilement

Le script du panneau définit quelques valeurs en ligne, certaines règles nécessitent donc !important, et sa feuille de style se charge dans le pied de page, après la plupart des autres, de sorte que certains sélecteurs commencent par 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);
}

Pourquoi la règle de défilement est nécessaire : au chargement de la page, le script réduit le panneau pour qu’il tienne à l’écran s’il est trop haut ou trop large, mais une seule fois. Des sections qui s’ouvrent plus tard, une liste « afficher plus » ou un téléphone pivoté rendent le contenu plus haut que la fenêtre, et la partie basse devient inaccessible. Un max-height avec overflow-y: auto conserve une barre de défilement dans tous les états. Réglez la valeur soustraite sur votre Décalage (Offset) plus un peu de marge.

Le panneau est opaque à 95 % par défaut, ce qui laisse transparaître les produits sur mobile. Son niveau d’empilement est 9999 ; un en-tête fixe, une surcouche du thème ou une bannière de cookies avec un niveau plus élevé le recouvre ou capte ses clics, ce qui donne l’impression d’un filtre sur lequel on ne peut pas cliquer. Si relever le panneau ne suffit pas, inspectez l’élément qui se trouve au‑dessus et abaissez son z-index.

Lorsque le panneau ne fonctionne pas

L’onglet est absent sur mobile. Le shortcode se trouve dans une barre latérale que le thème masque sur les petits écrans, le Comportement mobile (Mobile behavior) exclut les téléphones, ou un cache de pages sert la copie pour ordinateur.
Le panneau apparaît sur les pages de produit ou partout. Visibilité globale (Global visibility) est sur Afficher (Show) ; passez‑la sur Masquer (Hide) et utilisez l’extrait de pied de page.
Il s’ouvre à chaque chargement de page. Réglez État après l’initialisation (State after init) sur Non (No) et ajoutez onloadslideout="false" à vos shortcodes.
Un seul des deux onglets apparaît ou fonctionne. Deux panneaux sont présents sur la page ; n’en gardez qu’un.
L’onglet apparaît tardivement ou ne fait rien. L’optimisation JavaScript retarde ou combine les scripts du plugin. Excluez /wp-content/plugins/woocommerce-products-filter/ du report et de la combinaison, comme décrit dans le guide sur les plugins d’optimisation, et videz tous les caches.
Le filtrage démarre depuis le panneau mais les produits ne changent pas. Le problème vient de la grille de produits, pas du panneau ; les mêmes causes s’appliquent que pour un filtre dans une barre latérale, voir l’URL change mais les produits restent les mêmes.

Liste de contrôle

Une seule manière de masquer le filtre par page : Slideout, mode mobile, le bouton du filtre automatique ou un tiroir du thème.
Un seul panneau par page ; Visibilité globale (Global visibility) sur Masquer (Hide) lorsque vous placez vous‑même le shortcode.
Le shortcode en dehors des barres latérales que le thème masque sur téléphone, ou affiché depuis wp_footer avec une priorité inférieure à 10.
Onglet de texte avec guillemets : image="null" text="Show filters" ; onloadslideout="false".
Les boutons personnalisés empêchent le clic d’atteindre le document ; le panneau se ferme sur woof_ajax_done.
Contenu du panneau limité par max-height et défilable ; z-index au‑dessus de l’en-tête.

Si le panneau se comporte toujours mal, ouvrez un sujet sur le forum de support HUSKY avec le lien de la page et le shortcode ou les réglages que vous utilisez, et nous le vérifierons.