Como Configurei Filtros de Produtos WooCommerce e Parei de Perder Clientes

Na primeira vez que adicionei filtros de produto à minha loja WooCommerce, foi um desastre. Eles pareciam ter sido projetados em 1999, confundiram mais meus clientes do que ajudaram e, o pior de tudo, quebraram minha página de checkout. Tive que removê-los em poucas horas.

Mas eu sabia que minha loja precisava de filtros. Quando você tem centenas de produtos, os clientes procuram uma maneira de reduzir suas escolhas rapidamente. Sem filtragem adequada, eles ficam sobrecarregados e vão embora, levando o dinheiro com eles.

Então, arregaçei as mangas e testei todas as principais soluções de filtragem WooCommerce que pude encontrar. Após semanas de testes, encontrei os melhores plugins: fáceis de configurar, bonitos e, o mais importante, ajudam os clientes a encontrar (e comprar) o que precisam.

Neste guia, compartilharei como configurei meus filtros de produto WooCommerce para que você também possa parar de perder leads.

Por que adicionar filtros de produto no WooCommerce?

Os filtros de produto facilitam para os compradores encontrarem exatamente o que procuram. Em vez de rolar por longas listas de produtos, eles podem refinar os resultados por preço, tamanho, cor, avaliação e muito mais — em apenas alguns cliques.

Isso é importante porque a má navegação geralmente leva ao abandono de carrinho e a vendas perdidas. Quando os visitantes não conseguem encontrar o que precisam rapidamente, muitos deles saem sem comprar nada.

Além disso, adicionar filtros à sua loja WooCommerce pode reduzir significativamente suas taxas de rejeição. Os clientes passam mais tempo navegando e realmente concluem suas compras.

Adicionar filtros de produto ajuda a melhorar tanto a experiência de compra quanto o desempenho da sua loja. Veja como:

• ⏱️ Economize o tempo dos seus clientes – Os compradores podem reduzir centenas de produtos a algumas boas opções em segundos, o que torna a navegação mais rápida e menos frustrante.
• 📈 Aumentar as vendas – Quando os clientes encontram o produto certo rapidamente, eles são mais propensos a adicioná-lo ao carrinho e concluir o processo de checkout.
• 🧑‍💻 Aumentar o tempo de permanência – Filtros claros mantêm os visitantes explorando sua loja em vez de saírem para procurar em outro lugar.
• 📱 Melhore as compras pelo celular – Os filtros tornam muito mais fácil para os usuários de celular navegarem pelo seu catálogo sem rolar infinitamente em uma tela pequena.
• 🌟 Construir a confiança do cliente – Uma loja limpa e bem organizada mostra que você se importa com a experiência de compra, o que ajuda a construir confiança em sua marca.

Com isso em mente, vou guiá-lo por como adicionar filtros de produtos WooCommerce. Aqui está tudo o que abordarei neste guia:

Método 1: Adicionar um Filtro de Produtos WooCommerce Estilo Amazon (Recomendado)

WPFilters é o melhor plugin de filtro para WooCommerce – é fácil para iniciantes e tem uma ótima aparência logo de cara. Você não precisa ser um desenvolvedor para configurá-lo, e ele dá à sua loja filtros limpos, no estilo Amazon, que facilitam aos clientes encontrar o que procuram.

Além disso, ele funciona perfeitamente com qualquer tema do WooCommerce, tornando-o uma escolha segura, independentemente do tema que você esteja usando.

Para mais informações sobre esta ferramenta, consulte nossa análise detalhada do WPFilters.

Passo 1: Instalar e Ativar WPFilters

Para começar a filtrar produtos, você precisará instalar o WPFilters.

Primeiro, você precisará se inscrever para uma conta WPFilters no site do SearchWP. SearchWP é a empresa por trás do WPFilters, e eles oferecem suporte confiável se você precisar de ajuda.

Clique no botão Obter WPFilters Agora, escolha um plano e siga as etapas para concluir o checkout.

