Como adicionar filtros de produtos WooCommerce AJAX

Deseja criar filtros de produtos AJAX para o seu site? Você veio ao lugar certo. Neste artigo, mostraremos como adicionar filtros de produtos WooCommerce para melhorar a experiência de compra em sua loja .

Antes de darmos uma olhada no processo de criação e adição de filtros de produtos, vamos entender melhor o que são filtros de produtos AJAX e por que você precisa deles.

O que são Filtros de Produto AJAX?

Os filtros de produto ajudam o usuário a encontrar o produto desejado rapidamente, estabelecendo requisitos e filtrando todos os resultados indesejados. Por exemplo, se um cliente quiser uma camiseta azul, ele selecionará uma camiseta como o tipo de produto e o filtro de cor azul para descartar todos os outros produtos e cores. Da mesma forma, pode haver filtros para tamanho, peso, preço, classificação média e assim por diante.

O termo AJAX refere-se a uma técnica de desenvolvimento web que permite que a página seja atualizada de forma assíncrona para pequenas quantidades de dados. Isso permite que o site aplique pequenas alterações em uma página da Web enquanto permanece na mesma página, o que significa que nenhuma atualização é necessária. Por outro lado, com técnicas mais antigas, toda a página da Web precisava ser recarregada toda vez que havia alguma pequena alteração afetando a experiência do usuário e consumindo mais recursos do servidor.

Por que você deve usar filtros de produtos?

Agora a pergunta que surge aqui é por que você deve usar filtros de produtos em sua loja? Simplificando, você precisa de filtros de produtos para melhorar a experiência de compra de seus clientes e ajudá-los a encontrar o que estão procurando. Quase todas as lojas online com um grande número ou variedade de produtos fazem uso de filtros de produtos. Amazon, eBay e Zara são bons exemplos disso.

Ao usar filtros, os compradores podem descartar facilmente todos os resultados indesejados e obter uma seleção apenas dos produtos nos quais estão interessados. Isso resulta em maior satisfação do cliente, o que leva a mais conversões e vendas.

Por outro lado, sem filtros de produtos AJAX, os clientes podem ter dificuldade em descobrir os produtos que desejam. As compras online devem ser rápidas e fáceis, por isso, se o processo demorar muito, os clientes sairão da sua loja e irão para um site diferente que ofereça uma experiência melhor.

Como você provavelmente não quer perder seus clientes, os filtros de produtos devem ser uma parte importante da sua estratégia de negócios online.

Então, agora que você sabe a importância deles, vamos ver como você pode habilitar filtros de produtos em sua loja WooCommerce.

Como adicionar filtros de produtos WooCommerce

Neste tutorial, mostraremos duas maneiras diferentes de adicionar filtros de produtos à sua loja.

1. Filtros de produto padrão do WooCommerce
2. Usando um plug-in de terceiros

Vamos dar uma olhada em ambos os métodos.

1. Filtros de produtos WooCommerce padrão

Por padrão, o WooCommerce oferece alguns filtros básicos de produtos. Se você tem uma loja relativamente pequena sem uma grande variedade de produtos, pode achar que os filtros padrão são suficientes para suas necessidades.

Para adicionar esses filtros à sua loja, basta acessar o WP Admin Dashboard e navegar até Appearance > Widgets. Lá você encontrará uma lista de todos os widgets disponíveis para o seu site.

Se você tiver o WooCommerce ativado, encontrará os filtros de produto padrão na lista de widgets. Basta clicar e arrastar o widget de filtro desejado para qualquer uma das áreas de widget suportadas pelo seu tema. No nosso caso, adicionaremos os filtros de produtos à barra lateral.

Isso é literalmente tudo o que você precisa fazer para adicionar os filtros de produtos padrão do WooCommerce à sua loja.

Filtros de produto padrão

Por padrão, existem três tipos de filtros de produto: preço, atributo e classificação média.

• Filtrar por preço: adiciona um controle deslizante que você pode usar para filtrar produtos com base na faixa de preço
• Filtrar por Atributos : Permite filtrar itens com base em seus atributos, como tamanho, peso, cor e muito mais. Observe que você terá que adicionar um widget separado para cada atributo
• Filtrar por classificação média: como o nome sugere, você pode filtrar produtos com base na classificação média

Como os filtros de produto padrão do WooCommerce vêm pré-configurados, você não precisa configurá-los. Basta arrastá-los para uma área de widget e pronto. No entanto, suas opções são bastante básicas, portanto, não oferecem muitas opções de personalização para editar fontes, formas ou controles deslizantes.

