HUSKY - Product Filter for WooCommerce

Como Mostrar Filtros Diferentes por Categoria no WOOF (Filtragem Dinâmica)

Saiba como exibir diferentes conjuntos de filtros com base nas categorias de produtos, criar filtragem dependente e personalizar filtros para a página da loja WooCommerce.

O Problema

Por padrão, o WOOF mostra os mesmos filtros em todas as páginas. No entanto, diferentes categorias de produtos geralmente precisam de opções de filtro diferentes:

Cenários de exemplo:

  • Categoria Eletrônicos: Mostrar Marca, Tamanho da Tela, Armazenamento, RAM
  • Categoria de Roupas: Mostrar Tamanho, Cor, Material, Estilo
  • Categoria Móveis: Mostrar Material, Cor, Dimensões, Tipo de Quarto
  • Página da loja (arquivo principal): Mostrar apenas Categorias, Faixa de Preços, Marcas em Destaque

Limitação atual: Todas as opções de filtro permanecem globais, mesmo após um usuário selecionar uma categoria, tornando a interface confusa com filtros irrelevantes.

O que você aprenderá:

  1. Como habilitar filtragem dependente/condicional (filtros atualizam com base na seleção)
  2. Como mostrar filtros diferentes por categoria de produto
  3. Como criar conjuntos de filtros personalizados para a página Loja
  4. Como usar Widget Logic para controle avançado de visibilidade

 

Solução 1: Habilitar Filtragem Dependente (Redesenho AJAX)

O primeiro passo é ativar o redesenho do formulário AJAX, que atualiza os filtros dinamicamente quando os usuários fazem seleções.

Para Widgets:

  1. Ir para Aparência → Widgets
  2. Encontre seu widget WOOF
  3. Habilite a opção “Redesenho AJAX do formulário”

Isso faz com que os filtros sejam atualizados automaticamente após cada seleção, mostrando apenas opções relevantes.

Para Shortcodes:

Adicione o ajax_redraw atributo ao seu shortcode WOOF:

[woof ajax_redraw="1"]

O que isso faz:

  • Quando o usuário seleciona "Roda" → outros filtros atualizam automaticamente
  • Mostra apenas Tipos Secundários, Materiais, Cores disponíveis para Roda
  • Reduz a desordem ocultando opções irrelevantes

Documentação: https://products-filter.com/shortcode/woof

 

Solução 2: Visibilidade de Filtro Baseada em Categoria (Shortcode Personalizado)

Esta solução cria um shortcode dinâmico que exibe diferentes filtros dependendo da categoria de produto atual.

 

Etapa 1: Criar Shortcode Personalizado

Adicione este código ao seu tema filho functions.php:

/**
 * Dynamic WOOF shortcode that shows different filters per category
 * Usage: [woof_dynamic]
 */
add_shortcode('woof_dynamic', function () {
    // Check if WOOF is active
    if (!function_exists('woof_shortcode')) {
        return '<!-- WOOF plugin not active -->';
    }

    // Get current category
    $term = get_queried_object();

    // Check if we're on a product category page
    if (!$term || !isset($term->taxonomy) || $term->taxonomy !== 'product_cat') {
        return do_shortcode('[woof]'); // Show default filters
    }

    // Get category slug
    $cat = strtolower($term->slug);

    // Define which filters to show for each category
    $filters_map = [
        'wheel' => ['pa_sub-type', 'pa_material', 'pa_colour', 'pa_size'],
        'lingerie' => ['pa_size', 'pa_colour', 'pa_material'],
        'massage-candles' => ['pa_type', 'pa_material', 'pa_brand'],
        'electronics' => ['pa_brand', 'pa_screen-size', 'pa_storage'],
        'clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_style'],
        'furniture' => ['pa_material', 'pa_color', 'pa_dimensions', 'pa_room'],
    ];

    // If category not in map, show default filters
    if (!isset($filters_map[$cat])) {
        return do_shortcode('[woof]');
    }

    // Build shortcode with specific filters for this category
    $taxonomies = implode(',', $filters_map[$cat]);

    return do_shortcode('[woof tax_only="' . esc_attr($taxonomies) . '" ajax_redraw="1"]');
});

 

