Como Filtrar Produtos WooCommerce (Tutorial Passo a Passo)

Após trabalhar com inúmeros proprietários de sites WooCommerce, aprendemos que lojas online de sucesso compartilham uma característica principal: elas facilitam para os clientes encontrarem exatamente o que desejam.

Grandes marketplaces como a Amazon usam filtros por preço, cor, tamanho e ordenação por novidades porque entendem como os clientes compram.

A filtragem de produtos é essencial para o crescimento de um negócio de eCommerce. Quando os clientes não conseguem encontrar rapidamente o que procuram, eles geralmente saem sem comprar.

É por isso que criamos este guia passo a passo para ajudá-lo a adicionar filtragem de produtos eficaz à sua loja WooCommerce.

Você aprenderá como criar filtros baseados em atributos que tornam sua loja mais fácil de navegar e mais agradável para os compradores.

Por que Filtrar Produtos WooCommerce por Atributo?

Os filtros tornam super fácil para os clientes navegarem pelos produtos em sua loja WooCommerce.

Eles permitem que os compradores restrinjam sua pesquisa com base em diferentes atributos, incluindo cor, faixa de preço, tecido, tamanho e muito mais.

Em vez de rolar por toda a sua coleção de produtos, os usuários podem simplesmente navegar pelos produtos em que estão interessados.

Adicionar filtros pode ajudar a melhorar a experiência do usuário, melhorar a funcionalidade de busca e reduzir as taxas de rejeição em sua loja online.

Eles também podem aumentar as vendas, permitindo que os clientes vejam todas as opções disponíveis para os produtos em que estão interessados, ajudando-os a fazer compras mais informadas.

Dito isso, vamos ver como você pode filtrar facilmente os produtos em sua loja WooCommerce. Mostraremos como filtrar produtos WooCommerce por atributo e atributo personalizado:

Como Filtrar Produtos WooCommerce por Atributo

Se você está procurando uma maneira rápida e fácil de filtrar produtos WooCommerce, então este método é para você. Mostraremos como configurar um filtro simples por configurações de atributo usando um plugin de filtro de produtos WooCommerce.

Primeiro, você precisa instalar e ativar o plugin YITH WooCommerce Ajax Product Filter. Para mais instruções, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, acesse a página YITH » Ajax Product Filter no painel do WordPress.

A partir daqui, clique no botão ‘+ Criar um novo preset’ para começar a criar um preset de filtro.

Uma vez lá, você pode começar digitando um nome para o filtro na caixa ‘Nome do preset’.

Lembre-se de que o nome do preset não será exibido em sua loja e serve apenas para sua referência.

Em seguida, basta escolher ‘Horizontal’ como o layout predefinido e, em seguida, clicar no botão ‘+ Adicionar um novo filtro’ na parte inferior.

Se você estiver usando a versão gratuita do plugin, essa opção não estará disponível para você. Em vez disso, você terá o layout predefinido ‘Padrão’.

Agora você pode começar a criar um filtro para seus produtos WooCommerce.

Criar um Filtro para Produtos WooCommerce

Primeiro, você precisará digitar um nome de filtro ao lado da opção ‘Nome do Filtro’.

Por exemplo, se você estiver criando um filtro que ajudará os clientes a classificar por categorias de produtos, você pode nomeá-lo ‘Filtrar por Categoria’.

Em seguida, você pode selecionar os parâmetros para o filtro no menu suspenso 'Filtrar por'.

Para saber mais sobre as diferenças entre essas opções, você pode ler nosso guia sobre como adicionar tags, atributos e categorias ao WooCommerce.

Se você estiver criando um filtro para classificar produtos por diferentes faixas de preço, deverá escolher a opção ‘Faixa de Preço’. Da mesma forma, se você quiser classificar produtos por popularidade ou avaliação média, precisará escolher a opção ‘Ordenar por’.

Você também pode escolher a opção 'Taxonomia' se quiser filtrar tags de produtos, categorias, cores, tamanhos, materiais, estilos e muito mais.

Embora coisas como cor e tamanho sejam atributos, o WordPress tecnicamente os armazena como taxonomias, então você os encontrará nesta opção. Para este tutorial, usaremos a opção 'Taxonomia'.

Depois de fazer isso, você deve escolher entre as opções de taxonomia para o filtro. Por exemplo, se você quiser filtrar produtos por cor, precisará escolher essa opção no menu suspenso.