Depois de se inscrever, faça login no painel da sua conta e baixe o arquivo ZIP do plugin. Você o encontrará na área de downloads da sua conta.

Agora você está pronto para instalar e ativar o plugin. No seu painel de administração do WordPress, vá para Plugins » Adicionar Plugin.

Na próxima tela, clique em ‘Enviar plugin’ para abrir o carregador de arquivos.

Em seguida, clique no botão ‘Escolher Arquivo’, selecione o arquivo zip no seu computador local e clique em ‘Instalar Agora’.

Não se esqueça de clicar em ‘Ativar’ para concluir o processo de instalação. Se precisar de ajuda, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Após a ativação, o WPFilters iniciará automaticamente um assistente de configuração para ajudá-lo a começar. Clique no botão ‘Vamos Começar’.

Este assistente irá guiá-lo pela configuração básica e conectar o plugin à sua loja WooCommerce.

Simplesmente siga as instruções na tela do assistente de configuração. O processo leva apenas um ou dois minutos e garante que tudo esteja configurado corretamente para sua loja.

Passo 2: Criar um Novo Elemento de Filtro para Seus Produtos WooCommerce

Agora que o WPFilters está instalado, é hora de criar seu primeiro elemento de filtro. Um elemento de filtro é simplesmente uma opção de filtragem que os clientes podem usar, como filtrar por cor ou tamanho.

Para começar, navegue até WPFilters » Elementos em seu painel de administração do WordPress. Em seguida, clique no botão ‘Adicionar Novo’ na parte superior da página.

Primeiro, você precisará inserir um nome para seu filtro.

Este nome é apenas para sua referência na área administrativa. Mas recomendo escolher algo descritivo como “Cor” ou “Filtro” para facilitar a organização.

Em seguida, você escolherá o tipo de campo de filtro que determina como os clientes interagirão com este filtro.

O WPFilters oferece várias opções:

• Checkbox – Permite que os clientes selecionem várias opções de uma vez
• Radio – Permite apenas uma seleção por vez
• Dropdown – Mostra opções em um menu suspenso para economizar espaço
• Dropdown (Seleção Múltipla) – O tipo de dropdown que permite várias seleções
• Pesquisar – Adicione uma caixa de pesquisa para os clientes digitarem o que procuram
• Slider – Perfeito para faixas de preço ou valores numéricos
• Limpar – Adicione um botão para limpar todos os filtros selecionados

Para a maioria dos atributos de produto, como cor, tamanho ou marca, recomendo usar a opção de checkbox. É a maneira mais fácil para os clientes usarem e permite que combinem várias seleções.

Após escolher o tipo de filtro, você precisará adicionar uma fonte de dados. Isso informa ao WPFilters quais informações do produto filtrar, como categorias de produtos, tags ou atributos personalizados.

Clique no menu suspenso de fonte de dados e selecione o atributo que você deseja filtrar. Se você configurou atributos de produto no WooCommerce, eles aparecerão nesta lista.

Passo 3: Personalizar Seu Filtro de Produtos WooCommerce

Com seu elemento de filtro criado, você pode agora personalizar como ele se parece e se comporta em sua loja. O WPFilters oferece várias opções para fazer o filtro corresponder à sua marca e melhorar a experiência do usuário.

Você pode começar ajustando as configurações na seção 'Container', onde você pode:

• Mostrar Título – Para exibir ou ocultar o nome do filtro acima das opções.
• Recolhível – Útil se você tiver vários filtros em uma página. Os clientes podem expandir ou recolher cada filtro para manter o layout limpo.
• Ver mais/menos – Limite o número de opções mostradas inicialmente e permita que os clientes expandam a lista se quiserem ver mais. Isso ajuda a evitar que longas listas de filtros dominem a página.
• Horizontal – Exibe as opções de filtro em uma linha em vez de uma coluna. Isso funciona bem para filtros simples com apenas algumas escolhas, como tamanhos.

Veja como ajusto minhas configurações de 'Container':

Em seguida, vá para a seção de configurações de Item.

