Como COLOCAR FILTRO por Preço, Atributos e Categorias na Página Loja (Woocommerce)

e fala pessoal tudo bem aqui é a micaela descobre pelos sites e nesse vídeo eu vou te ensinar a fazer um filtro de preço categoria e atributo para você colocar lá na sua página de loja do commercio am é bom pessoal esse vídeo foi bem pedido por vocês aqui no canal e antes de partir para o tutorial eu só vou pedir para você deixar o like aqui para mim se inscrever no canal se você ainda não for inscrito acho que é um sininho para você receber notificação sempre que eu postar um vídeo novo aqui no

canal me seguiram nas minhas redes sociais pra gente poder entrar tipo lá porque aliás foi pular nas caixinhas de pergunta que eu deixo no instagram que eu recebi bastante essa solicitação desse tema de vídeo estou trazendo aqui para vocês então não deixa de me seguir lá para que a gente possa interagir e clica no link eu vou deixar aqui na descrição para ir direto lá para o meu canal vivo do telegram tá bom então é isso vamos para a tela do meu computador agora bom pessoal estamos aqui no site da aurora fashion e foi uma

loja que nem você vai criar com elemento o commercio wordpress esse nem a criar sua loja completa se você ainda não fui ver o deixar um card aqui em cima para você ir lá conferir porque tá bem legal tá bom bom então vamos lá vamos aqui para o painel administrativo do wordpress e aí nós vamos ver aqui em plugin us adicionar no e vamos instalar o plugin luffy que é o público que vai nos permitir gerais e filtro de busca lá é isso aqui ó uf filtro de produtos para o corce e os clicar em

instalar e depois em ativar e aí o ranking quando o senhor tiva ele já te mando aqui para tela de plugin vir calados se não tiver te mandado você clica em clube você já vai cair nessa tela aí aqui em uhf né você vai clicar aqui em sede ou configurações o que ele vai te mandar aqui pra tela configurações do clubinho é aquilo nessa abre aqui aonde você configura como vai aparecer o seu filtro de busca né o seu filho de pesquisa lá no na sua loja aqui essa primeira opção é opção de preço né

vou até traduzir aqui meu português para vocês verem é pesquisar por preço e aí aqui nessa barrinha você consegue definir ou se você não quer que apareça você deixa não se você quer que apareça como slide como a barra drop-down com essa daqui como botões de rádio que são aqueles do botões redondinhos como caixinha entrada de texto ou como controle deslizante eu vou escolher controle deslizante para ficar aquela barrinha onde você consegue arrastar a net e aí aqui embaixo tem algumas outras alguns outros itens que você pode deixar lá para para servir de busca de

filtro de busca eu vou querer ativar categoria de produto e atributo tamanho tá vendo e aí para ativar você clica aqui nessa caixinha que aí só os que tiverem selecionados aqui nessa caixinha que vão aparecer lá beleza aqui nessa aba de cá você configura que tipo de seleção lá que você quer que apareça se você quer que apareça como rádio que são aquelas que ele circunvizinhas você quer que apareça como caixa de seleção o check box né que igual isso daqui a aqui no meu quero que apareça a caixa de seleção né então vou terminar

aqui e aqui e aqui você consegue arrastar e ficou nizinho você consegue arrastar né que você consegue definir eu quero esse aqui primeiro isso daqui primeiro você consegue arrastar para definir a posição aqui dos itens que você quer beleza aqui em opções adicionais é onde você configura para aparecer a para aparecer algumas informações lá por exemplo a etiqueta né para parecer etiqueta dos filtros se você deixar não ele não vai aparecer se você deixar assim vai aparecer eu vou deixar com mocinha aqui e aqui em rótulo personalizado eu vou escrever categorias a categoria na verdade

categoria e vou clicar em aplicar oi e aí aqui nesse aqui vou de terminar aqui também como assim e aí aqui em rótulos personalizado para escrever tamanho é isso que vai aplicar a e quem e depois feito isso clique em salvar alterações aí eu vou ver aqui na minha página da loja né aberta pode todo o elemento aí eu vou recarregar que a página para ela pegar essas atualizações que eu fiz aqui e aí eu vou vir aqui na biblioteca do elemento procurar por um novo que a gente já gera um widget aqui tá vendo

é igual arrastar para cá e aí já está aparecendo aqui tá vendo filtro de categoria e o filtro de tamanho eu vou excluir esse daqui que eu tinha feito manualmente e vou vir aqui e vou mudar esse título aqui vou escrever sim e filtre sua busca eu vou diminuir também tamanho que dessa fonte e deixar 20 essa daqui de baixo também deixar 20 e pronto ó e vou colocar atualizar você pode perceber que hoje em cima que deveria ser o filtro de preço tá desse jeito aqui para isso é uma barra de busca né sem