Como estamos criando um filtro para categorias de produtos, selecionaremos a opção ‘Categorias de Produtos’.

Em seguida, você deve digitar todas as categorias de produtos em seu site na seção ‘Escolher termos’.

Depois disso, você pode escolher como deseja que o filtro seja exibido no front-end de sua loja no menu suspenso ‘Tipo de filtro’.

Você pode exibir o filtro como uma caixa de seleção, menu suspenso, texto, amostras de cores e muito mais. Para este tutorial, escolheremos a opção ‘Selecionar’ para adicionar um menu suspenso.

Em seguida, ative o interruptor ‘Mostrar Campo de Pesquisa’ se desejar habilitar uma caixa de pesquisa dentro do menu suspenso.

Você também pode exibir o filtro que está criando como um alternador ativando o interruptor ‘Mostrar como alternador’. Em seguida, os clientes poderão ativar e desativar o filtro.

Depois de fazer isso, basta escolher uma ordem padrão para os termos filtrados no menu suspenso ‘Order by’ (Ordenar por). As categorias de filtro serão exibidas na ordem que você escolher.

Você pode classificar as categorias de filtro usando o nome, a contagem de termos ou o slug. Você também pode escolher o ‘Order type’ (Tipo de ordem) para os termos filtrados em ordem crescente (ASC) ou decrescente (DESC).

Finalmente, clique no botão ‘Save Filter’ (Salvar Filtro) na parte inferior para salvar seu filtro.

Agora, repita o processo para criar vários filtros.

Depois de fazer isso, volte ao topo e mude para a aba ‘General Settings’ (Configurações Gerais) para configurar algumas opções.

Configure as Configurações Gerais

Aqui, você tem que começar escolhendo uma opção de ‘Filter mode’ (Modo de filtro). Você pode selecionar se deseja aplicar filtros em tempo real usando AJAX ou se deseja mostrar um botão ‘Apply Filters’ (Aplicar Filtros) em seu site.

Em seguida, você também deve fazer uma escolha entre mostrar um botão de salvar ou exibir os resultados do filtro imediatamente.

Depois de fazer isso, escolha se deseja mostrar os resultados do filtro na mesma página usando AJAX ou se deseja recarregar os resultados em uma nova página.

Em seguida, role para baixo até a opção ‘Hide empty terms’ (Ocultar termos vazios) e ative o interruptor se você não quiser exibir termos de filtro que estejam vazios.

Por exemplo, se você adicionou uma categoria ‘Canecas’ em sua loja WooCommerce, mas ela atualmente não tem nenhum item, ela não será exibida na lista ‘Filter by Category’ (Filtrar por Categoria).

Depois disso, prossiga e ative o interruptor ‘Hide out of stock products’ (Ocultar produtos fora de estoque) se você não quiser exibir produtos fora de estoque nos resultados.

Você pode deixar as outras configurações como padrão ou configurá-las de acordo com sua preferência.

Após fazer suas escolhas, clique no botão ‘Save options’ (Salvar opções) para armazenar suas alterações e mude para a aba ‘Customization’ (Personalização) no topo.

Configure as Configurações de Personalização (Somente Plugin Premium)

Observação: A aba ‘Personalização’ não estará disponível se você estiver usando a versão gratuita do plugin.

A partir daqui, você pode escolher a cor do rótulo do seu filtro WooCommerce, a cor do termo textual, o tamanho da amostra de cor, a cor da área do filtro e muito mais.

Adicionar cores pode ajudar seu filtro WooCommerce a ter uma aparência mais esteticamente agradável e a combinar com a marca da sua loja de e-commerce.

Depois de fazer suas escolhas, clique no botão ‘Salvar Opções’ e mude para a aba ‘SEO’ no topo.

Configurar as Definições de SEO

Uma vez lá, ative o interruptor ‘Ativar opção de SEO’ para ativar as definições.

Agora, você pode adicionar meta tags do menu suspenso para usar em suas páginas filtradas. Isso irá melhorar o SEO do seu site.

Para mais detalhes, você pode querer ler nosso artigo sobre metadados e meta tags do WordPress.

Você também pode alternar o interruptor para adicionar o atributo 'nofollow' aos seus links de filtro. Isso adiciona uma tag especial que informa aos mecanismos de busca para não seguir esses links específicos.

