Blog SearchWP

Tutoriais, Dicas e Recursos do WordPress para Ajudar a Crescer Seu Negócio

Como filtrar produtos WooCommerce por atributos

Se você vende produtos com tamanhos ou cores diferentes, sabe como é difícil para os clientes encontrarem exatamente o que querem. Muitas vezes, eles precisam clicar em dezenas de páginas apenas para ver se o tamanho específico está em estoque.

Essa frustração geralmente os leva a sair do seu site sem comprar nada. Vimos muitos proprietários de lojas perderem vendas potenciais simplesmente porque a experiência de compra era muito confusa para navegar.

A solução é permitir que os visitantes filtrem produtos por atributos específicos como tecido, tamanho ou marca. É como ter um assistente de loja prestativo que os aponta instantaneamente para a prateleira certa.

Neste artigo, mostraremos como filtrar produtos WooCommerce por atributos sem contratar um desenvolvedor.

Por que adicionar filtros de atributos à loja WooCommerce?

Todos nós já passamos por isso como compradores. Você visita uma loja online, encontra uma categoria que gosta, mas não consegue filtrar pela única coisa que importa, como tamanho ou cor.

Visitamos inúmeros sites de eCommerce onde tivemos que clicar em vinte produtos diferentes apenas para ver se eles vinham em preto. É frustrante e geralmente nos faz sair do site para comprar em outro lugar.

Se sua loja não possui filtros de atributos, seus clientes provavelmente estão sentindo essa mesma irritação. Categorias são ótimas para grupos amplos, mas falham quando um usuário tem requisitos específicos.

Forçar os usuários a clicar para frente e para trás entre o catálogo e as páginas de produtos cria atrito. Transforma uma divertida maratona de compras em uma tarefa árdua.

Pense nos filtros de atributos como um funcionário experiente parado no corredor. Em vez de deixar o cliente procurar sem rumo, os filtros reduzem imediatamente as opções ao que exatamente atende às suas necessidades.

Descobrimos que corrigir esse ponto problemático específico mantém as pessoas no site por mais tempo. Isso suaviza a jornada, desde a simples navegação até o checkout.

Dito isso, vamos ver as etapas que você pode seguir para adicionar esses filtros ao seu site.

Filtrar produtos WooCommerce por atributos

A maneira mais fácil de filtrar seus produtos por atributos específicos é usar um plugin como o WPFilters.

WPFilters - Melhor Plugin de Filtragem WordPress

WPFilters é o melhor plugin de filtragem para WordPress porque foi construído para funcionar com o WooCommerce pronto para uso.

Normalmente, configurar filtros envolve configurações complicadas ou até mesmo edições de código.

WPFilters resolve isso com uma configuração sem código que permite criar filtros funcionais em minutos.

Ele permite que você transforme seus atributos de produto existentes em caixas de seleção, botões de rádio ou menus suspensos fáceis de usar. Você não precisará contratar um desenvolvedor para tornar sua loja profissional.

Aqui estão alguns outros recursos que você obtém com o WPFilters:

  • URLs de filtro compartilháveis: Cada pesquisa cria um link exclusivo, para que os clientes possam marcar ou compartilhar seus resultados filtrados específicos com amigos.
  • Coloque filtros em qualquer lugar: Você pode adicionar facilmente filtros a qualquer página ou barra lateral usando o bloco Gutenberg ou shortcodes simples.
  • Personalização Total: Você pode controlar exatamente como seus filtros se parecem e se comportam sem tocar em uma única linha de CSS.
  • Suporte Avançado de Dados: Ele permite que você vá além das categorias básicas e filtre o conteúdo por campos personalizados, tags e muito mais.
  • Compatibilidade Universal: O plugin funciona perfeitamente com posts, páginas e tipos de post personalizados, para que você possa usá-lo em todo o seu site.

Com isso, vamos ver como você pode configurar a filtragem de atributos em seu site.

Passo 1: Instale e Ative o WPFilters

Para começar, você precisará visitar o site do SearchWP e se inscrever para uma conta WPFilters.

Depois de terminar, basta ir ao painel da sua conta e clicar na aba Downloads.

