Filtre de produits horizontal au-dessus des produits WooCommerce

Un filtre en barre latérale occupe un tiers de la largeur de la boutique et, sur mobile, repousse les produits très bas dans la page. Un filtre de produits horizontal au‑dessus des produits dans WooCommerce donne à la grille toute la largeur et montre tous les choix d’un coup d’œil : une barre de listes déroulantes, ou des sections de filtre réparties sur deux à quatre colonnes. HUSKY n’a pas de « mode horizontal » distinct. La disposition vient de deux éléments : la largeur de l’emplacement où le filtre est affiché, et le CSS de ses blocs. Voici les trois façons de placer le filtre au‑dessus des produits, les dispositions en colonnes intégrées, le CSS pour une seule ligne, et des correctifs pour les problèmes de mise en page habituels.

L’emplacement du filtre détermine sa disposition

Chaque section du filtre (catégories, couleur, taille, prix) est un bloc portant la classe woof_container. Dans un widget de barre latérale, les blocs s’empilent parce que le widget est étroit. Affichés dans une zone large, les mêmes blocs peuvent se placer côte à côte, et le plugin fournit des classes qui les répartissent en colonnes. Il existe trois façons de placer le filtre au‑dessus des produits :

Le filtre automatique au‑dessus des produits

1. Allez dans WooCommerce → Réglages → Products Filter → Options et réglez Définir le filtre automatiquement (Set filter automatically) sur Oui (Yes), ou sur Oui, mais seulement sur ordinateur (Yes, but only for desktop) si les mobiles doivent avoir un autre filtre. Enregistrez.
2. Rechargez la page et ouvrez l’onglet Design. Deux options n’y apparaissent qu’une fois la première étape enregistrée : Masquer le filtre automatique par défaut (Hide auto filter by default) et Habillages du filtre automatique (Skins for the auto filter).
3. Réglez Masquer le filtre automatique par défaut (Hide auto filter by default) sur Non (No). Avec Oui (Yes), la valeur par défaut, les visiteurs ne voient qu’un bouton d’ouverture/fermeture, et le filtre s’ouvre comme un panneau par‑dessus les produits. C’est aussi un choix valable ; le bouton se personnalise avec Image de fermeture/ouverture du filtre automatique (Auto filter close/open image) et Texte de fermeture/ouverture du filtre automatique (Auto filter close/open text). Pour un panneau qui glisse depuis le bord de l’écran, consultez plutôt le filtre de produits off‑canvas.
4. Choisissez un habillage : Flat white, Flat grey ou Flat dark, avec 1, 2, 3 ou 4 colonnes. Par défaut (Default) est un habillage simple avec trois blocs par ligne.
5. Retirez le widget HUSKY de la barre latérale de la boutique pour que la page n’affiche pas deux filtres, et passez la boutique en mise en page pleine largeur dans le thème. Les habillages à 4 colonnes sont qualifiés de « sans barre latérale » pour cette raison : quatre blocs d’au moins 150 px ne tiennent pas à côté d’une barre latérale.

En coulisses, le plugin affiche [woof sid="flat_grey woof_auto_3_columns" ...] sur l’action WooCommerce woocommerce_before_shop_loop avec la priorité 2, avant les notifications, le nombre de résultats et la liste déroulante de tri. L’utilisation de cette action a deux conséquences :

• Le modèle du thème ou du constructeur de pages doit l’exécuter. Les thèmes classiques et le modèle d’archive propre à WooCommerce le font ; de nombreux modèles d’archive de constructeurs et grilles de produits personnalisées ne le font pas, et rien n’apparaît alors. Utilisez le shortcode dans ce cas.
• Lorsqu’une combinaison de filtres ne trouve rien, le modèle d’archive de WooCommerce exécute woocommerce_no_products_found au lieu de woocommerce_before_shop_loop. Après le rechargement de la page, le filtre automatique disparaît avec les produits, et le visiteur ne voit que le message « aucun produit » sans moyen de modifier sa sélection. En mode AJAX, le formulaire reste sur la page. L’extrait de shortcode de la section suivante gère ce cas.

Un filtre en shortcode réparti en colonnes

L’attribut sid de [woof] devient des classes CSS sur le formulaire du filtre. sid="flat_grey woof_auto_4_columns" produit woof_sid_flat_grey, qui donne les couleurs grises, et woof_auto_4_columns, qui répartit les blocs sur quatre colonnes. Les classes de colonnes de la feuille de style du plugin :

Chaque bloc est un bloc en ligne (inline‑block) d’une largeur minimale de 150 px ; sur les écrans étroits, les blocs se replient donc d’eux‑mêmes en moins de colonnes. Le premier mot n’a pas à être un habillage : [woof sid="topbar woof_auto_3_columns"] conserve l’apparence neutre du plugin et vous donne la classe woof_sid_topbar pour votre propre CSS.

