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
• Como Filtrar Produtos WooCommerce por Atributo Personalizado
• Dicas Bônus para Aumentar as Vendas do WooCommerce

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’. Lembre-se de que a versão gratuita do plugin oferece apenas filtros para categorias e tags de produtos.

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. Para este tutorial, usaremos essa opção.

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 adicionar automaticamente o atributo nofollow a todas as âncoras filtradas ativando o interruptor ‘Adicionar “nofollow” às âncoras de filtro’. Isso dirá aos motores de busca para não usarem as âncoras de filtro ao classificar sua página.

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

Adicionar o Filtro WooCommerce à Página de Produtos

Para adicionar os filtros que você acabou de criar à sua página de produtos 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, simplesmente abra sua página de produtos WooCommerce no editor de blocos a partir do painel do WordPress.

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 Produtos WooCommerce por Atributo Personalizado

Se você quiser criar um filtro de produtos WooCommerce usando atributos personalizados, então este método é para você.

Criar um Atributo Personalizado

Para criar um atributo personalizado, 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 Personalizado 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, basta abrir o menu suspenso ‘Atributo de Produto Personalizado’ e selecionar o atributo personalizado que você acabou de criar.

Agora, prossiga 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 Bônus para Aumentar as Vendas do WooCommerce

Além de adicionar filtros de pesquisa, outra maneira de aumentar as conversões em sua loja online é melhorar a velocidade do seu site.

Uma loja WooCommerce que carrega mais rápido pode reter clientes facilmente e gerar mais leads.

Para melhorar o tempo de carregamento da sua loja, recomendamos a mudança para SiteGround. Eles são um provedor de hospedagem recomendado para WooCommerce que torna seu site super rápido e vem com recursos incríveis como PHP Ultrafast, cache para e-commerce e muito mais.

Outra dica é configurar o cache em sua loja WooCommerce.

É uma técnica que armazena os dados do seu site em um local temporário para melhorar o desempenho. Você pode usar qualquer um dos melhores plugins de cache para WooCommerce para melhorar a velocidade.

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.

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.