Große WooCommerce-Kategoriefilter beschleunigen: Lazy-Load-Slideout

Wenn Sie eine übergeordnete Kategorie haben mit:

Große Anzahl an Produkten (500-1000+)
Tiefe Kategoriehierarchie(mehrere Ebenen von Unterkategorien)
Dynamische Nachzählung aktiviert

Produktfilter könnte generierenHunderte von SQL-Abfragenbei jedem Laden der Seite, auch wenn der Benutzer den Filter nie verwendet. Dies verursacht:

Langsames Laden der Seite (10+ Sekunden)
504 Gateway-Timeout-Fehler
Hohe Serverlast
Schlechte Benutzererfahrung

Warum das passiert

Wenn Dynamic Recount aktiviert ist, muss WOOF:

Verarbeiten Sie alle untergeordneten Kategorien rekursiv
Führen Sie SQL-Abfragen für jeden Begriff aus, um Produkte zu zählen
Berechnen Sie die Anzahl unter Berücksichtigung des aktuellen Kategoriekontexts

Beispiel:Eine Kategorie „Sonnenbrillen“ mit Unterkategorien (Männer → Frauen → Formen → Marken) erzeugt eine enorme Abfragelast.

Traditionelle Lösungen (nicht genug)

❌ Slideout mit CSS/Anzeigeregeln ausblenden– Filtern Sie weiterhin Prozesse auf dem Server
❌ Deaktivieren der dynamischen Nachzählung– Verliert wichtige Funktionalität
❌ Filteroptionen entfernen– Benutzer können nicht richtig filtern
❌ Datenbankindizes– Kleinere Verbesserung, löst die Grundursache nicht

Die optimale Lösung: Lazy-Load Slideout

Schlüsselkonzept:Laden Sie den Filter NUR, wenn der Benutzer das Slideout tatsächlich öffnet.

✅ Seite wird sofort geladen (keine Filterverarbeitung)
✅ Filter funktioniert bei Bedarf perfekt
✅ Keine Verschwendung von Serverressourcen
✅ Perfekt für Bots und Gelegenheitsbrowser
✅ Hält alle Filterfunktionen intakt

Durchführung

Fügen Sie den nächsten Code zu Ihrem Thema hinzufunctions.php:

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

Konfigurationsschritte

Deaktivieren Sie Ihr aktuelles Slideoutin den WOOF-Einstellungen, falls aktiviert
Fügen Sie den obigen Code hinzu to functions.phpIhres aktiven Themas
Lassen Sie diese WOOF-Einstellungen aktiviert:
- Dynamische Nachzählung im Cache: Ja
- Cache-Bedingungen: Ja
- Leere Begriffe ausblenden: Ja
- Dynamische Nachzählung: Ja
Optionale Anpassung:
- Slideout-Breite anpassen: ändernwidth: 350px and right: -350px
- Schaltflächenposition ändern: änderntop: 50%
- Farben anpassen: aktualisierenbackground and color values
- Sorgen Sie dafür, dass es auf der gesamten Website funktioniert: Entfernen Sie dieif (!is_product_category()) condition

Wie es funktioniert

Seitenladevorgänge:Nur die Auslöseschaltfläche rendert (keine Filterverarbeitung)
Benutzer klickt auf Schaltfläche:Slideout wird geöffnet, Overlay erscheint
Nur zuerst geöffnet:JavaScript klickt automatisch auf die versteckte Schaltfläche „Filterung starten“.
Filterladungen:WOOF verarbeitet alle Abfragen und zeigt Filteroptionen an
Nachfolgende Öffnungen:Der Filter ist bereits geladen und wird sofort geöffnet

Ergebnisse aus der Praxis

Vor:

Seitenladezeit: 10–15 Sekunden (oder 504-Timeout)
Über 500 SQL-Abfragen pro Seitenaufruf
Hohe Absprungrate

Nach:

Seitenladezeit: < 2 Sekunden
Filter lädt in ca. 3 Sekunden (nur auf Anfrage)
~50 % Reduzierung der Serverlast (viele Benutzer öffnen den Filter nie)

Kompatibilität

✅ Funktioniert mit allen WOOF-Versionen
✅ Kompatibel mit Seiten-Caching (WP Rocket, LiteSpeed usw.)
✅ Mobilfreundlich
✅ Funktioniert mit jedem WordPress-Theme

Erweiterte Anpassung

Passend zu Ihrem Themenstil:

/* 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 auf der linken Seite:

Ändern Sie diese Werte:

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

Wann sollte diese Lösung verwendet werden?

Verwenden Sie Lazy-Load-Slideout, wenn:

Die Kategorie hat eine tiefe Hierarchie (3+ Ebenen)
Über 500 Produkte in der Kategorie
Dynamische Nachzählung ist erforderlich
Seitenladezeit > 5 Sekunden
Es kommt zu 504-Timeouts

Alternative für Sidebar-Filter

Wenn Sie die Seitenleiste anstelle des Slideouts bevorzugen, verwenden Sie:

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

Dadurch wird in Ihrer Seitenleiste eine Schaltfläche „Filterung starten“ erstellt, die den Filter beim Klicken lädt.

Diese Lösung bietet die beste Balance zwischenperformance and functionality, wodurch schnelle Seitenladevorgänge gewährleistet werden und gleichzeitig die vollständigen Filterfunktionen für Benutzer beibehalten werden, die diese benötigen.

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