Les colonnes demandent de la place. Une zone de widgets n’est large que comme la barre latérale ; placez donc le shortcode à un endroit en pleine largeur : un widget Shortcode dans une section Elementor ou Divi en pleine largeur, une page au‑dessus de [products] ou de [woof_products] (voir le filtre sur une page personnalisée), ou le modèle de la boutique. Pour l’afficher au‑dessus des produits sur les pages de la boutique et des archives de produits sans Définir le filtre automatiquement (Set filter automatically), accrochez‑le à la même action que celle utilisée par le plugin :

/*
 * HUSKY: filter in columns above the products on the shop and product archives.
 * Child theme functions.php or a code snippets plugin.
 * Keep "Set filter automatically" = No, otherwise the page shows two filters.
 */
function my_husky_top_filter() {
    if (is_shop() || is_product_taxonomy()) {
        echo do_shortcode('[woof sid="flat_grey woof_auto_4_columns"]');
    }
}
add_action('woocommerce_before_shop_loop', 'my_husky_top_filter', 1);

// WooCommerce skips woocommerce_before_shop_loop when nothing is found:
// keep the filter on the "no products" page too.
add_action('woocommerce_no_products_found', 'my_husky_top_filter', 5);

is_product_taxonomy() couvre les archives de catégories, d’étiquettes et d’attributs. La priorité 1 est importante : lorsque Essayer d’ajaxifier la boutique (Try to ajaxify the shop) est activé, le plugin ouvre la zone que l’AJAX remplace à la priorité 2 de la même action, et un filtre affiché après ce point se trouverait à l’intérieur et disparaîtrait après le premier filtrage. Une limite : le mode mobile, qui remplace le filtre par un bouton Ouvrir le filtre (Open filter) sur les téléphones, ne trouve pas un formulaire dont le sid comporte deux mots dans la version 3.4.6. Si vous avez besoin du mode mobile, donnez au formulaire un sid d’un seul mot et construisez la disposition avec le CSS de la section suivante ; le guide du filtre mobile en explique les détails.

Le shortcode [woof_front_builder] est l’alternative sans code. Il construit un formulaire de filtre directement sur la page, et ses options Mise en page (Layout) comprennent Largeur par défaut des sections du filtre (Default filter section width) : 25 % donne quatre sections par ligne, 50 % deux. Chaque section peut la remplacer par sa propre Largeur de la section (Section width). La FAQ sur l’insertion d’un filtre au‑dessus de la grille de produits montre comment afficher un tel formulaire au‑dessus des produits de la boutique.

Tous les filtres sur une seule ligne

Les colonnes conviennent aux listes de cases à cocher. Pour une barre fine, basculez les sections de l’onglet Structure vers des types d’affichage compacts : Liste déroulante (Drop-down), Liste déroulante multiple (Multi drop-down), Radio/Case à cocher dans une liste déroulante (Radio/Checkbox in drop-down) (des cases à cocher dans un panneau déroulant, voir la page de l’extension) ou Liste déroulante hiérarchique (Hierarchy drop-down) pour les catégories. Une liste déroulante affiche le nom du filtre comme première option ; vous pouvez donc désactiver les titres de blocs avec Afficher le libellé du titre (Show title label) dans les options supplémentaires de chaque section (l’icône d’engrenage) et gagner une ligne de hauteur. Laissez ensuite flexbox disposer les blocs. Pour un formulaire placé avec [woof sid="topbar"] :

/*
 * HUSKY: filter sections in one row above the products.
 * Advanced → Code → Custom CSS code, or the theme's Additional CSS.
 */
.woof_sid_topbar .woof_redraw_zone {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.woof_sid_topbar .woof_container {
    flex: 1 1 180px;      /* share the row, never narrower than 180px */
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;    /* drop-down panels must not be cut off */
}
.woof_sid_topbar .woof_submit_search_form_container {
    flex: 0 0 auto;       /* Filter and Reset buttons at the end of the row */
    margin: 0;
}
.woof_sid_topbar .chosen-container,
.woof_sid_topbar .select2-container {
    width: 100% !important;
}
@media (max-width: 767px) {
    .woof_sid_topbar .woof_container,
    .woof_sid_topbar .woof_submit_search_form_container {
        flex-basis: 100%;
    }
}

Cinq ou six listes déroulantes tiennent sur une ligne d’une zone de contenu de 1200 px ; au‑delà, elles passent sur une deuxième ligne au lieu d’être comprimées. Le bouton Filtrer (Filter) n’existe que lorsque Envoi automatique (Autosubmit) est désactivé, et Réinitialiser (Reset) seulement après une sélection ; le bloc des boutons est donc souvent vide et ne prend alors aucune place dans la ligne. En dessous de 768 px, chaque bloc occupe toute la largeur. Pour appliquer les mêmes règles au filtre automatique, remplacez .woof_sid_topbar par la classe de son habillage, par exemple .woof_sid_flat_grey, ou .woof_sid_auto_shortcode pour l’habillage Par défaut (Default).

Les termes d’un filtre en lignes ou en colonnes

Une longue colonne de tailles ou de marques est l’autre moitié du problème. Pour les cases à cocher et les boutons radio, ouvrez les options supplémentaires de la section dans Structure et réglez Afficher les éléments sur une ligne (Display items in a row) sur Oui (Yes) : les éléments s’alignent côte à côte et passent à la ligne. Cela s’applique aux termes sans sous‑catégories ; un parent qui a des enfants reste sur sa propre ligne pour que ses sous‑catégories puissent s’ouvrir en dessous.

Pour un nombre fixe de colonnes, utilisez une grille CSS sur la liste d’une section :

/* Sizes in three equal columns. Replace pa_size with your taxonomy slug. */
.woof .woof_container_pa_size ul.woof_list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 12px;
}