Recomendamos ativar isso. Isso impede que o Google perca tempo rastreando centenas de páginas de filtro temporárias para que ele possa se concentrar em classificar suas páginas de produto reais.

Quando estiver satisfeito, clique no botão ‘Salvar Opções’ para armazenar as definições.

Adicionar o Filtro WooCommerce à Página da Loja

Para adicionar os filtros que você acabou de criar à sua página principal da loja WooCommerce, você precisa mudar para a aba 'Predefinições de filtro' no topo.

Uma vez lá, simplesmente copie o shortcode da predefinição de filtro que você acabou de criar.

Em seguida, basta abrir sua página da Loja WooCommerce no editor de blocos no painel do WordPress. Geralmente, esta é a página intitulada ‘Loja’, onde todos os seus produtos são listados.

Uma vez lá, clique no botão Adicionar Bloco ‘(+)’ no canto superior esquerdo para encontrar o bloco Shortcode.

Agora, simplesmente cole o shortcode da predefinição de filtro que você copiou no bloco Shortcode.

Finalmente, clique no botão ‘Publicar’ ou ‘Atualizar’ para salvar suas alterações.

Você pode agora visitar seu site WordPress para ver o filtro de atributo personalizado do WooCommerce em ação.

Como Filtrar por um Novo Atributo Global

Se você precisar filtrar produtos por detalhes específicos como ‘Material’ ou ‘Marca’, você deve usar um Atributo Global.

Um Atributo Global é criado no seu painel principal do WordPress e pode ser atribuído a muitos produtos diferentes. Isso os conecta para que os clientes possam filtrar por esse termo específico.

Isso é diferente de um ‘Atributo de Produto Personalizado’ local, que é criado diretamente dentro de uma única página de produto e não pode ser facilmente usado para filtragem.

Criar um Atributo Global

Para criar um atributo global, você deve visitar a página Produtos » Atributos no painel do WordPress.

Uma vez lá, comece inserindo um nome e um slug para o atributo de taxonomia personalizada.

Por exemplo, se você quiser criar um filtro para um material de produto específico, então você pode nomear o atributo ‘Filtrar por Material’.

Em seguida, você deve marcar a caixa ‘Habilitar Arquivos’ se quiser exibir todos os itens que compartilham esse atributo em uma única página. 

Depois disso, clique no botão ‘Adicionar Atributo’ na parte inferior.

Assim que o atributo for criado, clique no link ‘Configurar Termos’ para adicionar termos ao atributo.

Isso o direcionará para uma nova tela, onde você deve digitar um termo na caixa ‘Nome’.

Por exemplo, se você criou um atributo chamado ‘Filtrar por Material’, então você pode adicionar os materiais individuais como termos, como lã. Você pode adicionar quantos termos quiser a um atributo.

Assim que terminar, clique no botão ‘Adicionar novo filtro por Material’ para salvar o termo.

Adicionar o Atributo Global a um Produto

Após criar um atributo, você precisará adicioná-lo a produtos individuais do WooCommerce.

Para isso, abra a página do produto que você deseja editar. A partir daqui, role para baixo até a seção ‘Dados do produto’ e mude para a aba ‘Atributos’.

Em seguida, clique no menu suspenso. Em vez de selecionar ‘Atributo de produto personalizado’, você deve procurar o nome do atributo global que acabou de criar (por exemplo, ‘Filtrar por Material’).

Selecione-o na lista e clique no botão ‘Adicionar’.

Agora que o atributo personalizado foi adicionado, basta procurar o termo que corresponde ao produto na opção ‘Selecionar Termos’.

Por exemplo, se você criou um atributo para material e o produto que você está editando é feito de lã, então você precisará escolher ‘Lã’ no menu suspenso.

Quando terminar, clique no botão ‘Salvar atributos’.

Em seguida, clique no botão ‘Atualizar’ ou ‘Publicar’ na parte superior para salvar suas alterações.

Agora você terá que repetir o processo para todos os produtos que compartilham o mesmo atributo.

Criar um Filtro de Atributo Personalizado Usando um Plugin

Em seguida, você precisará instalar e ativar o plugin YITH WooCommerce Ajax Product Filter. Para mais instruções, por favor, veja nosso guia sobre como instalar um plugin do WordPress.