Passo 2: Use o Shortcode

Substitua o seu atual [woof] shortcode com:

[woof_dynamic]

Coloque este shortcode em:

  • Áreas de Widget (widget de Texto/HTML)
  • Blocos de construtor de páginas (Elementor, Divi, etc.)
  • Arquivos de template do tema: <?php echo do_shortcode('[woof_dynamic]'); ?>

 

Passo 3: Configure suas Categorias

Atualize o $filters_map array com seus reais:

  • Slugs de categoria (por exemplo, ‘roda’, ‘eletrônicos’)
  • Slugs de atributos (por exemplo, ‘pa_marca’, ‘pa_tamanho’)

Encontrando seus slugs:

Slugs de Categoria:

  • Ir para Produtos → Categorias
  • Passe o mouse sobre um nome de categoria
  • Olhe o URL: ...tag_ID=123&taxonomy=product_cat&post_type=product
  • Ou edite a categoria e olhe o campo slug

Slugs de atributos:

  • Ir para Produtos → Atributos
  • Eles começam com pa_ seguido pelo nome do atributo
  • Exemplos: pa_color, pa_size, pa_brand, pa_material

 

Solução 3: Filtros Personalizados para a Página da Loja

A página principal da Loja WooCommerce precisa de um tratamento diferente, pois não é um arquivo de categoria.

Solução Combinada: Página da Loja + Páginas de Categoria

Este código lida tanto com a página Loja quanto com páginas de categoria individuais:

/**
 * Dynamic WOOF shortcode with Shop page support
 * Shows minimal filters on Shop, full filters on categories
 */
add_shortcode('woof_dynamic', function () {
    if (!function_exists('woof_shortcode')) {
        return '';
    }

    // Shop page (main product archive) - show minimal filters
    if (is_shop() AND !is_product_category() AND !is_product_tag()) {
        return do_shortcode('[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]');
    }

    // Product category pages - show category-specific filters
    $term = get_queried_object();
    if ($term AND isset($term->taxonomy) AND $term->taxonomy === 'product_cat') {
        $cat = strtolower($term->slug);

        // Define filters for each category
        $filters_map = [
            'wheel' => ['pa_sub-type', 'pa_material', 'pa_colour', 'pa_size'],
            'lingerie' => ['pa_size', 'pa_colour', 'pa_material'],
            'massage-candles' => ['pa_type', 'pa_material', 'pa_brand'],
            'electronics' => ['pa_brand', 'pa_screen-size', 'pa_storage'],
            'clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_style'],
        ];

        if (isset($filters_map[$cat])) {
            $taxonomies = implode(',', $filters_map[$cat]);
            return do_shortcode('[woof tax_only="' . esc_attr($taxonomies) . '" ajax_redraw="1"]');
        }
    }

    // Fallback - show all filters
    return do_shortcode('[woof ajax_redraw="1"]');
});

O que este código faz:

  1. Na página da loja: Mostra apenas filtros de Categorias, Cores e Preço
  2. Nas páginas de categoria: Mostra filtros específicos da categoria a partir do mapeamento
  3. Em outras páginas: Mostra filtros padrão

Personalizar filtros da página Loja: Altere esta linha para mostrar filtros diferentes na página Loja:

[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]

Parâmetros disponíveis:

  • tax_only="product_cat,pa_brand" – Mostrar apenas estas taxonomias
  • by_price="1" – Mostrar filtro de faixa de preço
  • by_only="product_cat,pa_brand" – Alternativa a tax_only
  • ajax_redraw="1" – Habilitar atualizações dinâmicas

 

Solução 4: Widget Logic para Visibilidade Condicional

Se você prefere usar widgets em vez de shortcodes, pode controlar a visibilidade do widget com lógica condicional.

Passo 1: Instale o Plugin Widget Logic

Escolha um destes plugins:

 

