Como usar o filtro de produtos por preço WooCommerce Block

Os clientes geralmente chegam à sua loja WooCommerce com um orçamento definido em mente. Eles pensarão: “Só posso gastar $ X, então preciso encontrar o ajuste perfeito”. Forçar os usuários a navegar página após página de produtos até encontrar um que atenda ao seu orçamento pode ser exaustivo. É aí que o bloco Filter Products by Price WooCommerce é útil.

Este bloco permite que os clientes escolham uma faixa de preço específica. O WooCommerce atualizará a lista de produtos para mostrar apenas os itens que se encaixam nesse orçamento. Este artigo mostrará como colocar o bloco Filtrar Produtos por Preço e como configurá-lo. Também discutiremos as práticas recomendadas para usar esse elemento.

Vamos lá!

Como adicionar o filtro de produtos por preço WooCommerce Block ao seu post ou página

Antes de explicarmos como usar o bloco Filter Products by Price , é importante observar que ele só funciona em conjunto com o bloco All Products WooCommerce. Se você colocar o bloco Filtrar produtos por preço em qualquer página que não inclua o bloco Todos os produtos , o recurso de filtragem não funcionará.

Juntos, esses dois blocos formam uma combinação perfeita para a página principal da sua loja. Com isso em mente, abra o Editor de Blocos e coloque primeiro o bloco Todos os Produtos :

Este bloco irá gerar uma grade de produtos que inclui todos os itens do seu catálogo. Você pode configurar quantas linhas e colunas essa grade de produtos inclui e alterar a ordem em que os itens aparecem:

Por enquanto, não vamos mexer nessas configurações. Em vez disso, selecione a opção de adicionar um novo bloco acima do elemento Todos os produtos . Procure o bloco Filtrar Produtos por Preço :

Depois de colocar esse elemento, o Editor de blocos exibirá um controle deslizante de preço começando em $ 0 e limitando-se ao preço do item mais caro da sua loja. No nosso caso, esse é um produto de US$ 90, então o controle deslizante vai de US$ 0 a US$ 90:

Você notará que o controle deslizante não funciona na tela do editor. Para ver o bloco em ação, você precisará visualizar a página (ou publicá-la e acessá-la no front-end). Se ainda não parecer certo, não se preocupe – vamos falar sobre como configurá-lo.

Filtrar produtos por preço Configurações e opções do bloco WooCommerce

O bloco Filtrar produtos por preço não oferece uma ampla variedade de configurações. No entanto, você pode configurar alguns aspectos de como o bloco se parece e funciona.

Para acessar essas configurações, selecione o elemento dentro do Block Editor e clique no ícone de engrenagem no canto superior direito da tela. Isso abrirá o menu de configurações do bloco à direita. Dentro deste menu, você pode habilitar ou desabilitar a opção de campos de texto de preço editáveis:

Se você selecionar a opção Texto , os usuários só poderão filtrar preços usando o controle deslizante. A opção Editável padrão também permite que eles alterem os campos de preço manualmente.

Seguindo em frente, o menu de configurações do bloco inclui uma opção para adicionar um botão de confirmação ou “filtro”. Se você habilitar essa configuração, os usuários terão que clicar em um botão para confirmar a faixa de preço que definiram. Por fim, você pode alterar o nível de título do texto Filtrar produtos por preço :

A configuração do bloco Filtrar produtos por preço não deve demorar muito, pois o elemento inclui apenas algumas configurações. Se você não tiver certeza de quais opções selecionar, falaremos sobre nossas configurações recomendadas na próxima seção.

Dicas e práticas recomendadas para usar o filtro de produtos por preço WooCommerce Block efetivamente

A primeira coisa que você precisa considerar ao usar o bloco Filtrar produtos por preço é que ele só funciona junto com o bloco Todos os produtos WooCommerce. O bloco Todos os produtos não permite filtrar produtos por categorias ou qualquer outro atributo. Isso significa que faz sentido emparelhar os dois blocos se você estiver criando uma página de loja WooCommerce.

Como mencionamos anteriormente, faz sentido colocar o bloco Filtrar Produtos por Preço acima do elemento Todos os Produtos . Dessa forma, os usuários não perderão o recurso de filtragem enquanto navegam na página da loja.

O bloco Filtrar Produtos por Preço já inclui um cabeçalho de identificação, onde se lê “Filtrar por preço”. Esse cabeçalho é perfeito para a maioria das lojas, assim como seu nível H3 padrão. Recomendamos apenas usar níveis de título mais baixos se houver outros elementos H3 na página que tenham precedência.

Por questões de usabilidade, recomendamos que você também mantenha os campos de texto editáveis ​​padrão que vêm com o bloco Filtrar produtos por preço . Oferecer aos usuários a opção de editar preços manualmente ou usar o controle deslizante torna o bloco mais adaptável.

No que diz respeito a adicionar um botão de confirmação, deixamos essa escolha para você. Ativar o botão significa que sua grade de produtos não será atualizada automaticamente conforme você usa o controle deslizante Filtrar produtos por preço . No entanto, isso pode ser um compromisso válido se o seu site já estiver com problemas de desempenho.

Perguntas frequentes sobre os produtos de filtro por preço WooCommerce Block

Se você ainda tiver alguma dúvida sobre o bloco Filtrar Produtos por Preço , esta seção visa respondê-las. Vamos começar falando sobre os requisitos para que este bloco funcione.

Por que o filtro de produtos por bloco de preço não está funcionando?

O bloco Filtrar produtos por preço só funciona se você emparelhá-lo com o bloco Todos os produtos WooCommerce. Se você colocar o bloco Filtrar produtos por preço ao lado de qualquer outro tipo de grade de produtos, ele simplesmente não funcionará. Você poderá mover o controle deslizante, mas os produtos não serão atualizados adequadamente.

Posso Editar os Preços Mínimo e Máximo no Filtro de Produtos por Bloco de Preço?

O bloco Filtrar produtos por preço define automaticamente seu controle deslizante de preço para começar em $ 0 e limitar ao preço do produto mais caro da sua loja. Você só pode editar o valor do controle deslizante alterando os preços dos produtos em sua loja.

Conclusão

O elemento Filter Products by Price é um bloco WooCommerce que só funciona quando você o emparelha com outro elemento. Outros blocos que só funcionam em pares incluem Filtro de Produtos por Atributo e Filtros de Produto Ativo .

O uso do bloco Filtrar produtos por preço WooCommerce permite que os clientes naveguem por todo o inventário da sua loja e vejam apenas os itens que se encaixam em seus orçamentos. O bloco só funciona ao lado do elemento Todos os produtos , portanto, lembre-se disso ao colocá-lo em seu site.

Você tem alguma dúvida sobre como usar o bloco Filtrar Produtos por Preço ? Vamos falar sobre eles na seção de comentários abaixo!

Imagem em destaque por Bakhtiar Zein / shutterstock.com