Mesmo que os filtros de produto padrão do WooCommerce façam o trabalho para a maioria dos usuários, há um problema. Cada vez que um cliente seleciona um filtro, a página inteira precisa ser recarregada para que a alteração seja aplicada. Como você pode imaginar, isso é irritante para os usuários e afeta sua experiência de compra. É por isso que você deve adicionar filtros de produtos AJAX .

Infelizmente, o WooCommerce não suporta filtros AJAX por padrão, então você precisa confiar em plugins de terceiros.

2. Usando um plug-in de terceiros

Existem várias ferramentas que você pode usar para adicionar filtros de produtos WooCommerce. Para este tutorial, usaremos Advanced AJAX Product Filters desenvolvidos pela BeRocket . Esta é uma ferramenta rica em recursos freemium que garante uma experiência de usuário suave.

O plug-in é especializado em filtros de produtos AJAX e oferece uma ampla variedade de filtros com estilo personalizado para combinar com a aparência da sua loja. Também permite filtros individuais e de grupo, e você pode definir suas preferências gerais que serão válidas para ambos os tipos de filtro.

Agora vamos ver como você pode adicionar este plugin à sua loja WooCommerce.

Etapa 1: instale o plug-in

Primeiro, você precisa instalar o plugin. Para isso, vá para o WP Admin Dashboard e navegue até Plugins > Adicionar novo.

Procure os Filtros Avançados de Produtos AJAX da BeRocket. Clique no botão Instalar para instalar o plugin e, em seguida, ativá -lo.

Depois disso, vá para BeRocket > Product Filters onde você poderá definir suas preferências para os filtros. Estas não são configurações técnicas, mas sim preferências gerais e opções de personalização que você pode configurar como quiser. Você pode selecionar o número de valores de atributo, ocultar valores e muito mais.

Agora que você instalou e configurou o plugin, vamos criar seu primeiro filtro.

Etapa 2: criar um novo filtro de produto

Para criar um filtro de produto, vá para o WP Admin Dashboard e vá para BeRocket > Filters.

Na página de configurações, pressione o botão Adicionar filtro .

Uma nova página de configurações aparecerá e você terá que preencher todos os detalhes para criar um filtro. Existem várias seções que você precisa preencher, então vamos dar uma olhada nelas uma por uma.

• Título: dê um título significativo ao seu filtro, para que seja fácil de entender, por exemplo, tamanho, cor, classificação e assim por diante
• Condições: você pode definir condições para exibir o filtro em determinadas páginas, produtos ou categorias. Você pode adicionar várias condições e até mesmo adicionar condições aninhadas também. Você também pode ocultar o filtro em determinados tipos de dispositivos, como celular, guia ou desktop
• Tipo de Widget: Aqui você precisa selecionar o tipo de filtro que deseja criar. Existem quatro tipos para escolher: Filtro, Botão Atualizar Produtos, Botão Redefinir Produtos e Área de Filtros Selecionados
• Atributos e Valores: Especifique o atributo para o filtro atual
• Estilo: estilize e personalize o filtro. Você terá vários layouts para escolher, como caixa de seleção, menu suspenso, caixa de cores, controle deslizante e muito mais
• Opções obrigatórias: Forneça todas as opções disponíveis neste filtro. Por exemplo, forneça todas as cores disponíveis para o filtro de cores
• Adicional: Esta seção contém apenas preferências. Existem várias opções que você pode definir de acordo com suas necessidades

Depois de preencher o formulário, clique no botão Salvar filtro para criar o filtro.

Gerencie seus filtros

Então você pode navegar para BeRocket > Filtros para encontrar todos os seus filtros criados em um só lugar. A partir desta página, você pode editar, habilitar, desabilitar e até remover qualquer filtro que desejar.

Parabéns! Agora você criou seu primeiro filtro de produto WooCommerce usando um plugin. Da mesma forma, você pode criar quantos filtros precisar para melhorar a experiência de seus clientes.

Mas não é isso! Você criou um filtro individual por enquanto, mas pode dar um passo adiante e criar grupos de filtros. Com este plugin, você pode mesclar filtros com atributos semelhantes em um grupo. Por exemplo, tamanho, peso e cor podem ser combinados para criar um grupo de filtros chamado Atributos físicos . Os grupos de filtros são fáceis de gerenciar e mantêm sua barra lateral organizada caso você tenha muitos filtros.

Agora vamos ver como adicionar grupos de filtros de produtos no WooCommerce usando Advanced AJAX Product Filters.

Etapa 3: criar um grupo de filtros

No painel do WordPress, navegue até BeRocket > Grupos e clique no botão Adicionar grupo de filtros para criar um grupo de filtros.