nada mas é assim mesmo aqui no editor do elemento ele aparece assim mas se a gente recarregar a página se a gente for olhar página de vendo a página de loja e ele vai estar normal aqui tá vendo eu ganhei aqui se você selecionar as categorias ele vai recarregar aqui vai aparecer os produtos só da categoria o das categorias que você seja sim ou não tá vendo e ainda falou que fica aqui para você clicar em excluir nela e aqui a faixa de preço e aí mundo deixa os produtos só na faixa de preço que

você a colocou aqui beleza e aí eu quero fazer algumas modificações por exemplo eu quero mudar o estilo dessa caixinha aqui ah e também quero tirar essa contagem aqui de categorias para fazer isso eu vou voltar lá no pinguim né de todo por mim aqui vou vir aqui em opções e aí vou vir aqui traduzir a página e aqui em mostrar contagem tá assim e pouca não o anime eu vou colocar aqui de salvar ah e eu também vou vir aqui em design na cne em rádio ou check box é estilo né eu vou ver

aqui e selecionar esse aqui fate frete aéreo a gente aí vou colocar aquele salvar e esse fat aéreo aqui ele faz mudar o estilo aqui da caixinha agora tá desse jeito aí vai carregar aqui para você ver e aí tá vendo muda o estilo para essa caixinha cinza que eu acho que fica mais legal tá e aí você mais tem vários estilos lá você pode ir testando é como você pode perceber não apareceu aqui o título que a gente tinha configurado às vezes quando você configura ele não aparece assim mesmo que você voltar aqui ó

não tava alterações que você tinha feito então você volta aqui faz de novo coloca como sim aqui e aqui taxonomia você coloca aqui ó cadê o parto porque eu tenho a música categoria o que eu tinha aplicar aqui embaixo coloca assim e coloca tamanho e clique em aplicar e depois em salvar a beleza aí agora nós vamos recarregar aqui para gente ver se já tá aparecendo e agora está presente bem categoria e tamanho e aí pessoal vai aparecendo aqui com fome ela usa atributos ou categorias que você for colocando por exemplo eu vou atribuir uma

um atributo cor aqui para vocês verem vou vir aqui em produtos né a atributos e aí eu vou criar aqui o nome do atributo cor e vou clicar em adicionar atributo e eu vou colocar aqui em cima do nome cor aqui o ivan atribuíam dos aqui branco é só escrever o nome aqui nome e ficar em mente tá ficando é não tem cliente que já vai ali para a barrinha do lado preto o vermelho o amarelo o azul e pronto vou colocar essas cores já criou atributo aqui aí vou voltar lá no nas configurações do

plugin né plugin instalado o eric wolf corações e aí agora apareceu aqui ó atributo cor o selecionar vim aqui em adicionar ou cá assim não vem aqui natação na minha colocar cor e vou aplicar e aqui para escolher o check box também ó e vou clicar em salvar alterações e aí você vai carregar aqui a página na loja já vai passar aparecer esse atributo cole aqui também tá vendo ó aqui tá parecendo só os produtos que eu tinha aqui em casa aqui para pesquisar se eu exclui aqui aí vai sumir é né ou então se

aplicado que me resetar ele também vai tirar aqui as o fio que eu tinha feito né e voltou para pais na roni deixa eu ir lá para pais na loja e aí tá vendo categoria tamanho e cor existentes aqui estão muito grandes e aí eu quero alterar eles eu vou recarregar a página aqui na onde que tá o editor dormir e aí agora eu vou vir aqui na manhã três barrinhas aqui de cima do elemento vem editor né estilo de thaila o que esses títulos aqui pelo que eu vi eles são eles são h4 e

eu vou mudar eles aqui vou vir aqui de fotografia que é que tem que o h4 a diminuir o tamanho deles aqui vou colocar 18 o que é em 17 vou mudar aqui a família da fonte da halen lycra antes que eu uso igual cabeça que acho que vocês têm pronto eu vou clicar em atualizar ó bom e o que você está aqui no x para fechar o editor ótimo vou recarregar a página da loja aqui agora e me pronta olha só já está aqui desse jeito e aí já tá ficando aqui as barrinhas que

você que você selecionou lá você pode perceber que por exemplo e se não tiver atribuída alguma coisa você não consegue fazer o filtro aqui da da música tá vendo g não tem nenhum que tem g então vai aparecer nenhum aí quando tem algum aí ele vem aqui aparece o produto aqui no caso a gente determinou para aparecer uma blusa tamanho g aí não tem mesmo aí não vai aparecer que eu não tenho nenhum tamanho g mas se for só blusa aí ele aparece aqui entendeu então cuidado para não deixar aparecendo aqui é atributos que não

tenha que não seja atribuída nenhum produto tá bom agora eu vou fazer duas mudanças aqui como vai ser aqui no desktop que eu vou mudar o estilo aqui dessa colo não vou vir aqui na na coluna tipo de fundo vou colocar um cinza bem clarinho aqui de fundo tá certo vou vir aqui nessa nessa borda vou colocar nenhuma aqui para assumir essa borda que tava aqui vou colocar arredondamento 10 e por mim aqui na sessão e como eu tinha colocado configurada a sessão que me layout para esticar e para ser largura total eu vou desfazer