• Contagem de Itens – Mostra quantos produtos correspondem a cada opção. Por exemplo, os clientes verão Azul (15) ou Vermelho (8), para que saibam o que está disponível antes de clicar.
• Vazio – Oculta opções sem produtos correspondentes, o que mantém seus filtros limpos e evita becos sem saída.
• Hierárquico – Agrupa opções relacionadas, permitindo que os clientes naveguem de uma categoria principal para subcategorias, tornando-o perfeito para lojas maiores.

Depois de ajustar essas configurações, clique em ‘Salvar Alterações’ para armazenar sua configuração.

O WPFilters atualizará a pré-visualização ao vivo dentro deste construtor.

Se algo não parecer correto, você pode voltar e ajustar as configurações até que esteja perfeito.

Passo 4: Incorporar o Filtro em Sua Loja

Agora que seu filtro está pronto, é hora de adicioná-lo à sua loja online. O WPFilters oferece opções flexíveis para onde você deseja exibir seus filtros.

Você pode adicionar filtros diretamente à sua página de loja, onde os clientes navegam pelos produtos, ou colocá-los na sua barra lateral para fácil acesso em qualquer página.

Vou mostrar os dois métodos para que você possa escolher o que funciona melhor para sua loja.

Opção 1: Exibir Filtro de Atributo de Produto na Página da Loja WooCommerce

Se você estiver usando um Tema de Bloco (como Divi ou Twenty Twenty-Five), pode simplesmente abrir sua página da Loja no Editor de Site e arrastar o bloco de Filtro para o local desejado.

Primeiro, no construtor visual do WPFilters, clique no botão ‘Incorporar’.

Em seguida, selecione o método de Bloco Gutenberg entre as opções disponíveis.

Em seguida, você escolherá se deseja criar uma nova página ou selecionar uma existente.

Se você já tem uma página de loja configurada, basta selecioná-la no menu suspenso.

Clique em ‘Vamos Lá!’

O construtor visual abrirá sua página de loja no editor de blocos.

Em seguida, basta clicar no ícone ‘+’ para adicionar um bloco de Elemento WPFilters.

No painel de configurações do bloco, selecione o elemento de filtro que você acabou de criar.

Você o verá aparecer instantaneamente em seu editor de conteúdo.

Você pode repetir este processo para todos os elementos WPFilters que você criou.

Quando terminar, clique em ‘Salvar Alterações’ ou ‘Atualizar’ para publicar seu filtro.

É isso – seu filtro de produtos WPFilters agora está ativo em sua página de loja e pronto para os clientes usarem:

Opção 2:  Exibir Filtro de Atributos de Produto na Barra Lateral

Adicionar filtros à sua barra lateral é outra ótima opção, especialmente se você quiser que eles fiquem visíveis em várias páginas. A barra lateral mantém seus filtros acessíveis sem ocupar espaço na sua área de conteúdo principal.

Para adicionar um filtro à sua barra lateral, navegue até Aparência » Widgets em sua área de administração. Isso abre o personalizador de widgets, onde você pode gerenciar o conteúdo da sua barra lateral.

A partir daqui, você pode procurar a Barra Lateral do WooCommerce na lista de áreas de widgets disponíveis. Clique nela para expandir a barra lateral e ver quais widgets estão atualmente lá.

Em seguida, clique no ícone de mais para adicionar um novo widget e, em seguida, adicione o widget WPFilters Element.

No painel Configurações do Elemento que aparece, selecione seu filtro no menu suspenso.

Você pode adicionar vários widgets de filtro para oferecer aos clientes várias opções de filtragem.

Depois de selecionar seu filtro, clique em ‘Atualizar’ ou ‘Publicar’ para salvar as alterações da sua barra lateral.

Seu filtro agora aparecerá em todas as páginas do WooCommerce que exibem esta barra lateral:

Passo 5: Testar Seu Filtro de Produtos WooCommerce

Antes de terminar, reserve alguns minutos para testar seus filtros. Abra sua loja em uma janela anônima para vê-la da mesma forma que seus clientes a veem.

