Acelera los filtros de categorías grandes de WooCommerce: Slideout con carga diferida

Cuando tienes una categoría padre con:

Gran número de productos (500-1000+)
Jerarquía profunda de categorías (múltiples niveles de subcategorías)
Recuento dinámico habilitado

El filtro de productos podría generar cientos de consultas SQL en cada carga de página, incluso si el usuario nunca usa el filtro. Esto provoca:

Carga lenta de página (10+ segundos)
Errores 504 Gateway Timeout
Alta carga del servidor
Mala experiencia de usuario

Por qué ocurre esto

Con el Recuento dinámico habilitado, WOOF debe:

Procesar recursivamente todas las categorías hijas
Ejecutar consultas SQL para cada término para contar productos
Calcular recuentos considerando el contexto de categoría actual

Ejemplo: Una categoría “Gafas de sol” con subcategorías (Hombre → Mujer → Formas → Marcas) genera una carga masiva de consultas.

Soluciones tradicionales (insuficientes)

❌ Ocultar el panel deslizante con reglas CSS/display – El filtro aún se procesa en el servidor
❌ Deshabilitar el Recuento dinámico – Pierde funcionalidad importante
❌ Eliminar opciones de filtro – Los usuarios no pueden filtrar correctamente
❌ Índices de base de datos – Mejora menor, no soluciona la causa raíz

La solución óptima: Panel deslizante con carga diferida (lazy-load)

Concepto clave: Cargar el filtro SÓLO cuando el usuario realmente abre el panel deslizante.

✅ La página carga instantáneamente (sin procesamiento del filtro)
✅ El filtro funciona perfectamente cuando se necesita
✅ Sin desperdicio de recursos del servidor
✅ Perfecto para bots y navegadores ocasionales
✅ Mantiene toda la funcionalidad del filtro intacta

Implementación

Agrega el siguiente código a tu tema functions.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);

Pasos de configuración

Deshabilita tu panel deslizante actual en la configuración de WOOF si está habilitado
Agrega el código anterior a functions.php de tu tema activo
Mantén habilitadas estas configuraciones de WOOF:
- Caché de recuento dinámico: Sí
- Caché de términos: Sí
- Ocultar términos vacíos: Sí
- Recuento dinámico: Sí
Personalización opcional:
- Ajustar el ancho del panel deslizante: cambiar width: 350px y right: -350px
- Cambiar la posición del botón: modificar top: 50%
- Personalizar colores: actualizar los valores de background y color
- Hacerlo funcionar en todo el sitio: eliminar la condición if (!is_product_category())

Cómo funciona

Carga de página: Solo se renderiza el botón de activación (sin procesamiento del filtro)
El usuario hace clic en el botón: Se abre el panel deslizante, aparece la superposición
Solo la primera apertura: JavaScript hace clic automáticamente en el botón oculto “Iniciar filtrado”
El filtro se carga: WOOF procesa todas las consultas y muestra las opciones de filtro
Aperturas posteriores: El filtro ya está cargado, se abre instantáneamente

Resultados reales

Antes:

Carga de página: 10-15 segundos (o tiempo de espera 504)
Más de 500 consultas SQL por visita a página
Alta tasa de rebote

Después:

Carga de página: < 2 segundos
El filtro se carga en ~3 segundos (solo cuando se solicita)
~50% de reducción en la carga del servidor (muchos usuarios nunca abren el filtro)

Compatibilidad

✅ Funciona con todas las versiones de WOOF
✅ Compatible con almacenamiento en caché de página (WP Rocket, LiteSpeed, etc.)
✅ Adaptado a dispositivos móviles
✅ Funciona con cualquier tema de WordPress

Personalización avanzada

Igualar el estilo de tu tema:

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

Panel deslizante en el lado izquierdo:

Cambia estos valores:

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

Cuándo usar esta solución

Usa el panel deslizante con carga diferida cuando:

La categoría tiene jerarquía profunda (3+ niveles)
Más de 500 productos en la categoría
Se requiere Recuento dinámico
Tiempo de carga de página > 5 segundos
Se experimentan tiempos de espera 504

Alternativa para filtro en barra lateral

Si prefieres la barra lateral en lugar del panel deslizante, usa:

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

Esto crea un botón “Iniciar filtrado” en tu barra lateral que carga el filtro al hacer clic.

Esta solución proporciona el mejor equilibrio entre rendimiento y funcionalidad, asegurando cargas rápidas de página mientras mantiene todas las capacidades de filtrado para los usuarios que las necesitan.

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