Chaque section porte la classe woof_container_ suivie du slug de sa taxonomie : woof_container_product_cat, woof_container_pa_color, woof_container_pa_size. Les listes de sous‑catégories ont leur propre classe, la grille ne s’applique donc qu’au premier niveau. Pour raccourcir une longue liste à la place, réglez Hauteur maximale du bloc (Max height of the block) dans les mêmes options supplémentaires ; la liste obtient alors sa propre barre de défilement. D’autres sélecteurs figurent dans le guide sur la mise en forme du filtre avec CSS.

Réparer une mise en page horizontale cassée

• Trouvez d’abord les noms de classes. Réglez Avancé (Advanced) → Options → Afficher le bouton d’aide aux blocs (Show blocks helper button) sur Oui (Yes). Les administrateurs voient alors un lien afficher l’aide aux blocs (show blocks helper) au‑dessus de chaque filtre qui possède un sid ; un clic étiquette chaque section avec sa classe, comme woof_container_pa_color, et affiche la classe du formulaire. Désactivez‑le ensuite, comme le décrit la FAQ sur le bouton d’aide.
• Les blocs s’empilent encore. Le conteneur est trop étroit (une zone de widgets ou une colonne de constructeur étroite), ou un ancien CSS personnalisé définit des largeurs ou des flottants sur .woof_container. Supprimez les essais précédents avant d’ajouter de nouvelles règles : mélanger des règles à base de flottants et de flex donne des résultats imprévisibles.
• Titres recouverts par des boîtes blanches, listes coupées. L’habillage automatique Par défaut (Default) limite chaque bloc à 250 px de hauteur avec sa propre barre de défilement, et les thèmes ajoutent souvent des flottants, des arrière‑plans ou des hauteurs fixes aux blocs situés dans la zone de contenu. Réinitialisez‑les pour votre formulaire, par exemple .woof_sid_auto_shortcode .woof_container { float: none; max-height: none; overflow: visible; }, ou passez à un habillage Flat.
• Un panneau déroulant s’ouvre derrière les produits. Donnez au formulaire son propre niveau d’empilement : .woof_sid_topbar { position: relative; z-index: 20; }.
• Mises en page de constructeurs. Dans Elementor ou Divi, placez le shortcode dans un widget ou module Shortcode à l’intérieur d’une section en pleine largeur au‑dessus des produits. La grille elle‑même doit être une grille que le filtre peut contrôler ; voir filtrer les grilles de boucle Elementor.
• Rien ne change après la modification du CSS. Videz le cache de pages ainsi que tout CSS combiné ou optimisé, puis testez en étant déconnecté.

Le CSS utilisé sur le site de démonstration propose d’autres exemples prêts à l’emploi de dispositions de filtres.

Liste de contrôle

• Un seul formulaire de filtre par page : le widget de la barre latérale retiré, ou Définir le filtre automatiquement (Set filter automatically) désactivé lorsque le shortcode est utilisé.
• Masquer le filtre automatique par défaut (Hide auto filter by default) réglé sur Non (No) si la barre doit toujours être visible.
• Le filtre se trouve dans un conteneur en pleine largeur ; pour quatre colonnes, la boutique n’a pas de barre latérale.
• Des colonnes issues d’une classe woof_auto_N_columns dans sid, ou un sid d’un seul mot plus du CSS lorsque le mode mobile est nécessaire.
• Des types d’affichage en liste déroulante pour une barre sur une ligne ; Afficher les éléments sur une ligne (Display items in a row) ou une grille pour les longues listes de cases à cocher.
• Caches vidés ; page vérifiée déconnecté, sur ordinateur et sur téléphone.

Si la mise en page est toujours cassée, ouvrez un sujet sur le forum de support HUSKY avec le lien de la page et le CSS que vous avez ajouté, et nous y jetterons un œil.