Baixar arquivos zip do plugin WPFilters

Em seguida, pressione o botão Download WPFilters e salve o arquivo ZIP em seu computador. Também recomendamos copiar sua chave de licença agora, pois você precisará dela para verificar o plugin em breve.

Agora, você precisa fazer o upload do arquivo para o seu site e instalá-lo. Se precisar de uma atualização, confira este guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, o assistente de configuração aparecerá em sua tela. Clique no botão Vamos Começar e siga as instruções na tela para finalizar a configuração.

Assistente de configuração do WPFilters

Etapa 2: Adicionar um Novo Elemento de Filtro para Atributo de Produto

Em seguida, você precisará criar um novo elemento de filtro com o qual seus clientes interagirão.

Para fazer isso, basta ir para WPFilters » Elementos no painel do seu WordPress e clicar no botão Adicionar Novo.

Adicionar um novo elemento no WPFilters

Depois disso, você pode inserir um nome para seu filtro no topo, como “Cor do Produto” ou “Tamanho”. Este nome interno ajuda você a manter as coisas organizadas se você planeja adicionar vários filtros posteriormente à sua loja WooCommerce.

Em seguida, selecione os Campos de Filtro nas opções disponíveis.

Para filtros de atributos de produto, usaremos a opção Checkbox porque ela permite que os usuários selecionem várias opções ao mesmo tempo. No entanto, você também pode escolher um menu suspenso ou botões de rádio, dependendo do design da sua loja.

Selecionar campo de filtro de atributo de produto

Depois de escolher um layout, role para baixo até a seção Fonte de Dados para conectar seus dados de produto. É aqui que você diz ao WPFilters especificamente quais informações procurar em sua loja.

Clique no menu suspenso para selecionar o atributo do produto para o qual você deseja configurar um filtro.

Por exemplo, escolheremos ‘Cor do Produto’ como o atributo específico para este tutorial.

Selecionar a fonte de dados do atributo do produto

Se você ainda não adicionou um atributo de produto, consulte este guia sobre como adicionar tags, atributos e categorias de produtos ao WooCommerce.

Etapa 3: Personalizar as Configurações do seu Filtro

Após selecionar sua fonte, você pode refinar e personalizar seu filtro de atributo de produto rolando até a seção Contêiner.

Aqui, você pode habilitar a opção ‘Mostrar Título’, torná-lo recolhível e organizar os itens de conteúdo horizontalmente.

Editar configurações do contêiner para filtros de atributos

Em seguida, basta rolar para baixo até a seção Itens para personalizar ainda mais seu filtro.

Por exemplo, você pode ativar a Contagem de Itens e deixar que os visitantes vejam quantos produtos estão disponíveis antes de clicar.

Editar configurações de itens para filtros

Quando estiver satisfeito com as configurações, basta rolar até o topo e clicar no botão Salvar para armazenar suas alterações.

Você notará uma prévia útil no lado direito da tela que é atualizada em tempo real conforme você faz alterações.

Salvar filtro de atributo de produto

Etapa 4: Exibir o Filtro em Sua Loja WooCommerce

Agora que seu filtro está pronto, a etapa final é colocá-lo em seu site, para que os clientes possam realmente usá-lo.

Adoramos usar WPFilters porque ele permite que você coloque esses filtros em qualquer lugar usando o editor de blocos do WordPress.

Ele também vem com uma opção integrada para incorporar o filtro diretamente em sua página preferida. Basta clicar na opção Incorporar no editor de elementos.

Incorporar filtro de atributo de produto

Em seguida, uma janela pop-up será aberta, onde você pode selecionar o modo de incorporação e a página de destino.

WPFilters oferece 3 modos de incorporação, que incluem um bloco Gutenberg, shortcode ou código PHP.

Para este tutorial, mostraremos como adicionar o filtro de atributos de produto à página da loja WooCommerce e à barra lateral de sua loja online.

1. Exibir Filtro de Atributos de Produto na Página da Loja WooCommerce

Primeiro, você pode simplesmente selecionar a opção Bloco Gutenberg e, em seguida, clicar no botão ‘Selecionar Página Existente’.

