Compradores que desejam filtrar produtos WooCommerce por cor encontram o mesmo obstáculo na maioria das lojas. Eles chegam à página da loja, veem uma grade mista de todas as cores disponíveis e não têm como refinar a busca sem clicar em cada produto individualmente.
O WooCommerce não inclui um filtro de cor para a página da loja nativamente. Sem ele, sua grade de produtos mostra tudo de uma vez, e um cliente procurando por uma cor específica tem que rolar por todas as listagens para encontrá-la.
Um filtro de cor resolve isso permitindo que os compradores cliquem em uma cor e vejam instantaneamente apenas os produtos que correspondem. Vimos que essa única adição mantém os clientes na página por mais tempo e reduz a frustração que os envia para um concorrente.
Neste artigo, mostraremos como adicionar um filtro de cor à sua loja WooCommerce sem escrever nenhum código.
Por que Adicionar um Filtro de Cor à Sua Loja WooCommerce?
Pela nossa experiência, lojas que vendem produtos em várias cores perdem mais vendas devido a esse exato problema. Um comprador com uma cor específica em mente desiste quando a grade o força a procurá-la.
Pense nisso como uma loja de roupas onde cada camisa, independentemente da cor, está pendurada na mesma arara, sem forma de organizar. Ninguém quer folhear cem opções misturadas para encontrar aquela camisa vermelha pela qual entrou na loja.
Isso é mais importante para lojas que vendem roupas, decoração, acessórios ou qualquer produto onde a cor é um fator decisivo. Quando os clientes não conseguem encontrar sua cor rapidamente, eles saem, e essa venda vai para outro lugar.
Adicionar um filtro de cor coloca os produtos certos na frente dos clientes certos em segundos. Com isso em mente, vamos ver como adicionar um à sua loja.
Adicionando um Filtro de Cor ao WooCommerce
A maneira mais fácil de adicionar um filtro de cor ao WooCommerce é usando um plugin como o WPFilters.
WPFilters é o melhor plugin de filtragem para WordPress, criado pela mesma equipe por trás do SearchWP. Ele permite que você adicione filtros no estilo Amazon a qualquer loja WooCommerce sem escrever uma única linha de código.
WPFilters extrai seus valores de cor diretamente dos seus atributos de produto WooCommerce e os transforma em opções de filtro clicáveis na página da loja. Você também pode combinar o filtro de cor com outros tipos de filtro, como um slider de faixa de preço, checkboxes de categoria ou uma caixa de pesquisa por palavra-chave para uma experiência de compra ainda mais precisa.
Aqui estão algumas coisas que você pode fazer com o WPFilters:
- Filtrar por qualquer atributo de produto: Extraia valores de cor diretamente do seu atributo de Cor do WooCommerce e exiba-os como checkboxes que os clientes podem selecionar.
- Vários formatos de exibição: Mostre opções de cor como checkboxes, um dropdown ou uma lista de rádio para combinar com o design da sua loja.
- Combine com outros filtros: Empilhe o filtro de cor ao lado de um filtro de tamanho, marca ou preço para que os clientes possam refinar os resultados de vários ângulos ao mesmo tempo.
- Atualização instantânea AJAX: A grade de produtos é atualizada no momento em que um cliente seleciona uma cor, sem necessidade de recarregar a página.
Agora, vamos percorrer como configurar um filtro de cores em sua loja WooCommerce.
Passo 1: Instale e Ative o WPFilters
Primeiro, você precisará visitar o site da SearchWP e se inscrever para uma conta WPFilters.
Depois de ter uma conta, faça login na sua área de conta e vá para a aba Downloads.
Em seguida, 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, carregue e instale o plugin em seu site WordPress. Se você nunca fez isso antes, consulte este guia sobre como instalar um plugin do WordPress.
Após ativar o plugin, o assistente de configuração aparecerá. Simplesmente clique no botão Vamos Começar e siga as instruções na tela para finalizar a configuração.
WPFilters está pronto! Agora vamos preparar seus dados de produtos do WooCommerce.
Etapa 2: Configurar um Atributo de Cor no WooCommerce
Antes de poder criar o filtro, você precisa ter um atributo de produto Cor configurado no WooCommerce. O WPFilters obtém seus valores diretamente dos atributos de seus produtos, portanto, esta é uma etapa obrigatória se você ainda não a fez.
Observação: Se você já possui um atributo de Cor com termos atribuídos aos seus produtos, pode pular para a Etapa 3.
Para começar, primeiro vá para Produtos » Atributos no seu painel do WordPress e, em seguida, adicione seus atributos.
Para instruções passo a passo, você pode consultar este guia sobre como configurar corretamente tags, atributos e categorias de produtos no WooCommerce.
Etapa 3: Criar um Elemento de Filtro de Cores no WPFilters
Agora navegue até WPFilters » Elementos no seu painel do WordPress e clique no botão Adicionar Novo.
Em seguida, você pode dar um nome ao seu filtro no topo do editor, como Filtro por Cor.
Depois disso, você precisará ir para a seção Campos de Filtro e selecionar a opção Checkbox. Isso cria uma lista de caixas de seleção para cada cor que os clientes podem selecionar para refinar a grade de produtos.
A partir daqui, você pode rolar para baixo até a seção Fonte de Dados e clicar no menu suspenso.
Na seção WooCommerce, selecione o atributo Cor do Produto (pa_color) que você criou na etapa anterior. O WPFilters buscará automaticamente todos os seus termos de cor e os adicionará ao filtro.
Etapa 4: Personalizar as Configurações do Filtro de Cores
Com a fonte de dados conectada, você pode ajustar como o filtro se parece e se comporta para seus compradores.
Role até a seção Container e ative o alternador Mostrar Título para exibir um rótulo acima das caixas de seleção, e ative Colapsável se você quiser que os visitantes possam ocultar o widget de filtro para economizar espaço no celular.
Em seguida, role até a seção Itens.
Aqui, ativar a opção Contagem de Itens mostra aos clientes quantos produtos estão disponíveis para cada cor, para que eles possam tomar decisões mais rápidas.
Quando terminar, role até o topo e clique no botão Salvar.
Você verá uma prévia ao vivo do filtro no painel à esquerda.
Etapa 5: Adicione o Filtro de Cores à Sua Loja WooCommerce
Com o filtro salvo, a etapa final é colocá-lo em sua loja. Recomendamos adicioná-lo à área de widget da barra lateral em sua página de loja, onde ele permanece visível enquanto os clientes rolam e se encaixa no layout padrão do WooCommerce.
Para começar, vá para Aparência » Widgets no seu painel do WordPress. Observe que esta etapa pode parecer diferente dependendo do tema que você está usando.
A partir daqui, você precisará encontrar a área da barra lateral que sua página de loja usa (geralmente Barra Lateral do WooCommerce) e clicar no botão + para adicionar um novo bloco. Em seguida, pesquise por WPFilters Element e adicione o widget.
Depois de adicionar o bloco de widget WPFilters Element, você pode selecionar seus filtros de cor.
No painel Configurações do Elemento à direita, abra o menu suspenso Selecionar Elemento e escolha o filtro 'Filtrar por Cor'.
Quando terminar, clique em Atualizar.
Agora visite sua página de loja e teste o filtro. Selecione a cor Carvão e confirme que apenas os produtos que possuem a cor atribuída aparecem na grade.
Perguntas frequentes sobre como adicionar filtros de cor
1. O WPFilters puxa automaticamente meus valores de cor do WooCommerce?
Sim. Depois de conectar o filtro ao seu atributo de produto de Cor do WooCommerce, o WPFilters puxa todos os seus termos de cor automaticamente e exibe cada um como uma opção de caixa de seleção. Você não precisa inserir as cores manualmente no plugin.
2. Posso combinar o filtro de cor com um filtro de preço ou categoria?
Sim. Você pode criar elementos de filtro separados para preço, categoria, tamanho ou qualquer outro atributo no WPFilters e adicioná-los todos à mesma barra lateral. Os clientes podem então refinar os resultados de vários ângulos ao mesmo tempo, como filtrar por Vermelho e uma faixa de preço abaixo de R$ 50.
3. O filtro de cor funcionará com produtos WooCommerce variáveis?
Sim. O WPFilters funciona com todos os tipos de produtos padrão do WooCommerce, incluindo produtos variáveis. Quando um cliente filtra por uma cor, o WPFilters exibe qualquer produto que tenha uma variação correspondente a essa cor, mesmo que outras variações estejam disponíveis em cores diferentes.
4. Os clientes podem selecionar mais de uma cor por vez?
Sim. O tipo de campo Caixa de seleção permite que os clientes selecionem várias cores simultaneamente. Se um cliente marcar Azul e Preto, o WPFilters mostrará todos os produtos disponíveis em qualquer uma das cores. Mude para o tipo de campo de Rádio se quiser limitar os clientes a uma seleção por vez.
Esperamos que este artigo tenha ajudado você a aprender como filtrar produtos WooCommerce por cor. Você também pode consultar nossos guias sobre como filtrar produtos WooCommerce por atributos e como filtrar produtos WooCommerce por tags.
Pronto para oferecer aos seus clientes uma maneira mais rápida de encontrar produtos por cor? Você pode começar com o WPFilters aqui.
