Comment afficher différents filtres WooCommerce par catégorie (filtrage dynamique)

Apprenez à afficher différents ensembles de filtres en fonction des catégories de produits, à créer un filtrage dépendant et à personnaliser les filtres pour la page Boutique WooCommerce.

Le problème

Par défaut, WOOF affiche les mêmes filtres sur toutes les pages. Cependant, différentes catégories de produits nécessitent souvent des options de filtre différentes :

Exemples de scénarios :

Catégorie Électronique : Afficher Marque, Taille d'écran, Stockage, RAM
Catégorie Vêtements : Afficher Taille, Couleur, Matière, Style
Catégorie Meubles : Afficher Matière, Couleur, Dimensions, Type de pièce
Page Boutique (archive principale) : Afficher uniquement Catégories, Fourchette de prix, Marques en vedette

Limitation actuelle : Toutes les options de filtre restent globales, même après qu'un utilisateur sélectionne une catégorie, ce qui encombre l'interface avec des filtres non pertinents.

Ce que vous apprendrez :

Comment activer le filtrage dépendant/conditionnel (les filtres se mettent à jour en fonction de la sélection)
Comment afficher différents filtres par catégorie de produits
Comment créer des ensembles de filtres personnalisés pour la page Boutique
Comment utiliser Widget Logic pour un contrôle avancé de la visibilité

Solution 1 : Activer le filtrage dépendant (Rechargement AJAX)

La première étape consiste à activer le rechargement du formulaire AJAX, qui met à jour les filtres dynamiquement lorsque les utilisateurs effectuent des sélections.

Pour les widgets :

Allez dans Apparence → Widgets
Trouvez votre widget WOOF
Activez l'option “Rechargement AJAX du formulaire”

Cela fait que les filtres se mettent à jour automatiquement après chaque sélection, affichant uniquement les options pertinentes.

Pour les shortcodes :

Ajoutez l'attribut ajax_redraw à votre shortcode WOOF :

[woof ajax_redraw="1"]

Ce que cela fait :

Lorsque l'utilisateur sélectionne “Roue” → les autres filtres se mettent à jour automatiquement
Affiche uniquement les sous-types, matières et couleurs disponibles pour Roue
Réduit l'encombrement en masquant les options non pertinentes

Documentation : https://products-filter.com/shortcode/woof

Solution 2 : Visibilité des filtres basée sur les catégories (Shortcode personnalisé)

Cette solution crée un shortcode dynamique qui affiche différents filtres en fonction de la catégorie de produits actuelle.

Étape 1 : Créer un shortcode personnalisé

Ajoutez ce code au functions.php de votre thème enfant :

/**
 * Dynamic WOOF shortcode that shows different filters per category
 * Usage: [woof_dynamic]
 */
add_shortcode('woof_dynamic', function () {
    // Check if WOOF is active
    if (!function_exists('woof_shortcode')) {
        return '<!-- WOOF plugin not active -->';
    }

    // Get current category
    $term = get_queried_object();

    // Check if we're on a product category page
    if (!$term || !isset($term->taxonomy) || $term->taxonomy !== 'product_cat') {
        return do_shortcode('[woof]'); // Show default filters
    }

    // Get category slug
    $cat = strtolower($term->slug);

    // Define which filters to show for each category
    $filters_map = [
        'wheel' => ['pa_sub-type', 'pa_material', 'pa_colour', 'pa_size'],
        'lingerie' => ['pa_size', 'pa_colour', 'pa_material'],
        'massage-candles' => ['pa_type', 'pa_material', 'pa_brand'],
        'electronics' => ['pa_brand', 'pa_screen-size', 'pa_storage'],
        'clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_style'],
        'furniture' => ['pa_material', 'pa_color', 'pa_dimensions', 'pa_room'],
    ];

    // If category not in map, show default filters
    if (!isset($filters_map[$cat])) {
        return do_shortcode('[woof]');
    }

    // Build shortcode with specific filters for this category
    $taxonomies = implode(',', $filters_map[$cat]);

    return do_shortcode('[woof tax_only="' . esc_attr($taxonomies) . '" ajax_redraw="1"]');
});