Tente diferentes combinações de filtros para garantir que os resultados sejam atualizados corretamente. Por exemplo, selecione 'Verde' e verifique se apenas os produtos correspondentes aparecem.

Também é uma boa ideia testar cada atributo que você adicionou para garantir que a lógica de filtragem funcione sem problemas. Preste atenção às contagens de produtos ao lado de cada opção também. Elas devem mudar à medida que você aplica ou remove filtros.

Se algo parecer incorreto, verifique novamente seus atributos de produto no WooCommerce. Assim que tudo funcionar perfeitamente, seus filtros estarão prontos e comprar em sua loja ficou muito mais fácil.

Método 2: Adicionar um Filtro Simples de Produto para WooCommerce (Método Gratuito)

Se você estiver procurando uma alternativa mais simples ao WPFilters, o Filter Everything é uma boa opção. Escolhi este plugin porque ele é leve e oferece uma versão gratuita com todos os recursos importantes de filtragem.

Observe que o Filter Everything funciona e fica melhor em temas Clássicos. Ele não suporta blocos, então você precisará usar um shortcode, que geralmente é menos flexível.

Passo 1: Instalar e Configurar o Plugin

Primeiro, vá para Plugins » Adicionar Plugin em sua área administrativa do WordPress.

Na próxima tela, use a barra de pesquisa para encontrar rapidamente o plugin Filter Everything.

Em seguida, clique em 'Instalar Agora' e 'Ativar' nos resultados da pesquisa para concluir o processo.

Para obter ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, navegue até Filter Everything » Settings para configurar algumas opções importantes. Essas configurações controlam como seus filtros se comportam no front-end da sua loja.

Primeiro, você pode configurar o comportamento em dispositivos móveis e as configurações AJAX:

• Dispositivos móveis – Escolha se os filtros serão recolhidos em dispositivos móveis ou exibidos como no desktop. Recomendo mantê-los recolhidos e movê-los para o topo, para que sejam mais fáceis de encontrar e não ocupem muito espaço em telas menores.
• AJAX – Escolha se os filtros atualizam os resultados instantaneamente ou recarregam a página após cada seleção. Você vai querer habilitar isso para que os produtos sejam atualizados instantaneamente sem que a página inteira recarregue, criando uma experiência de compra mais rápida.

Você também verá ‘ID HTML ou classe do Contêiner de Posts.’ Isso informa ao plugin qual parte da página deve ser atualizada quando os filtros são aplicados. Está definido como #primary por padrão e, na maioria dos casos, você pode deixá-lo como está com segurança.

Finalmente, vá para a seção ‘Outros’ para ajustar algumas opções visuais e avançadas:

• Cor Primária do Widget – Afeta os botões e caixas de seleção do filtro, portanto, escolha uma cor que combine com o esquema de cores da sua marca.
• Altura máxima do contêiner do filtro, px – Define uma altura máxima para a área do filtro. Se a lista ficar muito longa, ela se tornará rolável em vez de empurrar a página para baixo.
• Integração de Filtros Selecionados (Chips) – Permite exibir filtros ativos como pequenos “chips”. Você pode escolher onde eles aparecem adicionando um nome de local, como before_main_content.
• Modo de depuração – Exibe mensagens úteis se algo não estiver funcionando, o que pode ser útil durante a configuração.

Veja como fica na minha tela:

Depois de ajustar essas configurações, clique em ‘Salvar Alterações’ para armazenar sua configuração.

Passo 2: Criar um Conjunto de Filtros

Agora é hora de criar um conjunto de filtros, que é simplesmente um grupo de vários filtros que trabalham juntos. Por exemplo, você pode ter filtros para categorias, cores e tamanhos em um único conjunto.

Acesse Filter Everything » Filter Sets no seu painel do WordPress. É aqui que você organizará e gerenciará todos os seus filtros de produtos.

Isso o levará ao construtor de conjuntos de filtros.

Clique no botão ‘Adicionar Novo Conjunto de Filtros’ para começar a construir seu primeiro conjunto.