vou deixar volta seja assim ó e vou vir aqui também avançado e vou colocar os pensamentos superior 50 inferior de 50 e eu acho que vai ficar mais legal assim com essa barrinha desse jeito vou vir aqui nessa coluna aqui eu vou deixar os pensamentos assim acho que então vou clarear mais um pouquinho que esse fundo e aí o ok beleza e aí no desktop vou fazer assim tá e no no mobile eu vou fazer uma outra coisa eu vou vir aqui nessa sessão a sessão a quando eu tinha feito ela já tinha tirado esse

filtro aqui de busca aqui né já tinha tirado a o que eu tinha feito anterior então essa seção aqui eu vou deixar desse jeito mesmo né aqui isso consigo deixar o culto aqui para computador e aí eu vou criar um outro que para aparecer só para celular vou voltar lá no meu painel administrativo do wordpress oi e aí vou vir aqui em modelos adicionar nulo e aí eu escolhi aqui o arquivo de produtos cá sem ser arquivo de produtos e vou colocar aqui um filtro de busca de produtos colocar esse não filtro de busca de

produtos e eu vou fechar aqui a vou colocar aqui no mobile eu vou pegar uma sessão que conclusão só vou vir aqui eu vou pegar widget aqui do uf aqui vou colar aqui é né e vou fazer uma configuração aqui para mumbai para o link na seção avançado colocar 20 kids passamento né é isso eu vou clicar em publicar aí aqui eu não vou adicionar nenhuma condição do só que eu tenho que salvar eu vou voltar aqui e eu vou vir aqui me construtor de tema que aonde vai está o que eu fiz o consultor

de tema filtro de busca de produto aí eu vou vir aqui no short com hoje e o copiar esse short food vou voltar aqui para a página da loja vou colocar em mobile e aí aqui em cima eu vou adicionar aqui uma sessão de uma coluna só vou pegar aqui uma cor de neon é eu pegar um acordeon vou excluir aqui né deixar só um aí aí aqui eu vou escrever filtre a sua boca oi tá aí aqui em texto e eu vou excluir o que tá aqui vou lá o short cut oi beleza e

aí aquele ícone nesse primeiro aqui eu vou clicar aqui na setinha para escolher um ícone aqui de de ler que é isso aqui é porque a minha inferir e aí vou ver aqui o mito título vou configurar a cor preta e a curativa e a cor a inativa de preto vou colocar uma fonte falou ai e a fonte que eu uso peso 600 colocar tamanho dente aqui ó ó e aqui no ícone vou afastar um pouco aqui né vou afastar um pouco e vou vir aqui na avançado como ele não dá para colocar centralizado eu

vou vir aqui minha avançado eu desvincular os valores aqui de pede eu vou colocar um espaçamento aqui na esquerda para ele ficando aqui para o milho um centralizado 60d espaçamento aqui aqui tá parecendo rosa porque aqui no elemento já tá assim mas quando você assistir no celular ele vai estar fritar nem um pouquinho aqui na sessão de baixo vou desenrolar esses lagos aqui para poder sair eu tinha colocado em cima ah tá vou vim aqui no título vou diminuir um pouquinho tamanho sua letra deixar 17 pronto vai ficar assim aí quando a pessoa a clicar

aí vai aparecer o filtro sim tá vendo ainda tem uma bordinha aqui que eu para tirar também não vou vir aqui a cor da borda do chá branco né que a cor do meu fundo aqui aí pronto aí quando a pessoa clicar vai aparecer sim eu tentei fazer com poupado e ficou perfeito mas o filtro não funciona ele como ele é destinado para o como esse ele só funciona a busca né a função dele se ele tiver no arquivo de produtos como esse como esse modelo que a gente fez então no poupatempo ele não funcionou

mas eu achei que ficou legal assim também com esse é um esse filtro aqui feito com acordeon e aí a gente vai fazer mais uma configuração aqui a gente vai vir aqui na seção avançado responsivo ocultar para desktop né daqui não apareça no desktop aí ó tá vendo aí aqui no desktop ele vai sumir oi e aí pronto vai ficar assim no mobile e no desktop vai ficar com aquele filtrinho lá tá bom pessoal a vou recarregar aqui ó não tá desse jeito não tá daquele jeito lá que a gente configurou lembra que no o

elemento fica daquele jeito aí vai ficar assim desktop e daquele outro jeito lá no mobile eu vou pessoal aula de hoje foi essa espero que você tenha gostado que você gostou deixe um comentário aqui dá um like no vídeo se inscreve no canal se você ainda não for inscrito ative o sininho para receber uma notificação sempre que eu postar um vídeo novo aqui no canal me segue lá nas minhas redes sociais porque a gente possa interagir para o rar e clica no link que eu vou deixar aqui na descrição para ir direto lá para o

meu canal vip do telegram tá bom é isso pessoal até a próxima um abraço tchau tchau tchau