Comprar online deve ser fácil. Mas quando uma loja tem dezenas ou centenas de produtos amontoados em uma única página, encontrar o item certo parece mais cavar em uma pilha de roupas em um bazar do que navegar em uma loja bem organizada.
Esse é um problema que muitos proprietários de lojas WooCommerce enfrentam. Os produtos estão todos lá, a loja parece ótima, mas os clientes ainda não conseguem encontrar o que precisam rápido o suficiente.
E quando isso acontece, eles vão embora. Um filtro dropdown resolve isso permitindo que os compradores restrinjam os produtos por categoria, tamanho, cor, preço ou qualquer outro atributo com apenas um clique.
Neste tutorial, mostraremos como criar um filtro dropdown para produtos WooCommerce.
Por que sua loja WooCommerce precisa de um Filtro Dropdown
Imagine entrar em uma loja de roupas onde nada está organizado. Camisas, calças, sapatos e jaquetas estão todos misturados na mesma arara. Você está procurando uma jaqueta azul tamanho M, mas a única maneira de encontrá-la é percorrer cada item individualmente. A maioria das pessoas sairia imediatamente.
É exatamente isso que acontece em uma loja WooCommerce sem filtros dropdown.
Quando os clientes acessam sua página de loja e veem uma parede de produtos sem maneira de classificá-los, a frustração surge rapidamente.
Eles não querem clicar em dez páginas de itens apenas para encontrar a única coisa que vieram buscar. A maioria deles não se dará ao trabalho. Eles fecharão a aba e comprarão de um concorrente cuja loja é mais fácil de navegar.
Já vimos isso acontecer em lojas que têm ótimos produtos, mas com pouca filtragem. O tráfego está lá, mas as vendas não correspondem. Os clientes acessam a página da loja e saem sem comprar nada. Um filtro dropdown é frequentemente a peça que falta.
Veja o que torna os filtros dropdown uma solução tão prática. Eles oferecem aos compradores uma maneira limpa e familiar de restringir os resultados.
Em vez de rolar por 200 produtos, um cliente pode abrir um dropdown, escolher "Grande", "Vermelho" ou "Menos de R$ 50" e ver instantaneamente apenas os produtos que correspondem. É o tipo de experiência que mantém as pessoas em seu site por mais tempo e as aproxima do checkout.
Sem isso, você está deixando muitas vendas na mesa. E a boa notícia é que configurar um não requer um desenvolvedor ou qualquer conhecimento técnico. Vamos ver como você pode facilmente adicionar um filtro dropdown à sua loja WooCommerce.
Como Exibir um Filtro Dropdown no WooCommerce
A maneira mais fácil de adicionar um filtro dropdown ao WooCommerce é usando um plugin como o WPFilters.
WPFilters é o melhor plugin de filtragem para WordPress que permite adicionar filtros estilo Amazon à sua loja WooCommerce sem escrever uma única linha de código.
Ele é construído pela mesma equipe por trás do SearchWP, então sabemos que ele funciona de forma confiável e lida com seus dados de produto de forma eficiente.
Com o WPFilters, você pode criar menus suspensos que permitem aos clientes filtrar produtos por categoria, tag, atributo de produto ou qualquer taxonomia personalizada. Você também pode combinar filtros suspensos com outros tipos de filtro, como controles deslizantes de preço, caixas de seleção ou uma caixa de pesquisa por palavra-chave.
Algumas das coisas que você pode fazer com o WPFilters:
- Crie filtros suspensos para categorias de produtos, tags, atributos e campos personalizados
- Exiba vários filtros juntos na barra lateral ou acima da grade de produtos
- Personalize rótulos, texto de espaço reservado e opções de exibição sem tocar no código
- Filtre resultados em tempo real sem recarregar a página
Agora, vamos ver como configurar um filtro suspenso em sua loja WooCommerce.
Passo 1: Instale e Ative o WPFilters
A primeira coisa que você precisará fazer é acessar o site do SearchWP e se inscrever para uma conta WPFilters. Assim que você criar sua conta, faça login e clique na guia Downloads no painel da sua conta.
A partir daí, clique no botão Download WPFilters para salvar o arquivo ZIP do plugin em seu computador. Também recomendamos copiar sua chave de licença desta página, pois você precisará dela durante a configuração.
Em seguida, você precisará fazer o upload e instalar o plugin em seu site WordPress. Se você nunca fez isso antes, pode seguir este guia para iniciantes sobre como instalar um plugin do WordPress.
Assim que o plugin estiver ativo, o assistente de configuração do WPFilters aparecerá em sua tela. Clique no botão ‘Vamos Começar’.
Agora podemos passar para a criação do seu primeiro filtro suspenso.
Etapa 2: Adicionar um Novo Elemento de Filtro
Agora que o WPFilters está funcionando, é hora de criar seu filtro suspenso.
Para começar, navegue até WPFilters » Elementos no seu painel do WordPress e clique no botão Adicionar Novo.
Na parte superior da tela, você verá um campo onde pode dar um nome ao seu filtro.
É uma boa ideia usar algo descritivo aqui, como “Categorias de Produtos” ou “Filtrar por Tags”, especialmente se você planeja adicionar mais filtros no futuro. Um nome claro torna muito mais fácil manter a organização.
Em seguida, você pode olhar para a seção Campos de Filtro logo abaixo do nome. É aqui que você escolhe como o filtro se parecerá e se comportará em sua loja.
O WPFilters oferece várias opções aqui, incluindo caixas de seleção, botões de rádio, controles deslizantes e muito mais.
Como estamos criando um filtro suspenso, prossiga e selecione a opção Suspenso.
Você notará uma prévia ao vivo do filtro que aparece no painel direito assim que você salva suas configurações.
Etapa 3: Conectar o Filtro a uma Fonte de Dados WooCommerce
Com o tipo de filtro suspenso selecionado, o próximo passo é dizer ao WPFilters de onde extrair suas informações. É isso que torna o filtro realmente útil para seus compradores.
Role para a seção Fonte de Dados e clique no menu suspenso. Você verá uma lista de fontes de dados disponíveis para escolher. Como estamos trabalhando com uma loja WooCommerce, você vai querer escolher uma opção específica do WooCommerce na lista.
Por exemplo, você pode selecionar Categorias de produtos se quiser que os clientes filtrem por categoria, ou Tags de produtos se você marcou seus produtos.
Você também pode escolher atributos de produto específicos como cor, tamanho ou material se você os configurou no WooCommerce.
Depois de fazer isso, o WPFilters buscará automaticamente os dados relevantes e os conectará ao seu filtro suspenso.
Etapa 4: Personalizar as Configurações do Filtro Suspenso
Agora que seu filtro está conectado a uma fonte de dados, é hora de fazê-lo parecer e funcionar exatamente como você deseja para sua loja. O WPFilters oferece um bom conjunto de opções de personalização sem sobrecarregá-lo com configurações.
Você pode rolar para baixo até a seção Contêiner primeiro. É aqui que você controla o comportamento geral do filtro.
Você pode habilitar a opção Mostrar Título para que os visitantes saibam exatamente para que serve o menu suspenso.
Você também verá uma opção para tornar o filtro Recolhível. Isso é útil se você planeja adicionar vários filtros à sua barra lateral, pois mantém as coisas organizadas e evita que a página pareça muito bagunçada.
Há também uma opção Horizontal se você preferir exibir as opções de filtro lado a lado em vez de empilhadas verticalmente.
Em seguida, role um pouco mais para baixo até a seção Itens. Aqui você pode habilitar opções como Contagem de Itens, que mostra aos compradores quantos produtos estão disponíveis para cada opção no menu suspenso.
Depois de ficar satisfeito com a aparência de tudo na visualização ao vivo à direita, role de volta para o topo e clique no botão Salvar para armazenar suas alterações.
Etapa 5: Adicionar o Filtro Suspenso à Sua Loja WooCommerce
Com seu filtro suspenso salvo, é hora de colocá-lo em um local onde seus clientes possam realmente usá-lo. O WPFilters oferece algumas maneiras diferentes de fazer isso.
1. Adicionando o Filtro Suspenso à Sua Página da Loja
A página da loja é um dos melhores lugares para adicionar um filtro suspenso, pois é onde a maioria dos seus clientes navegará. Para começar, clique no botão Incorporar no canto superior direito da página do elemento de filtro.
Uma janela pop-up aparecerá com algumas opções de incorporação. Você pode escolher entre um bloco Gutenberg, um shortcode ou código PHP. Para a maioria dos proprietários de lojas, o bloco Gutenberg é a opção mais fácil de trabalhar.
Selecione a opção Bloco Gutenberg e, em seguida, clique em Selecionar Página Existente.
A partir daí, digite o nome da sua página de loja e selecione-a no menu suspenso. Assim que você clicar no botão Vamos Lá , o WPFilters carregará sua página de loja no editor de conteúdo do WordPress com o bloco de filtro já adicionado.
Quando estiver satisfeito com o resultado, clique no botão Atualizar para salvar suas alterações.
2. Adicionando o Filtro Suspenso à sua Barra Lateral (Recomendado)
Adicionar o filtro à sua barra lateral é outra ótima opção, e uma que recomendamos para a maioria dos proprietários de lojas WooCommerce. Isso ocorre porque você o deseja visível enquanto os clientes navegam por diferentes páginas em sua loja.
Para fazer isso, vá para Aparência » Widgets no seu painel do WordPress. Tenha em mente que esta etapa pode parecer um pouco diferente dependendo do tema do WordPress que você está usando.
Encontre a seção da barra lateral da sua loja WooCommerce e clique no botão + para adicionar um novo bloco. Procure pelo bloco de widget Elemento WPFilters e adicione-o.
Assim que o bloco for adicionado, olhe para o painel de configurações à direita.
Simplesmente clique no menu suspenso Selecionar Elemento e escolha o filtro suspenso que você acabou de criar. Quando terminar, clique no botão Atualizar para salvar tudo.
Etapa 6: Teste seu Filtro Suspenso
Agora que o filtro está ativo em sua loja, é importante garantir que tudo esteja funcionando como deveria. Testar leva apenas um minuto, mas evita que os clientes encontrem problemas mais tarde.
Visite sua loja WooCommerce na parte frontal do seu site. Vá para a página ou barra lateral onde você adicionou o filtro suspenso e veja como ele aparece para seus visitantes.
A partir daqui, você pode clicar no menu suspenso e selecionar uma das opções disponíveis. Por exemplo, se você configurou o filtro para classificar por tags de produto, prossiga e escolha uma tag na lista.
Os produtos na página devem ser atualizados imediatamente para mostrar apenas os itens que correspondem à sua seleção.
Se o filtro estiver funcionando corretamente, você verá a grade de produtos diminuir para mostrar apenas os resultados relevantes.
Perguntas Frequentes sobre Filtros Suspensos para WooCommerce
1. Posso adicionar vários filtros suspensos de uma vez?
Sim. Você pode criar quantos elementos de filtro precisar e colocá-los juntos no mesmo local. Por exemplo, você pode empilhar um menu suspenso “Filtrar por Categoria” com um menu suspenso “Filtrar por Cor” e um controle deslizante de faixa de preço para que os clientes possam refinar os resultados de vários ângulos ao mesmo tempo.
2. O filtro suspenso funciona com variações de produto?
Sim. O WPFilters funciona com todos os tipos de produto WooCommerce padrão, incluindo produtos variáveis. Se você filtrar por um atributo de produto como Cor ou Tamanho, o WPFilters mostrará produtos que possuem opções de variação correspondentes.
3. A filtragem acontece instantaneamente ou a página é recarregada?
A filtragem acontece em tempo real, sem recarregar a página. Quando um cliente seleciona uma opção no menu suspenso, a lista de produtos é atualizada imediatamente, o que mantém a experiência de compra rápida e fluida.
4. Posso usar isso com uma taxonomia personalizada que adicionei?
Sim. O WPFilters suporta taxonomias personalizadas, além das categorias e atributos de produtos WooCommerce integrados. Se você registrou uma taxonomia personalizada para seus produtos, ela aparecerá como uma opção no menu suspenso Fonte de Dados ao configurar o filtro.
Esperamos que este artigo tenha ajudado você a aprender como criar um filtro suspenso para produtos WooCommerce. Você também pode conferir nossos guias sobre como adicionar um filtro de caixa de pesquisa a uma lista de produtos WooCommerce e como criar filtros de intervalo no WordPress.
Pronto para oferecer aos seus clientes uma maneira melhor de encontrar produtos? Você pode começar com o WPFilters aqui.
