Filtro de Produtos Off-Canvas no WooCommerce: Painel Slideout e Correções

4 November 2026

Um filtro de produtos off-canvas do WooCommerce mantém a página da loja limpa: o filtro espera em um painel na borda da tela e desliza para dentro quando o visitante toca em uma aba ou botão Filtrar (Filter). O HUSKY traz isso integrado como a extensão Slideout, portanto não é preciso uma gaveta do tema nem um plugin de pop-up. Este guia explica como o painel funciona, como limitá-lo às páginas da loja e de categorias, como abri-lo a partir de um botão seu e fechá-lo depois da filtragem, e como corrigir um painel que não rola, fica atrás do cabeçalho ou simplesmente não aparece.

Painel deslizante, modo móvel ou uma gaveta do tema

O HUSKY oferece três maneiras de manter o filtro fora de vista até que seja necessário. Escolha uma por página; combiná-las resulta em dois filtros ou em um botão que não consegue abrir nada.

Slideout (Avançado (Advanced) → Slideout, ou o shortcode [woof_slideout]): um painel fixo na borda esquerda, direita, superior ou inferior da janela, com uma aba que o abre. Funciona em computadores e celulares. É o assunto deste guia.
Modo móvel: somente em celulares, o filtro é substituído por um botão Abrir filtro (Open filter) que o abre como um painel em tela cheia. Veja o guia do filtro móvel.
O filtro automático com Ocultar o filtro automático por padrão (Hide auto filter by default) = Sim: um botão acima dos produtos que faz o filtro descer sobre a grade. Veja o filtro horizontal acima dos produtos.

Uma gaveta ou barra lateral off-canvas do tema ou de um construtor de páginas também funciona, desde que apenas mostre e oculte HTML do filtro que já está na página quando ela carrega. Se a gaveta insere o conteúdo depois, o formulário nunca é inicializado e os cliques não fazem nada; o guia do Elementor mostra como reconhecer esse caso. Essas gavetas também precisam de código próprio para fechar após a filtragem AJAX, descrito em filtros diferentes para celular e desktop.

Ativar o painel deslizante

O Slideout é uma extensão integrada e está sempre ativo. Suas configurações ficam em WooCommerce → Configurações → Products Filter → Avançado (Advanced) → Slideout:

Visibilidade global (Global visibility): Mostrar (Show) adiciona o painel às páginas do WooCommerce automaticamente.
Botão como (Button as): como imagem (as Image) usa a Imagem do Slideout (Slideout image) no tamanho definido por Tamanho da imagem do botão (Button image size); como texto (as Text) mostra o Texto do Slideout (Slideout text) na aba.
Posição (Position): a borda de onde o painel desliza. Deslocamento (Offset) é a distância dele em relação ao topo da janela (posições esquerda e direita) ou à esquerda (posições superior e inferior).
Ação (Action): Clique (Click) ou Passar o mouse (Hover). Celulares não têm hover, portanto use Clique (Click) quando o painel for destinado a eles.
Tamanho do contêiner (Container size): largura e altura do painel. Com Visibilidade global (Global visibility) ativada e sem largura definida, o painel tem 350px de largura.
Estado após a inicialização (State after init): Não (No) mantém o painel fechado quando a página carrega.
Comportamento em dispositivos móveis (Mobile behavior): Mostrar em todos os dispositivos (Show on all devices), Mostrar somente em dispositivos móveis (Show only on mobile) ou Mostrar somente no desktop (Show only on desktop).

Com Visibilidade global (Global visibility) ativada, o plugin imprime [woof_slideout ...][woof][/woof_slideout] no rodapé da página: um formulário de filtro comum dentro de um painel com position: fixed, estacionado fora da janela. Um clique na aba o desliza para dentro, e um clique em qualquer lugar fora do painel o desliza de volta; não há botão de fechar dentro dele. Como o formulário faz parte da página desde o início, todos os tipos de filtro funcionam como em uma barra lateral, o modo AJAX inclusive.

Dois detalhes na versão 3.4.6. Primeiro, "páginas da loja" na opção significa toda página em que is_woocommerce() do WooCommerce é verdadeiro, e isso inclui as páginas de produto individual. Segundo, o painel global escreve o texto da aba no shortcode sem aspas, de modo que um texto de várias palavras é cortado no primeiro espaço: "Mostrar filtros" vira "Mostrar". Use ali um texto de uma palavra, ou o shortcode abaixo, no qual você pode usar aspas. O Comportamento em dispositivos móveis (Mobile behavior) é decidido no servidor a partir da identificação do navegador, portanto um cache de página precisa manter cópias separadas para celulares e computadores, como explica o guia móvel.