Passo 2: Crie Múltiplos Widgets WOOF

  1. Ir para Aparência → Widgets
  2. Adicione múltiplos widgets WOOF à sua barra lateral
  3. Configure cada widget com filtros diferentes

Passo 3: Adicionar Lógica Condicional

Para cada widget, adicione condições de visibilidade:

Mostrar apenas na categoria Roda:

is_product_category('wheel')

Mostrar apenas na categoria Lingerie:

is_product_category('lingerie')

Mostrar apenas na página Loja:

is_shop() AND !is_product_category()

Mostrar em várias categorias:

is_product_category(array('wheel', 'lingerie', 'massage-candles'))

Mostrar em todos os lugares, exceto na página da Loja:

!is_shop()

Mostrar nas categorias Eletrônicos ou Computadores:

is_product_category('electronics') || is_product_category('computers')

Exemplos do Mundo Real

Exemplo 1: Loja de Produtos Adultos

$filters_map = [
    'wheel' => ['pa_type', 'pa_material', 'pa_color', 'pa_power-source', 'pa_waterproof'],
    'lingerie' => ['pa_size', 'pa_color', 'pa_style', 'pa_material'],
    'oil' => ['pa_type', 'pa_brand', 'pa_ingredients', 'pa_volume'],
    'toys' => ['pa_category', 'pa_material', 'pa_size', 'pa_color'],
];

 

Exemplo 2: Loja de Eletrônicos

$filters_map = [
    'laptops' => ['pa_brand', 'pa_processor', 'pa_ram', 'pa_storage', 'pa_screen-size'],
    'smartphones' => ['pa_brand', 'pa_storage', 'pa_ram', 'pa_camera', 'pa_battery'],
    'headphones' => ['pa_brand', 'pa_type', 'pa_connection', 'pa_noise-cancelling'],
    'cameras' => ['pa_brand', 'pa_megapixels', 'pa_sensor-size', 'pa_video-quality'],
];

 

Exemplo 3: Loja de Moda

$filters_map = [
    'mens-clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_brand', 'pa_style'],
    'womens-clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_brand', 'pa_occasion'],
    'shoes' => ['pa_size', 'pa_color', 'pa_brand', 'pa_type', 'pa_material'],
    'accessories' => ['pa_color', 'pa_material', 'pa_brand', 'pa_type'],
];

 

Exemplo 4: Loja de Móveis

$filters_map = [
    'bedroom' => ['pa_type', 'pa_material', 'pa_color', 'pa_style', 'pa_size'],
    'living-room' => ['pa_type', 'pa_material', 'pa_color', 'pa_seating-capacity'],
    'office' => ['pa_type', 'pa_material', 'pa_color', 'pa_ergonomic'],
    'outdoor' => ['pa_type', 'pa_material', 'pa_weather-resistant', 'pa_color'],
];

 

Avançado: Incluir Preço e Categorias

Se você quiser mostrar a faixa de preço e as categorias além dos atributos:

// On category pages, add price and allow category drill-down
if (isset($filters_map[$cat])) {
    $taxonomies = implode(',', $filters_map[$cat]);
    return do_shortcode('[woof tax_only="product_cat,' . esc_attr($taxonomies) . '" by_price="1" ajax_redraw="1"]');
}

Explicação dos parâmetros:

  • product_cat – Mostra o filtro de categoria para drill-down
  • by_price="1" – Mostra o slider de faixa de preço
  • ajax_redraw="1" – Atualiza filtros dinamicamente

Solução de Problemas

Filtros não atualizando dinamicamente

Problema: Filtros permanecem estáticos após a seleção
Solução:

  • Certifique-se ajax_redraw="1" está no seu shortcode
  • Ativar “Redesenho AJAX do formulário” nas configurações do widget
  • Verifique o console JavaScript em busca de erros

Filtros errados mostrando na categoria

Problema: Categoria mostra conjunto de filtro incorreto
Solução:

  • Verifique se o slug da categoria está correto (verifique a URL ou as configurações da categoria)
  • Use letras minúsculas em $filters_map array
  • Verifique se a categoria existe no seu mapeamento

Filtros não aparecendo