Étape 2 : Utiliser le shortcode

Remplacez votre shortcode [woof] existant par :

[woof_dynamic]

Placez ce shortcode dans :

Zones de widgets (widget Texte/HTML)
Blocs de constructeur de pages (Elementor, Divi, etc.)
Fichiers de modèles de thème : <?php echo do_shortcode('[woof_dynamic]'); ?>

Étape 3 : Configurer vos catégories

Mettez à jour le tableau $filters_map avec vos :

Slugs de catégories (ex. ‘roue’, ‘électronique’)
Slugs d'attributs (ex. ‘pa_brand’, ‘pa_size’)

Trouver vos slugs :

Slugs de catégories :

Allez dans Produits → Catégories
Survolez un nom de catégorie
Regardez l'URL : ...tag_ID=123&taxonomy=product_cat&post_type=product
Ou modifiez la catégorie et regardez le champ slug

Slugs d'attributs :

Allez dans Produits → Attributs
Ils commencent par pa_ suivis du nom de l'attribut
Exemples : pa_color, pa_size, pa_brand, pa_material

Solution 3 : Filtres personnalisés pour la page Boutique

La page Boutique principale de WooCommerce nécessite un traitement différent car ce n’est pas une archive de catégorie.

Solution combinée : Page Boutique + Pages de catégories

Ce code gère à la fois la page Boutique et les pages de catégories individuelles :

/**
 * Dynamic WOOF shortcode with Shop page support
 * Shows minimal filters on Shop, full filters on categories
 */
add_shortcode('woof_dynamic', function () {
    if (!function_exists('woof_shortcode')) {
        return '';
    }

    // Shop page (main product archive) - show minimal filters
    if (is_shop() AND !is_product_category() AND !is_product_tag()) {
        return do_shortcode('[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]');
    }

    // Product category pages - show category-specific filters
    $term = get_queried_object();
    if ($term AND isset($term->taxonomy) AND $term->taxonomy === 'product_cat') {
        $cat = strtolower($term->slug);

        // Define filters for each category
        $filters_map = [
            'wheel' => ['pa_sub-type', 'pa_material', 'pa_colour', 'pa_size'],
            'lingerie' => ['pa_size', 'pa_colour', 'pa_material'],
            'massage-candles' => ['pa_type', 'pa_material', 'pa_brand'],
            'electronics' => ['pa_brand', 'pa_screen-size', 'pa_storage'],
            'clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_style'],
        ];

        if (isset($filters_map[$cat])) {
            $taxonomies = implode(',', $filters_map[$cat]);
            return do_shortcode('[woof tax_only="' . esc_attr($taxonomies) . '" ajax_redraw="1"]');
        }
    }

    // Fallback - show all filters
    return do_shortcode('[woof ajax_redraw="1"]');
});

Ce que fait ce code :

Sur la page Boutique : Affiche uniquement les filtres Catégories, Couleur et Prix
Sur les pages de catégories : Affiche les filtres spécifiques à la catégorie depuis le mapping
Sur les autres pages : Affiche les filtres par défaut

Personnaliser les filtres de la page Boutique : Modifiez cette ligne pour afficher différents filtres sur la page Boutique :

[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]

Paramètres disponibles :

tax_only="product_cat,pa_brand" – Afficher uniquement ces taxonomies
by_price="1" – Afficher le filtre de fourchette de prix
by_only="product_cat,pa_brand" – Alternative à tax_only
ajax_redraw="1" – Activer les mises à jour dynamiques

Solution 4 : Widget Logic pour la visibilité conditionnelle

Si vous préférez utiliser des widgets plutôt que des shortcodes, vous pouvez contrôler la visibilité des widgets avec une logique conditionnelle.

Étape 1 : Installer le plugin Widget Logic

Choisissez l'un de ces plugins :

Widget Logic : https://wordpress.org/plugins/widget-logic/
Show Widget by Logic : https://github.com/realmag777/Show-WordPress-Widget-by-Logic

Étape 2 : Créer plusieurs widgets WOOF

Allez dans Apparence → Widgets
Ajoutez plusieurs widgets WOOF à votre barre latérale
Configurez chaque widget avec différents filtres

