Neste post abordaremos como colocar filtro de preços no WordPress para a página de loja do seu site, utilizando apenas o plugin HUSKY – Products Filter for WooCommerce Professional com auxílio/suporte do WooCommerce.
O HUSKY – Products Filter for WooCommerce Professional (antigo WOOF) é um plugin de pesquisa de produtos para WooCommerce que permite que os clientes do site filtrem produtos por categorias, atributos, tags de produtos, taxonomias personalizadas de produtos e preço.
Aqui vocês aprenderão como colocar um filtro de preços no WordPress, especificamente na sidebar da sua loja virtual, porém, como bônus, também ensinaremos como criar um link direto para o filtro no menu, facilitando a vida do usuário do seu site!
Acompanhe o passo a passo de como utilizar esse plugin incrível que proporcionará ainda mais opções para os usuários que acessarem a sua loja!
Configurando o Plugin
Primeiro de tudo precisamos instalar o plugin pela própria loja do WordPress ou acessando o link: HUSKY – Products Filter for WooCommerce Professional, lembrando que ele é totalmente gratuito para o que a gente está propondo aqui nesse tutorial!
Após instalar e ativar o plugin, podemos ir nas configurações dele. O caminho padrão é WooCommerce > Configurações > Filtro de Produtos
Você vai se deparar com a página de Filtro de Produtos (além dos filtros de preço, da para filtrar por categorias, tags e etc, mas esse não é o foco do nosso tutorial).
A parte mais importante é a primeira opção, Pesquisar por preço. Aqui você vai poderá indicar qual o tipo de aparência você quer que o seu filtro tenha, e no vídeo abordamos 2 tipos, são eles:
- Deslizante de intervalo “ion” onde você vai poderá filtrar por uma barra deslizante, indicando o mínimo e o máximo de valor que você pretende filtrar;
- Botão de opção, que é uma alternativa caso você queira indicar valores específicos para filtragem, onde o usuário selecionará clicando em uma simples caixa de seleção.
No primeiro caso, a gente pode simplesmente selecionar a opção na caixa de seleção, salvar as alterações e seguir para o próximo passo.
Porém caso opte por usar o controle como botão de opção, você precisará fazer uma alteração extra!
Ao lado do menu suspenso de Pesquisar por preços, tem um ícone de engrenagem. Clique nele!
Note que existem 3 tipos de filtragem: 0 até 50, 51 até 100 e 101 até 200. Para fazer desta forma, basta utilizar uma sintaxe colocando um hífen entre os números mínimos e máximos, e uma vírgula para separar cada opção. Simples assim! Lembrando que é possível utilizar o “i” para indicar o “acima de”.
Feito isso, basta descer um pouco a página e localizar o botão Salvar alterações, e estará feita a primeira parte!
Adicionando o Filtro na Sidebar da Loja
Essa parte é bem simples, basta ir em Aparência > Widgets, e localizar a sidebar da sua loja, no nosso caso, ela está a Sidebar – Shop.
Feito isso, ao lado esquerdo teremos alguns blocos que poderão ser selecionados e arrastados para dentro de sua sidebar. Então, localize o bloco referente ao plugin HUSKY e arraste para dentro de sua sidebar.
Aqui você poderá expandir o bloco e alterar o nome do título para Preços, por exemplo, e é a única alteração que sugiro fazer.
Feito isso, é só salvar e pronto! Já poderá estar visualizando a sidebar na página de sua loja.
É claro que para filtrar os produtos, você precisa tê-los já cadastrado na sua loja, e caso você não tenha e não saiba como cadastrar novos produtos, estaremos deixando aqui um link para nosso outro tutorial ensinando como fazer isso, vale muito a pena conferir!
https://adsagencia.com.br/blog/como-cadastrar-novos-produtos-no-wordpress
Como Aplicar o Filtro no Menu – Bônus
Uma boa prática que facilitará a navegação do usuário, é disponibilizar links para o filtro do seu produto de maneira direta, através do menu.
Primeiro de tudo, vá até Aparência > Menu (estamos levando em consideração que seu site tenha ao menos um menu simples já criado e localizado no Header).
Criaremos um link personalizado com o texto indicando a quantidade mínima/máxima do filtro de preços (nesse caso aqui, utilizando especificamente a filtragem como botão de opção), e organizaremos de forma hierárquica no seu menu, de acordo com o seu objetivo e layout.
Na parte da URL, teremos que abrir a sua loja; clicar no filtro que deseja criar o link; após a filtragem, copiar a URL completa; jogar essa mesma URL no link personalizado e pronto!
Isso não tem limite e nem uma forma certa de escrever, vai de acordo com o seu site, seu design e a forma que você quer conduzir esse menu ao seu usuário.
A única coisa que não é personalizável, é a URL que PRECISA ser exatamente a mesma que você vai copiar da sua loja, ok?!
Como Colocar Filtro de Preços no WordPress – Conclusão
Bom, com essas dicas você esterá pronto(a) para botar a criatividade em dia e criar filtros incríveis para sua loja virtual!
Esse tutorial foi apenas um ponta pé inicial para você conseguir proporcionar uma experiência incrível para os seus usuários em termos de usabilidade.
Em casos de dúvidas, nós da ADS Agência teremos o prazer de ajudar, então é só entrar em contato conosco que te auxiliaremos no que precisar com relação a desenvolvimento de sites e administração da sua loja em WordPress (Woocommerce).