Na página de configurações, preencha o formulário Adicionar novo grupo de filtros como você fez antes para os filtros individuais. Este é um pouco diferente, então vamos dar uma olhada nas opções:

• Título: Sem segredos aqui, apenas dê ao seu grupo de filtros um título claro e significativo
• Condições: defina as condições se desejar exibir o filtro em páginas ou categorias específicas. Você pode adicionar várias condições, bem como condições aninhadas. Você também pode optar por ocultar o filtro de um dispositivo específico
• Configurações do grupo: você pode escolher quais filtros individuais deseja adicionar a este grupo. Selecione o filtro desejado no menu suspenso e pressione Adicionar filtro para adicioná-lo ao grupo. Da mesma forma, você pode adicionar quantos filtros quiser

Quando terminar, clique no botão Salvar no canto superior direito para salvar o grupo de filtros.

Agora você pode navegar para BeRocket > Grupos e dar uma olhada em todos os seus grupos de filtros em um só lugar. Você também pode gerenciar, editar ou remover grupos desta página.

Agora que os criamos, é hora de exibir esses filtros no front-end da loja.

Etapa 4: exibir os filtros

No seu painel de administração do WP, vá para Aparência > Widgets.

Localize os widgets AAPF Filters Single e AAPF Filters Group e arraste-os e solte-os na área de widget desejada. Observe que você terá que adicionar o widget para cada filtro separadamente. Selecione o filtro que deseja adicionar a este widget e clique em Salvar .

Bravo! Você fez isso. Os filtros agora são exibidos no front-end da sua loja na área de widget correspondente.

No entanto, há algo mais. esta não é a única maneira de adicionar filtros de produtos à sua loja WooCommerce. Se você deseja exibir os filtros em alguma outra área além das áreas de widgets, você pode usar códigos de acesso.

Etapa 5: exibir os filtros fora da área de widgets usando códigos de acesso

Cada filtro tem um código de acesso que você pode usar para exibi-lo em qualquer lugar do seu site. Vá em BeRocket > Filtros e você encontrará os códigos de acesso para cada filtro. Basta copiar o código de acesso para o filtro que você deseja exibir.

Depois disso, vá para a página/post onde deseja exibir os filtros, clique no ícone + no canto superior esquerdo e procure o bloco de shortcode. Em seguida, selecione o ícone do widget de código de acesso para adicionar uma área de código de acesso à sua página/postagem.

Agora cole o código de acesso do filtro que você acabou de copiar na área do código de acesso e pressione Atualizar/Publicar no canto superior direito para ativar as alterações.

É isso! Os filtros agora serão exibidos no local desejado. Você pode navegar até o front-end para ver as alterações.

Etapa 6: identificar problemas com os filtros

Apenas espere um pouco mais! Há outro pequeno recurso bacana deste plugin que adoraríamos mencionar. Este plug-in de filtro de produtos WooCommerce fornece uma ferramenta útil para informá-lo sobre o status de seus filtros ativos. Além disso, ele informa se há algum problema com um filtro específico e o motivo por trás dele, para que você possa corrigi-lo e fazê-lo funcionar rapidamente.

Para usar a ferramenta de status de filtros ativos, faça login no seu WP Admin e navegue até o front-end onde os filtros são exibidos. Na barra preta superior, você verá a guia Filtros de produtos com um ícone de foguete. Clique nesta guia e ela exibirá todas as informações úteis.

Tudo feito! Parabéns! Agora você pode criar, atualizar e exibir filtros de produtos com sucesso em sua loja WooCommerce e também tomar cuidado com possíveis problemas com os filtros.

Conclusão

Em suma, os filtros de produtos WooCommerce são obrigatórios se você tiver um grande número de produtos ou uma gama diversificada de produtos. Eles são muito convenientes para os clientes, pois os ajudam a encontrar os produtos que procuram mais rapidamente e melhorar sua experiência de compra.

Como proprietário de uma loja, a satisfação do cliente é de extrema importância e pode ajudá-lo a aumentar suas vendas. Por outro lado, se seus compradores não conseguirem encontrar rapidamente o que desejam, provavelmente sairão e não voltarão.

Neste tutorial, vimos como você pode adicionar filtros de produtos à sua loja WooCommerce e garantir que os usuários encontrem o que desejam.

Em resumo, aprendemos:

• O que são filtros de produtos AJAX?
• Benefícios dos filtros de produtos WooCommerce
• Como adicionar filtros de produtos WooCommerce
  • Filtros de produtos de toalete padrão
  • Usando um plug-in de terceiros

Você já tentou adicionar filtros de produtos à sua loja? Qual método você usou e como foi sua experiência? Deixe-nos saber na seção de comentários abaixo.