Em seguida, você pode dar um nome descritivo a ele.

Isso é apenas para sua referência, mas recomendo usar um nome descritivo, como “Filtros de Produto” ou simplesmente “Filtros”, para facilitar a organização.

Em seguida, escolha o tipo de postagem que deseja filtrar – páginas, posts, produtos ou tipos de postagem personalizados.

Como você está trabalhando com produtos WooCommerce, selecione ‘Produto’ no menu suspenso e clique em ‘Adicionar Filtro’.

Agora você configurará seu primeiro filtro individual dentro deste conjunto:

• Filtrar por – escolha ‘Categorias de Produtos’ no menu suspenso. Isso informa ao plugin para filtrar seus produtos com base em suas categorias atribuídas.
• Título do Filtro – Use algo como Categorias ou Categorias de Produtos, o que melhor se adapta à sua loja.
• Nome da Variável para URL – este campo é preenchido automaticamente com algo como categories. Ele ajuda a criar URLs limpas e otimizadas para SEO quando os clientes usam seus filtros.
• Exibir no Widget – um menu suspenso funciona bem para categorias, pois os produtos podem pertencer a muitas categorias, e também facilita a visualização de subcategorias.

Você pode adicionar mais filtros a este conjunto clicando em ‘Adicionar Filtro’ novamente. Recomendo adicionar filtros de preço, cor, tamanho ou quaisquer outros atributos de produto que sua loja utiliza.

Depois de adicionar todos os filtros de que precisa, clique em ‘Publicar’ para tornar seu conjunto de filtros ativo.

Passo 3: Adicionar Filtros à Sua Loja WooCommerce

Com seu conjunto de filtros criado, você está pronto para exibi-lo em sua loja WooCommerce. O Filter Everything oferece opções flexíveis para onde colocar seus filtros.

Deixe-me mostrar como adicionar filtros diretamente à sua barra lateral para fácil acesso, ou ao conteúdo da sua página de loja usando blocos Gutenberg.

Opção 1: Exibir Filtro de Produto Simples na Barra Lateral

Adicionar filtros à sua barra lateral é rápido e funciona muito bem se você quiser que eles fiquem visíveis em várias páginas do WooCommerce. A barra lateral mantém seus filtros acessíveis sem ocupar espaço de conteúdo principal.

Navegue até Aparência » Widgets no seu painel do WordPress. Isso abre o personalizador de widgets onde você gerencia todo o conteúdo da sua barra lateral.

No painel de widgets, procure pela sua área de barra lateral do WooCommerce.

Em seguida, clique no botão ‘+’ para adicionar o widget Filter Everything – Filter.

As configurações do widget serão abertas automaticamente. Em seguida, você pode escolher o que exibir:

• Título – Mostra o título do filtro na parte superior do widget.
• O número de posts encontrados – Exibe quantos produtos correspondem aos filtros selecionados.
• Termos selecionados (Chips) – Exibe os filtros ativos como pequenos chips, para que os clientes possam ver o que foi aplicado rapidamente.
• Layout horizontal – Exibe os filtros em linha em vez de coluna, o que funciona bem para layouts compactos.

Veja o que você verá na tela:

Você pode brincar com essas configurações para se adequar ao design da sua loja.

Quando terminar, clique em ‘Atualizar’ para publicar seu widget.

É isso!

Seus filtros agora aparecerão na barra lateral em todas as páginas que exibem essa área de barra lateral.

Opção 2: Exibir Filtro de Produto Simples na Página da Loja WooCommerce

Para adicionar filtros diretamente à sua página de loja, você usará o shortcode [fe_widget] dentro do editor Gutenberg.

Se você tiver mais de um conjunto de produtos, precisará adicionar o ID dele nesse shortcode, por exemplo, [fe_widget id="123"]. Você pode encontrar este número de ID listado ao lado do nome do seu conjunto na página Filter Everything » Filter Sets.

Para adicionar seu filtro de produtos, navegue até Páginas » Todas as Páginas para abrir sua página de loja no editor de blocos.