Problema: Nenhum filtro visível na página
Solução:

  • Verifique se os slugs dos atributos começam com pa_ (por exemplo, pa_color não color)
  • Verifique se os atributos estão atribuídos aos produtos nessa categoria
  • Use [woof] temporariamente para ver se o shortcode básico funciona

A página da loja exibe filtros de categoria

Problema: A página da loja mostrando o conjunto de filtros errado
Solução:

  • Verificar is_shop() condição esteja primeiro em seu código
  • Verifique se !is_product_category() está incluído
  • Limpar todos os caches (WordPress, servidor, navegador)

Slugs de atributos não funcionam

Problema: Filtros não aparecendo para atributos específicos
Solução:

  • Ir para Produtos → Atributos para encontrar slugs corretos
  • Lembre-se de usar pa_ prefixo (requisito do WooCommerce)
  • Verifique a ortografia: pa_colour vs pa_color

Código não funciona após adicionar

Problema: Tela em branco ou erros após adicionar código
Solução:

  • Verifique os erros de sintaxe PHP no log de erros
  • Certifique-se de que você está editando o functions.php do tema filho
  • Verifique se todos os colchetes e aspas estão fechados
  • Remova o código e adicione-o de volta linha por linha

Considerações de Desempenho

Impacto de redesenho AJAX:

  • Cada seleção aciona uma solicitação AJAX
  • Mais produtos = maior tempo de resposta
  • Solução: Use cache e otimize o banco de dados

Múltiplos widgets vs. shortcode:

  • Widgets: Mais uso de memória (todos os widgets carregam)
  • Shortcode: Mais eficiente (apenas um conjunto carrega)
  • Recomendação: Use a abordagem de shortcode

Catálogos grandes:

  • Considere paginação nos filtros
  • Use carregamento preguiçoso para atributos
  • Implementar cache do lado do servidor

Abordagens Alternativas

Usando Múltiplos Shortcodes

Em vez de um shortcode dinâmico, use vários estáticos:

// On wheel category page
[woof tax_only="pa_sub-type,pa_material,pa_colour,pa_size" ajax_redraw="1"]

// On Lingerie category page
[woof tax_only="pa_size,pa_colour,pa_material" ajax_redraw="1"]

// On Shop page
[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]

Então use Widget Logic para mostrar o shortcode correto em cada página.

Usando Arquivos de Template

Adicione lógica condicional diretamente no template do seu tema:

<?php
if (is_product_category('books')) {
    echo do_shortcode('[woof tax_only="pa_sub-type,pa_material,pa_colour,pa_size"]');
} elseif (is_product_category('lingerie')) {
    echo do_shortcode('[woof tax_only="pa_size,pa_colour,pa_material"]');
} elseif (is_shop()) {
    echo do_shortcode('[woof tax_only="product_cat,pa_colour" by_price="1"]');
} else {
    echo do_shortcode('[woof]');
}
?>

Resumo

Problema: Mesmos filtros exibidos em todos os lugares, poluindo a interface

Solução 1: Habilitar redesenho AJAX para filtragem dependente

Solução 2: Criar [woof_dynamic] shortcode com mapeamento de categoria

Solução 3: Adicionar tratamento da página da loja com filtros mínimos

Solução 4: Use Widget Logic para controle avançado de visibilidade

Melhor Abordagem: Combine as Soluções 2 + 3 para uma filtragem dinâmica abrangente

Código da Tecla:

add_shortcode('woof_dynamic', function() {
    // Shop page logic
    if (is_shop() AND !is_product_category()) {
        return do_shortcode('[woof tax_only="product_cat" by_price="1"]');
    }
    
    // Category mapping
    $term = get_queried_object();
    if ($term AND $term->taxonomy === 'product_cat') {
        $filters_map = [
            'category-slug' => ['pa_attribute1', 'pa_attribute2'],
        ];
        // Return category-specific filters
    }
    
    return do_shortcode('[woof]'); // Fallback
});

Isso cria uma experiência de filtragem profissional e amigável, adaptada a cada categoria de produto.