Observação: Você pode usar a versão gratuita ou premium do plugin para criar um filtro de atributo personalizado para WooCommerce.

Após a ativação, vá para a página YITH » Ajax Product Filter no painel do WordPress.

A partir daqui, prossiga e clique no botão ‘+ Criar um novo preset’.

Em seguida, você terá que digitar um nome para o preset que está criando na caixa ‘Nome do preset’.

Quando terminar, clique no botão ‘+ Adicionar um novo filtro’ na parte inferior para começar a criar um filtro de atributo personalizado do WooCommerce.

Primeiro, você terá que digitar um nome na caixa ‘Nome do filtro’.

Por exemplo, se você estiver criando um filtro que ajudará os clientes a classificar diferentes opções de material, você pode nomeá-lo ‘Filtro para Material’.

Em seguida, basta selecionar ‘Taxonomia’ no menu suspenso ‘Filtrar por’. Se você estiver usando a versão gratuita do plugin, essa opção será escolhida para você por padrão.

Agora, o atributo personalizado que você criou já estará disponível no menu suspenso ao lado da opção ‘Escolher taxonomia’.

Escolha o atributo personalizado na lista suspensa e digite os termos do atributo na caixa ‘Escolher termos’.

Em seguida, você deve escolher como deseja que o filtro seja exibido na parte frontal da sua loja no menu suspenso ‘Tipo de filtro’.

O filtro pode ser exibido como uma caixa de seleção, menu suspenso, texto, amostras de cores e muito mais.

Depois de fazer isso, escolha uma ordem padrão para os termos filtrados no menu suspenso ‘Ordenar por’.

Você pode classificar as categorias de filtro usando o nome, contagem de termos ou slug. Você também pode selecionar o ‘Tipo de ordem’ para os termos filtrados em ordem crescente (ASC) ou decrescente (DESC).

Finalmente, clique no botão ‘Salvar Filtro’ na parte inferior para salvar seu filtro de atributo personalizado.

Em seguida, você precisa alternar para a guia ‘Configurações Gerais’ na parte superior. A partir daqui, você pode escolher um modo de filtro, ocultar termos vazios e configurar outras configurações de acordo com suas necessidades.

Quando terminar, clique no botão ‘Salvar opções’ para armazenar suas alterações e mude para a guia ‘Personalização’ na parte superior.

Observação: Se você estiver usando a versão gratuita, essas configurações de personalização não estarão disponíveis.

A partir daqui, você pode personalizar a aparência do seu preset de filtro na parte frontal do seu site.

Por exemplo, você pode escolher a cor do estilo do rótulo, a cor do termo textual, o tamanho da amostra de cor, a cor da área do filtro e muito mais.

Depois de fazer suas escolhas, clique no botão ‘Salvar Opções’ e mude para a guia ‘SEO’ na parte superior.

A partir daqui, ative o interruptor ‘Ativar opção de SEO’ para ativar as configurações.

Você pode adicionar meta tags de robôs no menu suspenso para usar em suas páginas filtradas. Isso otimizará o SEO do seu site.

Você também pode ativar o interruptor ‘Adicionar “nofollow” a âncoras de filtro’ para adicionar automaticamente o atributo nofollow a todas as âncoras de filtro.

Assim que estiver satisfeito, clique no botão ‘Salvar Opções’ para armazenar as configurações.

Adicionar o Filtro de Atributo Personalizado a uma Página de Produtos WooCommerce

Para adicionar o filtro de atributo personalizado a uma página de loja WooCommerce, você precisará alternar para a aba ‘Presets de filtro’ no topo.

A partir daqui, copie o shortcode do filtro de atributo personalizado.

Em seguida, abra sua página de produtos no editor de blocos a partir da barra lateral de administração do WordPress.

Aqui, clique no botão Adicionar Bloco ‘(+)’ no canto superior esquerdo para arrastar e soltar o bloco Shortcode.

Depois disso, simplesmente cole o shortcode do preset de filtro que você copiou no bloco.

Finalmente, clique no botão ‘Publicar’ ou ‘Atualizar’ para salvar suas alterações.

Agora você pode visitar seu site para ver o filtro de atributo personalizado do WooCommerce em ação.

Dicas Extras: Garanta que seus Filtros Carreguem Instantaneamente

