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

Apprenez comment afficher différents ensembles de filtres en fonction des catégories de produits, créer des filtres dépendants 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 filtrage 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 Mobilier : Afficher le matériau, la couleur, les dimensions, le type de pièce
Page de boutique (archive principale) : Afficher uniquement les catégories, la gamme de prix, les marques en vedette

Limitation actuelle : Toutes les options de filtre restent globales, même après qu'un utilisateur ait sélectionné 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 (Redessin AJAX)

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

Pour les Widgets :

Aller à Apparence → Widgets
Trouvez votre widget WOOF
Activez l'option “Redessin AJAX du formulaire”

Cela met à jour automatiquement les filtres après chaque sélection, affichant uniquement les options pertinentes.

Pour les shortcodes :

Ajouter le ajax_redraw attribut à votre shortcode WOOF :

[woof ajax_redraw="1"]

Ce que cela fait :

Lorsque l'utilisateur sélectionne "Rou" → les autres filtres se mettent à jour automatiquement
N'affiche que les sous-types, matériaux, couleurs disponibles pour la roue
Réduit l'encombrement en masquant les options non pertinentes

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

Solution 2 : Visibilité du filtre par catégorie (shortcode personnalisé)

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

Étape 1 : Créer un shortcode personnalisé

Ajoutez ce code à votre thème enfant ‘ functions.php:

/**
 * 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 [woof] shortcode avec :

[woof_dynamic]

Placez ce shortcode dans :

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

Étape 3 : Configurez vos catégories

Mettre à jour le $filters_map tableau avec vos réels :

Slugs de catégorie (par exemple, 'roue', 'électronique')
Slugs d'attributs (par exemple, ‘pa_brand’, ‘pa_size’)

Trouver vos slugs :

Slugs des catégories :

Aller à Produits → Catégories
Survolez le nom d'une 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 :

Aller à Produits → Attributs
Ils commencent par pa_ suivi du nom de l'attribut
Exemples : pa_color, pa_size, pa_brand, pa_material

Solution 3 : Filtres personnalisés pour la page de la boutique

La page principale WooCommerce Shop nécessite une gestion différente car ce n'est pas une archive de catégorie.

Solution combinée : Page boutique + Pages catégories

Ce code gère à la fois la page Boutique et les pages de catégorie 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égorie : Affiche les filtres spécifiques aux catégories à partir du mappage
Sur d'autres pages : Affiche les filtres par défaut

Personnaliser les filtres de la page Boutique : Changez cette ligne pour afficher différents filtres sur la page de la 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 gamme de prix
by_only="product_cat,pa_brand" – Alternative à tax_only
ajax_redraw="1" – Active les mises à jour dynamiques

Solution 4 : Widget Logic pour la visibilité conditionnelle

Si vous préférez utiliser des widgets au lieu de 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 :

Logique de widget : https://wordpress.org/plugins/widget-logic/
Afficher le widget par logique : https://github.com/realmag777/Show-WordPress-Widget-by-Logic

Étape 2 : Créer des widgets WOOF multiples

Aller à Apparence → Widgets
Ajoutez plusieurs widgets WOOF à votre barre latérale
Configurer chaque widget avec des filtres différents

Étape 3 : Ajouter une logique conditionnelle

Pour chaque widget, ajoutez des conditions de visibilité :

Afficher uniquement dans la catégorie Wheel :

is_product_category('wheel')

Afficher uniquement dans 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 Shop :

!is_shop()

Afficher sur les catégories Électronique ou Ordinateurs :

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

Exemples concrets

Exemple 1 : Magasin de produits pour 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 : Magasin 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 : Magasin 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 : Magasin 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 forage
by_price="1" – Affiche le curseur de plage 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 ajax_redraw="1" est dans votre shortcode
Activer le « Redessin AJAX du formulaire » dans les paramètres du widget
Vérifiez la console JavaScript pour les erreurs

Filtres incorrects affichés sur la catégorie

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

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

Les filtres n'apparaissent pas du tout

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

Vérifier que les slugs d'attributs commencent par pa_ (par exemple, pa_color pas color)
Vérifier si les attributs sont attribués aux produits de cette catégorie
Utiliser [woof] temporairement pour voir si le shortcode de base fonctionne

La page de la boutique affiche les filtres de catégories

Problème : La page de la boutique affiche un ensemble de filtres incorrect
Solution :

Vérifier is_shop() la condition est la première dans votre code
Vérifier cela !is_product_category() est inclus
Effacer 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 :

Aller à Produits → Attributs pour trouver les bons slugs
N'oubliez pas d'utiliser pa_ préfixe (exigence de WooCommerce)
Vérifier l'orthographe : pa_colour vs pa_color

Le code ne fonctionne pas après ajout

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

Vérifiez les erreurs de syntaxe PHP dans le journal d'erreurs
Assurez-vous que vous modifiez le fichier functions.php du thème enfant
Vérifiez que toutes les parenthèses et guillemets sont fermés
Supprimer le code et le réajouter ligne par ligne

Considérations de performance

Impact du redessin AJAX :

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

Widgets multiples vs. shortcode :

Widgets : Plus d'utilisation de la mémoire (tous les widgets sont chargés)
Shortcode : Plus efficace (un seul jeu se charge)
Recommandation : Utiliser l'approche par shortcode

Grands catalogues :

Envisagez la pagination dans les filtres
Utiliser le chargement différé pour les attributs
Implémenter 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"]

Ensuite, utilisez Widget Logic pour afficher le bon shortcode sur chaque page.

Utilisation de fichiers de modèle

Ajouter une logique conditionnelle directement dans le template de votre 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 : Mêmes filtres partout, encombrant l'interface

Solution 1 : Activer le nouveau rendu AJAX pour le filtrage dépendant

Solution 2 : Créer [woof_dynamic] shortcode avec mappage de catégorie

Solution 3 : Ajout de la gestion de la page Shop avec des filtres minimaux

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

Meilleure approche : Combinez les solutions 2 + 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.