Como filtrar produtos WooCommerce (tutorial passo a passo)

Você está procurando uma maneira de filtrar produtos por atributo em sua loja WooCommerce?

Filtrar seus produtos WooCommerce por atributo torna mais fácil para os clientes localizarem o item que desejam comprar. Isso ajuda a economizar o tempo dos clientes e torna a experiência de compra mais perfeita.

Neste artigo, mostraremos como usar o filtro WooCommerce por configurações de atributos em sua loja online.

Por que filtrar produtos WooCommerce por atributo?

Os filtros tornam super fácil para os clientes procurar 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 percorrer toda a sua coleção de produtos, os usuários podem simplesmente navegar pelos produtos nos quais estão interessados.

Adicionar filtros pode ajudar a melhorar a experiência do usuário, melhorar a funcionalidade de pesquisa 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, esse método é para você. Mostraremos como configurar um filtro WooCommerce simples por configurações de atributo.

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

Após a ativação, vá para a página YITH »Ajax Product Filter na barra lateral de administração do WordPress.

A partir daqui, clique no botão '+ Criar uma nova predefinição' para começar a criar uma predefinição de filtro.

Quando estiver lá, você pode começar digitando um nome para o filtro na caixa 'Nome predefinido'.

Lembre-se de que o nome predefinido não será exibido em sua loja e estará lá apenas para sua referência.

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

Se você estiver usando a versão gratuita do plug-in, 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.

Crie 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 as categorias de produtos, poderá chamá-lo de 'Filtro por categoria'.

Em seguida, você pode selecionar os parâmetros para o filtro no menu suspenso 'Filtrar para'. Lembre-se de que a versão gratuita do plug-in 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ê deseja classificar os produtos por popularidade ou classificação média, precisa 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, iremos com esta opção.

Depois de fazer isso, você deve escolher entre as opções de taxonomia para o filtro. Por exemplo, se você deseja 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, você precisa alternar a opção 'Mostrar campo de pesquisa' se quiser ativar uma caixa de pesquisa no menu suspenso.

Você também pode exibir o filtro que está criando como uma alternância ativando a opção 'Mostrar como alternância'. 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 'Ordenar por'. As categorias de filtro serão exibidas na ordem que você escolher.

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

Por fim, clique no botão '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 guia 'Configurações gerais' para definir algumas configurações.

Defina as configurações gerais

Aqui, você deve começar escolhendo a opção 'Modo de filtro'. Você pode selecionar se deseja aplicar filtros em tempo real usando AJAX ou se deseja mostrar um botão 'Aplicar filtros' em seu site.

Em seguida, você também deve escolher entre mostrar um botão 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, você precisa rolar para baixo até a opção 'Ocultar termos vazios' e ativar a opção se não quiser exibir os termos de filtro que estão vazios.

Por exemplo, se você adicionou uma categoria 'Canecas' em sua loja WooCommerce, mas atualmente não possui itens, ela não será exibida na lista 'Filtrar por categoria'.

Depois disso, vá em frente e alterne a opção 'Ocultar produtos fora de estoque' se não quiser exibir produtos fora de estoque nos resultados.

Você pode deixar as outras configurações como padrão ou configurá-las ao seu gosto.

Depois de fazer suas escolhas, clique no botão 'Salvar opções' para armazenar suas alterações e vá para a guia 'Personalização' na parte superior.

Defina as configurações de personalização (somente plug-in Premium)

Observação: a guia 'Personalização' não estará disponível se você estiver usando a versão gratuita do plug-in.

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

Adicionar cores pode ajudar seu filtro WooCommerce a parecer mais esteticamente agradável e combinar com a marca de sua loja online.

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

Definir as configurações de SEO

Quando estiver lá, alterne a opção 'Ativar opção de SEO' para ativar as configurações.

Agora você pode adicionar metatags no 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 alternando a opção 'Adicionar “nofollow” para filtrar âncoras'. Isso dirá aos mecanismos de pesquisa para não usar as âncoras de filtro ao classificar sua página.

Quando estiver satisfeito, clique no botão 'Salvar opções' para armazenar as configurações.

Adicione o filtro WooCommerce à página de produtos

Para adicionar os filtros que você acabou de criar à sua página de produtos WooCommerce, você precisa alternar para a guia 'Predefinições de filtro' na parte superior.

Quando estiver lá, basta copiar o shortcode da predefinição de filtro que você acabou de criar.