Mostrar o painel somente onde você quiser

Para controlar em quais páginas ele aparece, defina Visibilidade global (Global visibility) como Ocultar (Hide) e coloque você mesmo o shortcode. O botão Gerar shortcode (Generate shortcode), na parte inferior da aba Slideout, escreve um a partir das opções atuais; recarregue a página em seguida em vez de salvar, se esses valores não devem se tornar os globais, e coloque aspas em volta de valores com espaços. Um shortcode típico:

[woof_slideout location="left" image="null" text="Filters" width="320px" onloadslideout="false"]

image="null" transforma a aba em uma aba de texto. Sem conteúdo, o shortcode monta o [woof] interno por conta própria e repassa a ele todo atributo que não seja uma configuração do slideout: tax_only, by_only, sid, btn_position, redirect e o restante dos atributos de [woof]. Com conteúdo entre [woof_slideout] e [/woof_slideout], esse conteúdo é exibido no lugar, o que permite um título e um formulário personalizado: [woof_slideout text="Filters" image="null"]<h3>Filter products</h3>[woof btn_position="t"][/woof_slideout]. Nessa forma, os atributos de [woof] vão no shortcode interno.

O shortcode pode ficar no conteúdo da página ou em uma área de widgets do rodapé, mas não em uma barra lateral que o tema oculta em celulares: o painel está dentro dessa barra lateral e desaparece com ela. Para mostrar o painel apenas na loja e nos arquivos de produtos, imprima-o a partir do tema:

/*
 * HUSKY: slide-out filter on the shop and product archive pages,
 * not on single products. Set Advanced → Slideout → Global visibility = Hide.
 * Child theme functions.php or a code snippets plugin.
 */
add_action('wp_footer', function () {
    if (!is_shop() && !is_product_taxonomy()) {
        return;
    }
    echo do_shortcode('[woof_slideout location="left" image="null" text="Filters" width="320px" onloadslideout="false"]');
}, 5);

Mantenha a prioridade abaixo de 10. A extensão escreve os estilos de largura e altura do painel em seu próprio callback de rodapé na prioridade 10, usando o último painel impresso antes de ele ser executado; um painel impresso depois não recebe tamanho. Para um filtro diferente por categoria, teste is_product_category('shoes') e dê a cada painel o seu próprio tax_only="pa_size,pa_color". Para oferecer o painel também nas páginas do blog ou na página inicial, adicione redirect="https://example.com/shop/" para que os resultados abram na página da loja.

Use um painel por página. O script do slideout prepara somente o primeiro painel que encontra; um segundo, por exemplo o painel global mais um painel por shortcode, mantém o estilo inicial que o estaciona fora da janela, e por isso a aba dele fica ausente ou mal posicionada.

Abri-lo a partir de um botão seu e fechá-lo após a filtragem

O painel reage a três eventos: open, close e toggle. Um detalhe é importante para um botão personalizado: o painel fecha em qualquer clique fora dele, e um botão no cabeçalho está fora. Se o evento de clique continua até o document, o painel abre e fecha de novo no mesmo instante. O handler abaixo impede isso e também fecha o painel após cada filtragem AJAX, usando o evento woof_ajax_done do plugin:

/*
 * HUSKY slide-out panel: custom open/close buttons, close after AJAX filtering.
 * Child theme functions.php or a code snippets plugin.
 * Buttons: <a href="#" class="open-husky-filter">Filter</a>
 *          <a href="#" class="close-husky-filter">Close</a> (inside the panel)
 */
add_action('wp_footer', function () {
    ?>
    <script>
    jQuery(function ($) {
        $(document.body).on('click', '.open-husky-filter', function (e) {
            e.preventDefault();   // a link with href="#" would jump to the top
            e.stopPropagation();  // otherwise the outside-click rule closes it at once
            $('.woof-slide-out-div').trigger('toggle');
        });
        $(document.body).on('click', '.close-husky-filter', function (e) {
            e.preventDefault();
            $('.woof-slide-out-div').trigger('close');
        });
        $(document).on('woof_ajax_done', function () {
            $('.woof-slide-out-div').trigger('close');
        });
    });
    </script>
    <?php
}, 100);

Para usar apenas o seu botão, oculte a aba com .woof-slide-out-div .woof-handle { display: none; }. Coloque o link de fechar no painel por meio do conteúdo do shortcode, antes de [woof].