Étape 3 : Ajouter une logique conditionnelle

Pour chaque widget, ajoutez des conditions de visibilité :

Afficher uniquement sur la catégorie Roue :

is_product_category('wheel')

Afficher uniquement sur la catégorie Lingerie :

is_product_category('lingerie')

Afficher uniquement sur la page Boutique :

is_shop() AND !is_product_category()

Afficher sur plusieurs catégories :

is_product_category(array('wheel', 'lingerie', 'massage-candles'))

Afficher partout sauf sur la page Boutique :

!is_shop()

Afficher sur les catégories Électronique ou Ordinateurs :

is_product_category('electronics') || is_product_category('computers')

Exemples concrets

Exemple 1 : Boutique de produits adultes

$filters_map = [
    'wheel' => ['pa_type', 'pa_material', 'pa_color', 'pa_power-source', 'pa_waterproof'],
    'lingerie' => ['pa_size', 'pa_color', 'pa_style', 'pa_material'],
    'oil' => ['pa_type', 'pa_brand', 'pa_ingredients', 'pa_volume'],
    'toys' => ['pa_category', 'pa_material', 'pa_size', 'pa_color'],
];

Exemple 2 : Boutique d'électronique

$filters_map = [
    'laptops' => ['pa_brand', 'pa_processor', 'pa_ram', 'pa_storage', 'pa_screen-size'],
    'smartphones' => ['pa_brand', 'pa_storage', 'pa_ram', 'pa_camera', 'pa_battery'],
    'headphones' => ['pa_brand', 'pa_type', 'pa_connection', 'pa_noise-cancelling'],
    'cameras' => ['pa_brand', 'pa_megapixels', 'pa_sensor-size', 'pa_video-quality'],
];

Exemple 3 : Boutique de mode

$filters_map = [
    'mens-clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_brand', 'pa_style'],
    'womens-clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_brand', 'pa_occasion'],
    'shoes' => ['pa_size', 'pa_color', 'pa_brand', 'pa_type', 'pa_material'],
    'accessories' => ['pa_color', 'pa_material', 'pa_brand', 'pa_type'],
];

Exemple 4 : Boutique de meubles

$filters_map = [
    'bedroom' => ['pa_type', 'pa_material', 'pa_color', 'pa_style', 'pa_size'],
    'living-room' => ['pa_type', 'pa_material', 'pa_color', 'pa_seating-capacity'],
    'office' => ['pa_type', 'pa_material', 'pa_color', 'pa_ergonomic'],
    'outdoor' => ['pa_type', 'pa_material', 'pa_weather-resistant', 'pa_color'],
];

Avancé : Inclure le prix et les catégories

Si vous souhaitez afficher la fourchette de prix et les catégories en plus des attributs :

// On category pages, add price and allow category drill-down
if (isset($filters_map[$cat])) {
    $taxonomies = implode(',', $filters_map[$cat]);
    return do_shortcode('[woof tax_only="product_cat,' . esc_attr($taxonomies) . '" by_price="1" ajax_redraw="1"]');
}

Explication des paramètres :

product_cat – Affiche le filtre de catégorie pour le drill-down
by_price="1" – Affiche le curseur de fourchette de prix
ajax_redraw="1" – Met à jour les filtres dynamiquement

Dépannage

Les filtres ne se mettent pas à jour dynamiquement

Problème : Les filtres restent statiques après la sélection
Solution :

Assurez-vous que ajax_redraw="1" est dans votre shortcode
Activez “Rechargement AJAX du formulaire” dans les paramètres du widget
Vérifiez la console JavaScript pour les erreurs

Mauvais filtres affichés sur la catégorie

Problème : La catégorie affiche un ensemble de filtres incorrect
Solution :

