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á:
- Como habilitar filtragem dependente/condicional (filtros atualizam com base na seleção)
- Como mostrar filtros diferentes por categoria de produto
- Como criar conjuntos de filtros personalizados para a página Loja
- 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:
- Ir para Aparência → Widgets
- Encontre seu widget WOOF
- 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:
- Na página da loja: Mostra apenas filtros de Categorias, Cores e Preço
- Nas páginas de categoria: Mostra filtros específicos da categoria a partir do mapeamento
- 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 taxonomiasby_price="1"– Mostrar filtro de faixa de preçoby_only="product_cat,pa_brand"– Alternativa a tax_onlyajax_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:
- Lógica de Widget: https://wordpress.org/plugins/widget-logic/
- Mostrar Widget por Lógica: https://github.com/realmag777/Show-WordPress-Widget-by-Logic
Passo 2: Crie Múltiplos Widgets WOOF
- Ir para Aparência → Widgets
- Adicione múltiplos widgets WOOF à sua barra lateral
- 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-downby_price="1"– Mostra o slider de faixa de preçoajax_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_maparray - 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_colornãocolor) - 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_colourvspa_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.