Accélérez les grands filtres de catégories WooCommerce : Slideout à chargement différé

Lorsque vous avez une catégorie parente avec :

Grand nombre de produits (500-1000+)
Hiérarchie de catégories profonde (plusieurs niveaux de sous-catégories)
Recalcul dynamique activé

Le filtre de produits pourrait générer des centaines de requêtes SQL à chaque chargement de page, même si l'utilisateur n'utilise jamais le filtre. Cela provoque :

Chargement lent de la page (10+ secondes)
Erreurs 504 Gateway Timeout
Charge serveur élevée
Mauvaise expérience utilisateur

Pourquoi cela se produit

Avec le Recalcul dynamique activé, WOOF doit :

Traiter récursivement toutes les catégories enfants
Exécuter des requêtes SQL pour chaque terme afin de compter les produits
Calculer les comptes en tenant compte du contexte de la catégorie actuelle

Exemple : Une catégorie “Lunettes de soleil” avec des sous-catégories (Hommes → Femmes → Formes → Marques) génère une charge de requêtes massive.

Solutions traditionnelles (insuffisantes)

❌ Masquer le slideout avec des règles CSS/display – Le filtre est toujours traité sur le serveur
❌ Désactiver le Recalcul dynamique – Perte de fonctionnalité importante
❌ Supprimer les options de filtre – Les utilisateurs ne peuvent pas filtrer correctement
❌ Index de base de données – Amélioration mineure, ne résout pas la cause profonde

La solution optimale : Slideout à chargement différé

Concept clé : Charger le filtre UNIQUEMENT lorsque l'utilisateur ouvre réellement le slideout.

✅ La page se charge instantanément (aucun traitement de filtre)
✅ Le filtre fonctionne parfaitement lorsque nécessaire
✅ Aucun gaspillage de ressources serveur
✅ Parfait pour les robots et les navigateurs occasionnels
✅ Conserve toutes les fonctionnalités du filtre intactes

Mise en œuvre

Ajoutez le code suivant au functions.php de votre thème :

/**
 * WOOF Lazy-Load Slideout Filter
 * Loads filter only when user clicks to open slideout
 * Solves performance issues with deep category hierarchies
 */
add_action('wp_footer', function () {
    // Only on product category pages (optional - remove condition to show everywhere)
    if (!is_product_category()) {
        //return;
    }
    ?>

    <!-- Slideout Trigger Button -->
    <div id="woof-slideout-trigger" style="position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9999; cursor: pointer; background: #333; color: #fff; padding: 15px 10px; border-radius: 5px 0 0 5px; font-weight: bold; writing-mode: vertical-rl; text-orientation: mixed;">
        FILTERS
    </div>

    <!-- Slideout Panel -->
    <div id="woof-slideout-panel" style="position: fixed; right: -350px; top: 0; width: 350px; height: 100%; background: #fff; box-shadow: -2px 0 10px rgba(0,0,0,0.3); z-index: 9998; transition: right 0.3s ease; overflow-y: auto; padding: 20px;">
        
        <!-- Close Button -->
        <div style="text-align: right; margin-bottom: 15px;">
            <span id="woof-slideout-close" style="cursor: pointer; font-size: 24px; font-weight: bold;">✖</span>
        </div>

        <!-- WOOF Filter with autohide - loads only on first click -->
        <?php echo do_shortcode('[woof autohide=0 start_filtering_btn=1]'); ?>
    </div>

    <!-- Background Overlay -->
    <div id="woof-slideout-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9997; display: none;"></div>

    <script>
        jQuery(document).ready(function ($) {
            var $trigger = $('#woof-slideout-trigger');
            var $panel = $('#woof-slideout-panel');
            var $overlay = $('#woof-slideout-overlay');
            var $close = $('#woof-slideout-close');
            var filterLoaded = false;

            // Open slideout
            $trigger.on('click', function () {
                $panel.css('right', '0');
                $overlay.fadeIn(300);

                // Auto-trigger WOOF "Start Filtering" button on first open
                if (!filterLoaded) {
                    setTimeout(function () {
                        var $woofBtn = $('.woof_start_filtering_btn');
                        if ($woofBtn.length) {
                            $woofBtn.trigger('click');
                            // Hide the button after triggering
                            $woofBtn.hide();
                            filterLoaded = true;
                        }
                    }, 500);
                }
            });

            // Close slideout
            function closeSlideout() {
                $panel.css('right', '-350px');
                $overlay.fadeOut(300);
            }

            $close.on('click', closeSlideout);
            $overlay.on('click', closeSlideout);
        });
    </script>

    <?php
}, 999);

