Como criar barras laterais filtradas para suas páginas Divi WooCommerce

Se você já tentou adicionar barras laterais WooCommerce filtradas a páginas que criou com construtores de páginas, provavelmente notou que os filtros não aparecem em suas páginas. Não importa qual construtor de páginas você está usando, os filtros simplesmente não serão exibidos.

A razão é que esses widgets não são compatíveis com os construtores de páginas. Neste artigo, veremos uma maneira fácil de criar barras laterais WooCommerce filtradas para páginas feitas com o Divi Builder ou qualquer outro construtor de páginas.

Barras laterais WooCommerce padrão

WooCommerce inclui vários widgets filtráveis.

• Filtrar produtos por atributo
• Filtrar produtos por preço
• Filtrar produtos por classificação

Esses widgets funcionam muito bem em temas comuns do WordPress, mas não são exibidos em páginas feitas com construtores de páginas.

Temas WordPress

Os widgets filtráveis ​​funcionam bem em páginas feitas com temas comuns do WordPress. O Twenty Seventeen os mostra na barra lateral sem problemas. Estou usando os dados de amostra do WooCommerce que incluem cores e preços. Os produtos de filtro por atributo e por preço são proeminentes.

Aqui está o Divi mostrando a página da loja padrão do WooCommerce sem usar o Divi Builder. Ele mostra os widgets de filtro como qualquer tema normal.

Construtores de WordPress

As páginas feitas com construtores não mostram os widgets de filtro WooCommerce. Não faz nenhuma diferença se a barra lateral é exibida dentro do construtor ou como a barra lateral padrão. Aqui estão alguns exemplos.

Esta página foi construída com Beaver Builder. Inclui a barra lateral, mas os filtros não são exibidos. Eu adicionei um widget de texto para que você possa ver que a barra lateral é exibida sem os widgets de filtro. Publiquei a página para ver ao vivo, mas não fez diferença.

Este foi construído com Elementor. Eu adicionei a barra lateral acima dos produtos. Mostra o widget de texto, mas não os filtros. Também publiquei a página para ver ao vivo, mas não houve diferença.

Aqui está o Divi Builder mostrando a mesma barra lateral. O uso do plugin ou tema Divi Builder teve o mesmo resultado. Publiquei a página para ver ao vivo, mas os filtros ainda não foram exibidos.

Mostrando filtros WooCommerce nas barras laterais do Builder

Felizmente, há uma maneira fácil de mostrar um filtro de produto WooCommerce na barra lateral, mesmo se você estiver criando a página do produto com um criador de páginas. Precisamos de um plugin chamado WooCommerce Product Filter.

Themify - Filtro de produto WooCommerce

WooCommerce Product Filter é um plugin gratuito da Themify que funciona de maneira diferente dos widgets de filtro de produto WooCommerce padrão. Crie facilmente várias combinações de filtros. Crie o formulário com o construtor de formulários arrastar e soltar. Defina-o para um layout vertical ou horizontal, escolha o número de colunas e estilize-o para combinar com seu site. Mostra resultados de pesquisa ao vivo e inclui muitas opções. É intuitivo de usar e funciona com todos os criadores de temas.

Criação de um novo filtro de produto

Instale o plugin do depósito do WordPress. No menu Painel, vá para Filtros de produto > Filtros de produto > Adicionar novo . Você obterá um modal com tudo que você precisa para criar o filtro. Vá até as configurações para criar seu shortcode. Em vez de ter três widgets de filtro, este filtro pode criar vários tipos de filtros personalizados para criar qualquer número de widgets.

Dê a ele um título que descreva o filtro. Escolha um layout vertical ou horizontal, se deseja mostrar campos vazios, classificação de produtos, contagens de produtos e produtos em falta. Escolha se deseja ou não mostrar a paginação e escolha entre padrão, rolagem infinita ou carregue mais.

Insira o número de produtos por página. Escolha se deseja tornar os grupos de campo alternáveis, rolar até o resultado, escolher entre a lógica AND ou OR para as taxonomias e se os resultados aparecem na página atual ou em uma nova página. Se você escolher uma nova página, poderá selecioná-la em uma lista. Você também pode escolher se o filtro será exibido ou não na nova página.

Depois de fazer suas seleções, você precisará criar o formulário. Isso determinará como o filtro aparecerá na barra lateral. Arraste cada um dos elementos do formulário que deseja para o campo na parte inferior da tela de criação do shortcode.

Cada elemento abre um novo conjunto de recursos. Cada um é diferente, mas a maioria tem opções semelhantes. Aqui está uma olhada em Categoria.