Adicionar filtros é uma ótima maneira de melhorar a experiência do usuário, mas eles precisam ser rápidos. Se um cliente clicar em um filtro e tiver que esperar uma eternidade para os produtos serem atualizados, ele provavelmente sairá da sua loja.

Como os filtros de produtos dependem de consultas complexas ao banco de dados, a hospedagem do seu site desempenha um papel enorme na velocidade com que eles funcionam. Aqui estão algumas maneiras de manter sua loja funcionando sem problemas.

Atualize para Hospedagem de Alto Desempenho

Para garantir que seus filtros AJAX carreguem instantaneamente, recomendamos mudar para SiteGround.

Eles são um provedor de hospedagem recomendado para WooCommerce que oferece Ultrafast PHP. Essa tecnologia acelera as consultas ao banco de dados necessárias para filtrar produtos, fazendo com que sua loja pareça muito mais ágil.

Para mais detalhes sobre por que o desempenho é importante, veja nosso estudo de caso sobre por que mudamos para o SiteGround.

Use Cache Avançado

A configuração de cache avançado é recomendada para garantir que seu site carregue instantaneamente. Isso mantém uma versão pronta de resultados de produtos filtrados, para que seu servidor evite executar consultas caras ao banco de dados toda vez que alguém altera um filtro.

Você pode usar qualquer um dos melhores plugins de cache do WooCommerce para melhorar a velocidade. No entanto, certifique-se de configurar o plugin para excluir as páginas específicas de resultados de filtro para que os clientes sempre vejam status de estoque atualizados.

Além disso, você também pode tentar otimizar suas imagens de produto, escolher um tema WooCommerce de carregamento mais rápido, usar a versão mais recente do PHP, ativar um firewall em nível de DNS e muito mais para melhorar a experiência do cliente.

Para instruções detalhadas, consulte nosso guia para iniciantes sobre como acelerar o desempenho do WooCommerce.

Perguntas Frequentes Sobre Filtros de Produtos do WooCommerce

Aqui estão algumas perguntas que nossos leitores fizeram com frequência sobre como adicionar filtros de produtos no WooCommerce:

Como uso um filtro de produtos no WooCommerce?

Você pode adicionar filtros básicos usando o bloco integrado 'Filtrar Produtos por Atributo' no editor do WordPress. No entanto, para uma experiência profissional onde a página é atualizada instantaneamente sem recarregar, recomendamos o uso de um plugin como YITH WooCommerce Ajax Product Filter.

Como filtro produtos do WooCommerce por atributo personalizado?

Para filtrar por um atributo personalizado, você primeiro precisa criar um Atributo Global em Produtos » Atributos e atribuí-lo aos seus itens. Uma vez atribuído, você pode usar um widget ou plugin de filtro para permitir que os clientes classifiquem seus produtos por esse termo específico (como material ou marca).

Como você classifica produtos no WooCommerce?

O WooCommerce inclui um menu suspenso de classificação padrão na página da Loja que permite aos clientes classificar por preço ou popularidade. Como proprietário da loja, você pode alterar a ordem de classificação padrão indo para Aparência » Personalizar » WooCommerce » Catálogo de Produtos.

Como categorizo produtos no WooCommerce?

Você pode categorizar produtos navegando para Produtos » Categorias para criar novos grupos (como Masculino, Feminino ou Acessórios). Ao editar um produto, basta marcar a caixa da categoria relevante na barra lateral direita para atribuí-la.

Como crio uma busca de produtos no WooCommerce?

Você pode criar uma barra de busca adicionando o widget 'Busca de Produtos' à barra lateral ou área de cabeçalho do seu site. Para uma busca mais poderosa que inclua correspondência de categoria e correção de erros de digitação, recomendamos o uso de um plugin especializado como o SearchWP.

O WooCommerce tem gerenciamento de pedidos?

Sim, o WooCommerce possui um sistema de gerenciamento de pedidos integrado localizado em WooCommerce » Pedidos. A partir deste painel, você pode visualizar detalhes do cliente, atualizar status de envio, processar reembolsos e gerenciar todos os pedidos recebidos.

Esperamos que este artigo tenha ajudado você a aprender como filtrar produtos WooCommerce por atributo e atributo personalizado. Você também pode querer ver nosso artigo sobre como oferecer um desconto de frete no WooCommerce e nossas principais escolhas para os melhores temas 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.