Étapes de configuration

Désactivez votre slideout actuel dans les paramètres WOOF s'il est activé
Ajoutez le code ci-dessus au functions.php de votre thème actif
Gardez ces paramètres WOOF activés :
- Cache du recalcul dynamique : Oui
- Cache des termes : Oui
- Masquer les termes vides : Oui
- Recalcul dynamique : Oui
Personnalisation optionnelle :
- Ajuster la largeur du slideout : modifier width: 350px et right: -350px
- Changer la position du bouton : modifier top: 50%
- Personnaliser les couleurs : mettre à jour les valeurs background et color
- Le faire fonctionner sur tout le site : supprimer la condition if (!is_product_category())

Comment cela fonctionne

Chargement de la page : Seul le bouton déclencheur s'affiche (aucun traitement de filtre)
L'utilisateur clique sur le bouton : Le slideout s'ouvre, une superposition apparaît
Première ouverture uniquement : JavaScript clique automatiquement sur le bouton masqué “Commencer le filtrage”
Chargement du filtre : WOOF traite toutes les requêtes et affiche les options de filtre
Ouvertures suivantes : Le filtre est déjà chargé, s'ouvre instantanément

Résultats concrets

Avant :

Chargement de la page : 10-15 secondes (ou timeout 504)
500+ requêtes SQL par vue de page
Taux de rebond élevé

Après :

Chargement de la page : < 2 secondes
Le filtre se charge en ~3 secondes (uniquement sur demande)
~50% de réduction de la charge serveur (de nombreux utilisateurs n'ouvrent jamais le filtre)

Compatibilité

✅ Fonctionne avec toutes les versions de WOOF
✅ Compatible avec la mise en cache de page (WP Rocket, LiteSpeed, etc.)
✅ Adapté aux mobiles
✅ Fonctionne avec n'importe quel thème WordPress

Personnalisation avancée

Adaptez le style de votre thème :

/* Add to your theme's CSS */
#woof-slideout-trigger {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-family: 'Your Theme Font', sans-serif;
    letter-spacing: 2px;
}

#woof-slideout-panel {
    background: #f8f9fa;
    font-family: 'Your Theme Font', sans-serif;
}

#woof-slideout-trigger:hover {
    transform: translateY(-50%) scale(1.05);
}

Slideout sur le côté gauche :

Modifiez ces valeurs :

right: -350px  →  left: -350px
right: 0       →  left: 0
right: -350px  →  left: -350px

Quand utiliser cette solution

Utilisez le slideout à chargement différé lorsque :

La catégorie a une hiérarchie profonde (3+ niveaux)
500+ produits dans la catégorie
Le Recalcul dynamique est requis
Le temps de chargement de la page > 5 secondes
Vous rencontrez des timeouts 504

Alternative pour le filtre en barre latérale

Si vous préférez une barre latérale plutôt qu'un slideout, utilisez :

echo do_shortcode('[woof autohide=1 start_filtering_btn=1]');

Cela crée un bouton “Commencer le filtrage” dans votre barre latérale qui charge le filtre au clic.

Cette solution offre le meilleur équilibre entre performance et fonctionnalité, garantissant des chargements de page rapides tout en conservant des capacités de filtrage complètes pour les utilisateurs qui en ont besoin.

Réf : https://pluginus.net/support/topic/performance-issue-504-timeouts-on-parent-category-with-deep-hierarchy-flatsome-theme/