Incorporar filtros a uma página

Depois disso, você precisará inserir o nome da página e selecioná-la no menu suspenso.

Depois que isso for feito, simplesmente clique no botão Vamos Lá.

Incorporar filtro de produto na página da loja

Na próxima tela, você verá seu filtro de produto já adicionado ao editor do WordPress.

Alternativamente, você também pode adicionar o bloco Elemento WPFilters em sua página da Loja WooCommerce e selecionar o filtro que você acabou de criar no painel de configurações à direita.

Visualizar filtro de atributo de produto no editor de conteúdo

Finalmente, você pode clicar no botão Salvar ou Publicar.

Agora você pode visitar sua loja ativa para testar o filtro e garantir que ele classifique seus produtos corretamente.

Visualizar filtros de produto

2. Exibir Filtro de Atributos de Produto na Barra Lateral

Para adicionar o filtro de atributos de produto do WooCommerce à barra lateral de sua loja, você pode ir para Aparência » Widgets em seu painel do WordPress.

Observação: Estamos usando o tema Astra do WordPress para este tutorial. As etapas para adicionar o widget podem diferir dependendo do tema que você está usando em seu site.

Em seguida, você precisará adicionar o bloco de widget Elemento WPFilters na seção Barra Lateral do WooCommerce.

Adicione o bloco de widget de elemento WPFilters à barra lateral do WooCommerce

Para começar, basta clicar no botão + e adicionar o bloco.

Depois disso, você precisará selecionar o filtro de atributos de produto nas Configurações do Elemento no painel à direita.

Selecionar seu filtro de produto nas configurações do widget

Quando terminar, basta clicar no botão ‘Atualizar’.

Agora, você pode visitar sua loja WooCommerce e ver os filtros na barra lateral.

Ver filtro de produto na barra lateral

Etapa 5: Teste Seu Filtro de Atributos de Produto

Após incorporar o filtro em sua loja WooCommerce, a próxima etapa é testá-lo e ver se ele está funcionando corretamente.

Para este tutorial, criamos um filtro onde os visitantes podem classificar produtos por cor.

Quando selecionamos uma cor específica no filtro, o produto foi classificado automaticamente e exibiu o item correto.

Filtro de atributo de produto WooCommerce

Agora, você pode adicionar mais filtros de atributos de produto para sua loja. Por exemplo, talvez você possa exibir marcas, tamanho, material e outros atributos no filtro.

Perguntas frequentes sobre o filtro de atributos de produtos WooCommerce

1. Qual é a maneira mais fácil de filtrar produtos WooCommerce por atributos?

A maneira mais fácil de filtrar produtos WooCommerce por atributos é usar um plugin como o WPFilters, que oferece uma configuração sem código para criar opções de filtro fáceis de usar em minutos.

2. Posso adicionar filtros a páginas específicas ou apenas à barra lateral?

Sim, o WPFilters permite incorporar filtros em qualquer lugar do seu site, incluindo páginas específicas como a página da loja WooCommerce ou na barra lateral, usando blocos Gutenberg, shortcodes ou código PHP.

3. Por que é importante adicionar filtros de atributos a uma loja WooCommerce?

Adicionar filtros de atributos aprimora a experiência de compra, permitindo que os clientes encontrem rapidamente produtos que correspondam a critérios específicos como tamanho, cor ou material, reduzindo assim a frustração e aumentando a probabilidade de compra.

Esperamos que este artigo tenha ajudado você a aprender como filtrar produtos WooCommerce por atributos. Você também pode consultar nosso guia sobre como adicionar uma pesquisa inteligente de produtos WooCommerce e como pesquisar por SKU de produto no WooCommerce.

Pronto para tornar sua loja online mais fácil de navegar? Você pode começar com o WPFilters aqui.

avatar do autor
Aazim Akhtar

Crie uma Experiência de Pesquisa WordPress Melhor Hoje

Nunca mais perca visitantes para resultados de pesquisa inúteis. O SearchWP torna a criação de sua própria pesquisa inteligente do WordPress rápida e fácil.

Get SearchWP Now
Ícone de Múltiplos Mecanismos de Busca