Em seguida, basta abrir sua página de produtos WooCommerce no editor de blocos na barra lateral de administração do WordPress.

Quando estiver lá, clique no botão Adicionar bloco '(+)' no canto superior esquerdo para encontrar o bloco Shortcode.

Agora basta colar o código de acesso predefinido do filtro que você copiou no bloco Shortcode.

Por fim, clique no botão 'Publicar' ou 'Atualizar' para salvar suas alterações.

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

Como filtrar produtos WooCommerce por atributo personalizado

Se você deseja criar um filtro de produtos WooCommerce usando atributos personalizados, esse método é para você.

Criar um atributo personalizado

Para criar um atributo personalizado, você precisará visitar a página Produtos »Atributos na barra lateral de administração do WordPress.

Quando estiver lá, comece inserindo um nome e um slug para o atributo.

Por exemplo, se você deseja criar um filtro para um material de produto específico, pode nomear o atributo 'Filtro por material'.

Em seguida, você deve marcar a caixa 'Ativar 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.

Após a criação do atributo, clique no link 'Configurar termos' para adicionar termos ao atributo.

Isto irá direcioná-lo para uma nova tela, onde você deve digitar um termo na caixa 'Nome'.

Por exemplo, se você criou um atributo chamado 'Filtrar por material', pode adicionar os materiais individuais como termos, como lã. Você pode adicionar quantos termos quiser a um atributo.

Quando terminar, clique no botão 'Adicionar novo filtro por material' para salvar o termo.

Adicionar o atributo personalizado a um produto

Depois de criar um atributo, você precisará adicioná-lo a produtos WooCommerce individuais.

Para isso, você terá que abrir a página do produto que deseja editar. A partir daqui, role para baixo até a seção 'Dados do produto' e mude para a guia 'Atributos'.

Em seguida, basta abrir o menu suspenso 'Custom Product Attribute' e selecionar o atributo personalizado que você acabou de criar.

Agora, vá em frente e clique no botão 'Adicionar'.

Agora que o atributo personalizado foi adicionado, basta pesquisar o termo que corresponde ao produto na opção 'Selecionar termos'.

Por exemplo, se você criou um atributo para o material e o produto que está editando é feito de lã, 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.

Crie um filtro de atributo personalizado usando um plug-in

Em seguida, você precisará instalar e ativar o plug-in YITH WooCommerce Ajax Product Filter. Para obter mais instruções, consulte nosso guia sobre como instalar um plug-in do WordPress.

Observação : você pode usar a versão gratuita ou premium do plug-in para criar um filtro de atributo personalizado para WooCommerce.

Após a ativação, vá para a página YITH »Ajax Product Filter na barra lateral de administração do WordPress.

A partir daqui, vá em frente e clique no botão '+ Criar uma nova predefinição'.

Em seguida, você deve digitar um nome para a predefinição que está criando na caixa 'Nome da predefinição'.

Quando terminar, clique em '+ Adicionar um novo botão de 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 'Filter Name'.

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

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

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

Vá em frente e 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 no front-end de 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 pedido' para os termos filtrados em ordem crescente (ASC) ou decrescente (DESC).

Por fim, clique no botão 'Salvar filtro' na parte inferior para salvar seu filtro de atributo personalizado.

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

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

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

A partir daqui, você pode personalizar a aparência da predefinição de filtro no front-end 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 cores, a cor da área de 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, alterne a opção 'Ativar opção de SEO' para ativar as configurações.

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

Você também pode alternar a opção 'Adicionar “nofollow” para filtrar âncoras' para adicionar automaticamente o atributo nofollow a todas as âncoras de filtro.

Quando estiver satisfeito, clique no botão 'Salvar opções' para armazenar as configurações.

Adicione o filtro de atributo personalizado a uma página de produtos WooCommerce

Para adicionar o filtro de atributo personalizado a uma página de produtos WooCommerce, você precisará alternar para a guia 'Predefinições de filtro' na parte superior.

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

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

Aqui, clique no botão Adicionar bloco '(+)' no canto superior esquerdo para localizar e adicionar o bloco Shortcode.

Depois disso, basta colar o código de acesso predefinido do filtro que você copiou no bloco.

Por fim, 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.

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 adicionar pesquisa difusa ao seu site para melhorar os resultados da pesquisa e nossas principais opções para os melhores temas WooCommerce.

Se você gostou deste artigo, assine nosso canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.