Dê um título. Você pode ocultar o título se quiser. Escolha se deseja ou não mostrar as contagens de produtos, hierarquia de categorias e incluir filhos. Exiba o filtro como uma caixa de seleção, links, botões de opção, caixa suspensa ou seleção múltipla. Escolha a lógica, defina a ordem de classificação e escolha o layout com o número de colunas. Defina as cores do texto. Você também pode escolher quais categorias incluir ou excluir.

Se você escolher a cor, os ícones abrirão um conjunto de seletores de cores onde você pode definir as cores de cada categoria de produto individualmente. Defina a cor do fundo e do texto. Você pode escolher as cores dos seletores ou inserir os códigos hexadecimais nos campos.

Você também pode arrastar e soltar os campos na ordem que quiser. Depois de criar o filtro, selecione Salvar .

Feche o modal e você verá seu filtro adicionado à lista. Ele fornece o nome, o código de acesso e a lista de campos do filtro. Você pode editar, exportar ou excluir o filtro. Copie o shortcode.

Adicione um widget de texto à sua barra lateral e cole no shortcode.

Os filtros agora são exibidos nas páginas da loja criadas com construtores. Aqui está a página com o Divi Builder.

Aqui está o filtro mostrado na página feita do Beaver Builder no tema Twenty Sixteen.

Aqui está o filtro com Elementor no tema Twenty Seventeen. Este usa um layout horizontal.

Usando o Themify - WooCommerce Product Filter com Divi Layouts

Divi tem vários layouts de loja para você escolher. Neste exemplo, adicionei um módulo de texto à página Furniture Store Shop e coloquei o shortcode do filtro dentro do módulo de texto. Eu poderia ter escolhido o módulo da barra lateral, mas isso realmente não importa com este exemplo.

Este é o layout vertical. Ele se encaixa perfeitamente no design do layout.

Eu defino os botões para combinar com o estilo do layout. Infelizmente, não consegui ajustar o botão de pesquisa.

Aqui está o layout horizontal. Este exemplo ainda usa o layout de coluna 3/2 que escolhi para o filtro vertical.

Os filtros abrem ao passar o mouse. É responsivo, por isso é exibido verticalmente para caber na coluna.

Para este, coloquei o filtro sob o módulo de loja.

Aqui está o filtro acima do módulo da loja.

Quer você use o shortcode em um módulo de texto ou em uma barra lateral, você pode adicionar algum estilo usando a guia Design do módulo Divi. Isso significa que você pode estilizar o texto do rótulo, estilizando o texto do módulo. Neste exemplo, defini o texto como vermelho, aumentei o tamanho e o tornei todo em maiúsculas.

Filtrando produtos WooCommerce

Para realizar a pesquisa, o usuário clica nos botões, marca as caixas e desliza o controle deslizante para filtrar o que está procurando. Eles também podem inserir um título. Quando estiverem prontos, basta clicar no botão de pesquisa.

Procurar Resultados

Os resultados serão exibidos da maneira que você configurou nas configurações. Para este, eu configurei para exibi-los na parte inferior da página. Ele rola automaticamente para os resultados e fornece ao usuário um recurso de classificação.

Se você configurá-lo para abrir em uma nova página, os resultados serão colocados na parte inferior da página. Neste exemplo, criei uma página usando o cabeçalho da página Loja de móveis. Abri o recurso de classificação para mostrar as opções de classificação.

Reflexões finais

Esta é a nossa visão de como criar barras laterais WooCommerce filtradas para páginas feitas com o Divi Builder. O plugin é intuitivo e adiciona muitos recursos de filtragem aos produtos WooCommerce. Você pode criar quantos filtros desejar e colocá-los em qualquer página que desejar. Você pode até estilizá-los com os recursos de estilização do Divi. Por ser um shortcode, você pode usá-los dentro de barras laterais ou módulos.

Eu gostaria de ter mais controle sobre como os resultados são exibidos. Por exemplo, seria útil colocar um shortcode onde o resultado aparecerá. Isso permitiria que os resultados fossem colocados em qualquer lugar da página, em vez de na parte inferior. Isso permitiria rodapés personalizados, uma área de resultados em uma página, etc. Eu também gostaria de ter mais algumas opções de estilo. Principalmente, quero estilizar o botão de pesquisa.

Themify - WooCommerce Product Filter é uma ótima opção se você deseja um plug-in gratuito para adicionar um filtro de produto às suas páginas do Divi Builder.

Nós queremos ouvir de você. Você já experimentou o plugin Themify - WooCommerce Product Filter com páginas da loja feitas com o Divi Builder? Conte-nos sobre sua experiência nos comentários.

Imagem em destaque via Max Griboedov / shutterstock.com