Fechar após a filtragem é adequado a um botão Filtrar (Filter). Com o Envio automático (Autosubmit) ativado, cada clique filtra, e o painel fecharia após cada escolha; defina Envio automático (Autosubmit) como Não (No) na aba Opções (Options) para que os visitantes façam todas as escolhas e o painel feche uma única vez. Sem AJAX, a página recarrega após a filtragem e o painel começa fechado, desde que Estado após a inicialização (State after init) seja Não (No). Até que as configurações do plugin sejam salvas pela primeira vez, um shortcode sem onloadslideout abre a cada carregamento de página; os exemplos definem onloadslideout="false" para não depender disso.

Aba, cores, tamanho e rolagem

O script do próprio painel define alguns valores inline, por isso algumas regras precisam de !important, e a sua folha de estilos carrega no rodapé, depois da maioria das outras, por isso alguns seletores começam com body:

/* HUSKY slide-out panel. Advanced → Code → Custom CSS code,
   or the theme's Additional CSS. */

/* Tab colours; an image tab gets its background inline */
.woof-slide-out-div .woof-handle {
    background-color: #f5c200 !important;
    color: #000;
}

/* Left or right position: move only the tab down, not the panel */
.woof-slide-out-div .woof-handle {
    top: 40px !important;
}

/* No transparency, above sticky headers and cookie bars */
body .woof-slide-out-div {
    opacity: 1 !important;
    z-index: 100000;
}

/* Scroll inside the panel when the filter is longer than the screen */
.woof-slide-out-div .woof-slide-content {
    max-height: calc(100vh - 140px); /* 100px offset + room at the bottom */
    overflow-y: auto;
}

/* Dim the page while the panel is open; a click on the dark area closes it */
.woof-slide-out-div.ui-slideouttab-open {
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
}

Por que a regra de rolagem é necessária: quando a página carrega, o script reduz o painel para caber na tela se ele for alto ou largo demais, mas apenas uma vez. Seções que se abrem depois, uma lista "mostrar mais" ou um celular girado deixam o conteúdo mais alto que a janela, e a parte inferior fica inacessível. Um max-height com overflow-y: auto mantém uma barra de rolagem em todos os estados. Defina o valor subtraído como o seu Deslocamento (Offset) mais alguma folga.

O painel é 95% opaco por padrão, o que faz os produtos aparecerem através dele em celulares. O seu nível de empilhamento é 9999; um cabeçalho fixo, uma sobreposição do tema ou um banner de cookies com um valor maior o cobre ou captura os cliques, o que parece um filtro que não pode ser clicado. Se elevar o painel não ajudar, inspecione o elemento que está por cima e reduza o z-index dele.

Quando o painel não funciona

A aba não aparece em celulares. O shortcode está em uma barra lateral que o tema oculta em telas pequenas, Comportamento em dispositivos móveis (Mobile behavior) exclui celulares, ou um cache de página entrega a cópia do desktop.
O painel aparece nas páginas de produto ou em todo lugar. Visibilidade global (Global visibility) está em Mostrar (Show); mude para Ocultar (Hide) e use o trecho do rodapé.
Ele abre a cada carregamento de página. Defina Estado após a inicialização (State after init) como Não (No) e adicione onloadslideout="false" aos seus shortcodes.
Só uma das duas abas aparece ou funciona. Há dois painéis na página; mantenha um.
A aba aparece tarde ou não faz nada. A otimização de JavaScript atrasa ou combina os scripts do plugin. Exclua /wp-content/plugins/woocommerce-products-filter/ do atraso e da combinação, como descrito em o guia sobre plugins de otimização, e limpe todos os caches.
A filtragem começa pelo painel, mas os produtos não mudam. Isso é a grade de produtos, não o painel; valem as mesmas causas de um filtro em uma barra lateral, veja a URL muda, mas os produtos continuam iguais.

Lista de verificação

Uma única forma de ocultar o filtro por página: Slideout, modo móvel, o botão do filtro automático ou uma gaveta do tema.
Um painel por página; Visibilidade global (Global visibility) em Ocultar (Hide) quando você mesmo coloca o shortcode.
O shortcode fora de barras laterais que o tema oculta em celulares, ou impresso a partir de wp_footer com prioridade abaixo de 10.
Aba de texto com aspas: image="null" text="Show filters"; onloadslideout="false".
Botões personalizados impedem que o clique chegue ao document; o painel fecha em woof_ajax_done.
Conteúdo do painel limitado com max-height e rolável; z-index acima do cabeçalho.

Se o painel continuar com problemas, abra um tópico no fórum de suporte do HUSKY com o link da página e o shortcode ou as configurações que você usa, e nós vamos verificar.