Vérifiez que le slug de catégorie est correct (consultez l'URL ou les paramètres de catégorie)
Utilisez des minuscules dans le tableau $filters_map
Vérifiez si la catégorie existe dans votre mapping

Les filtres n'apparaissent pas du tout

Problème : Aucun filtre visible sur la page
Solution :

Vérifiez que les slugs d'attributs commencent par pa_ (ex. pa_color pas color)
Vérifiez si les attributs sont assignés aux produits de cette catégorie
Utilisez [woof] temporairement pour voir si le shortcode de base fonctionne

La page Boutique affiche les filtres de catégories

Problème : La page Boutique affiche un mauvais ensemble de filtres
Solution :

Vérifiez que la condition is_shop() est en premier dans votre code
Vérifiez que !is_product_category() est inclus
Videz tous les caches (WordPress, serveur, navigateur)

Les slugs d'attributs ne fonctionnent pas

Problème : Les filtres ne s'affichent pas pour des attributs spécifiques
Solution :

Allez dans Produits → Attributs pour trouver les slugs corrects
N'oubliez pas d'utiliser le préfixe pa_ (exigence WooCommerce)
Vérifiez l'orthographe : pa_colour vs pa_color

Le code ne fonctionne pas après l'ajout

Problème : Écran blanc ou erreurs après l'ajout du code
Solution :

Vérifiez les erreurs de syntaxe PHP dans le journal des erreurs
Assurez-vous de modifier le fichier functions.php du thème enfant
Vérifiez que tous les crochets et guillemets sont fermés
Supprimez le code et ajoutez-le ligne par ligne

Considérations sur les performances

Impact du rechargement AJAX :

Chaque sélection déclenche une requête AJAX
Plus de produits = temps de réponse plus long
Solution : Utiliser la mise en cache et optimiser la base de données

Plusieurs widgets vs shortcode :

Widgets : Plus d'utilisation de mémoire (tous les widgets se chargent)
Shortcode : Plus efficace (un seul ensemble se charge)
Recommandation : Utiliser l'approche shortcode

Grands catalogues :

Envisagez la pagination dans les filtres
Utilisez le chargement différé pour les attributs
Implémentez la mise en cache côté serveur

Approches alternatives

Utilisation de plusieurs shortcodes

Au lieu d'un shortcode dynamique, utilisez plusieurs shortcodes statiques :

// On wheel category page
[woof tax_only="pa_sub-type,pa_material,pa_colour,pa_size" ajax_redraw="1"]

// On Lingerie category page
[woof tax_only="pa_size,pa_colour,pa_material" ajax_redraw="1"]

// On Shop page
[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]

Utilisez ensuite Widget Logic pour afficher le shortcode correct sur chaque page.

Utilisation des fichiers de modèles

Ajoutez une logique conditionnelle directement dans votre modèle de thème :

<?php
if (is_product_category('books')) {
    echo do_shortcode('[woof tax_only="pa_sub-type,pa_material,pa_colour,pa_size"]');
} elseif (is_product_category('lingerie')) {
    echo do_shortcode('[woof tax_only="pa_size,pa_colour,pa_material"]');
} elseif (is_shop()) {
    echo do_shortcode('[woof tax_only="product_cat,pa_colour" by_price="1"]');
} else {
    echo do_shortcode('[woof]');
}
?>

Résumé

Problème : Les mêmes filtres s'affichent partout, encombrant l'interface

Solution 1 : Activer le rechargement AJAX pour le filtrage dépendant

Solution 2 : Créer un shortcode [woof_dynamic] avec mapping de catégories

Solution 3 : Ajouter la gestion de la page Boutique avec des filtres minimaux

Solution 4 : Utiliser Widget Logic pour un contrôle avancé de la visibilité

Meilleure approche : Combiner les solutions 2 et 3 pour un filtrage dynamique complet

Code clé :

add_shortcode('woof_dynamic', function() {
    // Shop page logic
    if (is_shop() AND !is_product_category()) {
        return do_shortcode('[woof tax_only="product_cat" by_price="1"]');
    }
    
    // Category mapping
    $term = get_queried_object();
    if ($term AND $term->taxonomy === 'product_cat') {
        $filters_map = [
            'category-slug' => ['pa_attribute1', 'pa_attribute2'],
        ];
        // Return category-specific filters
    }
    
    return do_shortcode('[woof]'); // Fallback
});

Cela crée une expérience de filtrage professionnelle et conviviale adaptée à chaque catégorie de produits.