Acelere Grandes Filtros de Categoria do WooCommerce: Lazy-Load Slideout

Quando você tem uma categoria pai com:

Grande número de produtos (500-1000+)
Hierarquia profunda de categorias (múltiplos níveis de subcategorias)
Dynamic Recount ativado

O filtro de produtos pode gerar centenas de consultas SQL a cada carregamento de página, mesmo que o usuário nunca use o filtro. Isso causa:

Carregamento lento da página (10+ segundos)
Erros 504 Gateway Timeout
Alta carga no servidor
Má experiência do usuário

Por que isso acontece

Com o Dynamic Recount ativado, o WOOF deve:

Processar recursivamente todas as categorias filhas
Executar consultas SQL para cada termo para contar produtos
Calcular contagens considerando o contexto da categoria atual

Exemplo: Uma categoria “Óculos de Sol” com subcategorias (Masculino → Feminino → Formatos → Marcas) gera uma carga massiva de consultas.

Soluções Tradicionais (Insuficientes)

❌ Esconder o painel deslizante com regras CSS/display – O filtro ainda processa no servidor
❌ Desabilitar o Dynamic Recount – Perde funcionalidade importante
❌ Remover opções de filtro – Os usuários não conseguem filtrar adequadamente
❌ Índices de banco de dados – Melhoria menor, não resolve a causa raiz

A Solução Ideal: Painel Deslizante com Carregamento Tardio

Conceito-chave: Carregar o filtro SOMENTE quando o usuário realmente abrir o painel deslizante.

✅ A página carrega instantaneamente (sem processamento de filtro)
✅ O filtro funciona perfeitamente quando necessário
✅ Sem desperdício de recursos do servidor
✅ Perfeito para bots e navegadores casuais
✅ Mantém toda a funcionalidade do filtro intacta

Implementação

Adicione o código a seguir ao functions.php do seu tema:

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

Passos de Configuração

Desabilite seu painel deslizante atual nas configurações do WOOF se estiver ativado
Adicione o código acima ao functions.php do seu tema ativo
Mantenha estas configurações do WOOF ativadas:
- Cache dynamic recount: Sim
- Cache terms: Sim
- Hide empty terms: Sim
- Dynamic Recount: Sim
Personalização opcional:
- Ajustar largura do painel deslizante: altere width: 350px e right: -350px
- Alterar posição do botão: modifique top: 50%
- Personalizar cores: atualize os valores de background e color
- Fazer funcionar em todo o site: remova a condição if (!is_product_category())

Como funciona

Página carrega: Apenas o botão gatilho é renderizado (sem processamento de filtro)
Usuário clica no botão: O painel deslizante abre, o overlay aparece
Apenas na primeira abertura: O JavaScript clica automaticamente no botão oculto “Start Filtering”
Filtro carrega: O WOOF processa todas as consultas e exibe as opções de filtro
Aberturas subsequentes: O filtro já está carregado, abre instantaneamente

Resultados do Mundo Real

Antes:

Carregamento da página: 10-15 segundos (ou timeout 504)
500+ consultas SQL por visualização de página
Alta taxa de rejeição

Depois:

Carregamento da página: < 2 segundos
Filtro carrega em ~3 segundos (apenas quando solicitado)
~50% de redução na carga do servidor (muitos usuários nunca abrem o filtro)

Compatibilidade

✅ Funciona com todas as versões do WOOF
✅ Compatível com cache de página (WP Rocket, LiteSpeed, etc.)
✅ Amigável para dispositivos móveis
✅ Funciona com qualquer tema WordPress

Personalização Avançada

Combine com o estilo do seu 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);
}

Painel deslizante do lado esquerdo:

Altere estes valores:

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

Quando usar esta solução

Use o painel deslizante com carregamento tardio quando:

A categoria tem hierarquia profunda (3+ níveis)
500+ produtos na categoria
Dynamic Recount é necessário
Tempo de carregamento da página > 5 segundos
Está enfrentando timeouts 504

Alternativa para Filtro na Barra Lateral

Se você preferir a barra lateral em vez do painel deslizante, use:

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

Isso cria um botão “Start Filtering” na sua barra lateral que carrega o filtro ao clicar.

Esta solução oferece o melhor equilíbrio entre desempenho e funcionalidade, garantindo carregamentos rápidos de página enquanto mantém todas as capacidades de filtragem para os usuários que precisam delas.

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