No editor Gutenberg, cole o shortcode que você copiou anteriormente em um bloco de parágrafo comum.

Se você quiser ver como fica, basta visualizar sua página. Eles devem aparecer exatamente onde você colocou o bloco de shortcode.

Assim que estiver satisfeito com a colocação, clique em 'Atualizar' ou 'Publicar' para salvar suas alterações.

Seus filtros de produto agora estão ativos em sua página de loja:

Dica Bônus: Adicionar Pesquisa Inteligente de Produtos WooCommerce

Agora que você adicionou filtros de produtos, há mais um recurso que pode levar a navegação da sua loja online para o próximo nível: pesquisa inteligente de produtos.

Enquanto os filtros ajudam os clientes a navegar por atributos específicos, uma barra de pesquisa inteligente de produtos permite que eles digitem exatamente o que estão procurando. Essa combinação oferece aos compradores a flexibilidade de encontrar produtos da maneira que preferirem.

A pesquisa inteligente de produtos WooCommerce vai além da pesquisa básica do WordPress. Ela entende atributos de produtos, categorias, SKUs e até correspondências parciais para mostrar resultados relevantes rapidamente.

Por exemplo, se alguém pesquisar por “tênis azuis”, uma pesquisa inteligente mostrará todos os sapatos azuis em sua categoria de tênis. Uma pesquisa regular do WordPress pode perder produtos se a frase exata não estiver no título.

Adicionar filtros e busca inteligente significa que você está cobrindo todas as bases. Seus clientes podem comprar da maneira que se sentirem mais confortáveis, o que significa mais compras concluídas para você.

Para configurar isso, confira nosso guia detalhado sobre como fazer uma pesquisa inteligente de produtos WooCommerce. Ele o guiará por todo o processo passo a passo.

Perguntas Frequentes Sobre a Configuração de Filtros de Produtos WooCommerce

Se você ainda tiver dúvidas sobre o uso de filtros de produtos no WooCommerce, estas respostas rápidas devem ajudar.

Existe um plugin confiável e RÁPIDO para filtragem de produtos?

Sim, WPFilters é um dos plugins mais confiáveis e rápidos para filtragem de produtos WooCommerce. Ele foi construído especificamente para velocidade e usa tecnologia AJAX para atualizar resultados sem recarregar a página, mantendo sua loja funcionando sem problemas.

Melhor filtro de produtos gratuito para WooCommerce?

A versão gratuita do Filter Everything é uma boa opção. Ela suporta filtros básicos como categorias, preços e atributos sem desacelerar seu site. A única desvantagem é que funciona melhor em temas clássicos.

Como filtrar produtos WooCommerce por atributos personalizados?

Primeiro, você precisará criar seus atributos em Produtos » Atributos e atribuí-los aos seus produtos. Em seguida, use um plugin de filtro WooCommerce como o WPFilters para exibir esses atributos como filtros em sua página de loja.

Como criar uma página de loja WooCommerce com múltiplos filtros?

Você pode adicionar vários widgets de filtro à barra lateral da sua loja, ou usar um plugin de filtro de produtos que permite combinar filtros como preço, categoria, avaliação e atributos em um único painel.

Qual é o código do filtro de produtos no WooCommerce?

O WooCommerce não inclui um único shortcode para filtros avançados. A maioria dos recursos de filtragem vem de widgets ou plugins, que geram seus próprios shortcodes ou blocos que você pode colocar em qualquer lugar do seu site.

Próximos Passos para Concluir a Configuração da Sua Loja WooCommerce

Agora que seus filtros de produtos WooCommerce estão configurados, você pode querer conferir estes guias relacionados para melhorar ainda mais sua loja WooCommerce:

• Guia Definitivo de SEO para WooCommerce
• Como Personalizar Páginas de Produtos do WooCommerce
• Como Vender Pacotes de Produtos no WooCommerce
• Como Criar Facilmente Pesquisas Pós-Compra no WooCommerce
• Melhores Plugins de Grade de Produtos para WooCommerce

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.