Come creare barre laterali filtrate per le tue pagine Divi WooCommerce

Se hai mai provato ad aggiungere barre laterali WooCommerce filtrate alle pagine che hai creato con i page builder, probabilmente avrai notato che i filtri non vengono visualizzati sulle tue pagine. Non importa quale generatore di pagine stai utilizzando, i filtri semplicemente non verranno visualizzati.

Il motivo è che quei widget non sono compatibili con i page builder. In questo articolo, esamineremo un modo semplice per creare barre laterali WooCommerce filtrate per le pagine create con Divi Builder o qualsiasi altro generatore di pagine.

Barre laterali standard di WooCommerce

WooCommerce include diversi widget filtrabili.

• Filtra i prodotti per attributo
• Filtra i prodotti per prezzo
• Filtra i prodotti per valutazione

Questi widget funzionano perfettamente sui normali temi di WordPress, ma non vengono visualizzati sulle pagine create con i page builder.

Temi WordPress

I widget filtrabili funzionano bene all'interno di pagine realizzate con temi WordPress regolari. Il Twenty Seventeen li mostra nella barra laterale senza problemi. Sto usando i dati di esempio di WooCommerce che includono colori e prezzi. I prodotti Filtra per attributo e per prezzo sono in primo piano.

Ecco Divi che mostra la pagina del negozio predefinita di WooCommerce senza utilizzare Divi Builder. Mostra i widget di filtro proprio come qualsiasi tema normale.

Costruttori di WordPress

Le pagine create con i builder non mostrano i widget del filtro WooCommerce. Non fa alcuna differenza se la barra laterale viene visualizzata all'interno del builder o come barra laterale standard. Ecco alcuni esempi.

Questa pagina è stata creata con Beaver Builder. Include la barra laterale, ma i filtri non vengono visualizzati. Ho aggiunto un widget di testo in modo che tu possa vedere che la barra laterale viene visualizzata senza i widget del filtro. Ho pubblicato la pagina per la visualizzazione dal vivo, ma non ha fatto alcuna differenza.

Questo è stato costruito con Elementor. Ho aggiunto la barra laterale sopra i prodotti. Mostra il widget di testo ma non i filtri. Ho anche pubblicato la pagina da vedere dal vivo ma non c'era differenza.

Ecco il Divi Builder che mostra la stessa barra laterale. L'uso del plugin o del tema Divi Builder ha avuto lo stesso risultato. Ho pubblicato la pagina per la visualizzazione dal vivo, ma i filtri non vengono ancora visualizzati.

Mostrare i filtri WooCommerce nelle barre laterali di Builder

Fortunatamente, c'è un modo semplice per mostrare un filtro di prodotto WooCommerce nella barra laterale anche se stai costruendo la pagina del prodotto con un generatore di pagine. Abbiamo bisogno di un plugin chiamato WooCommerce Product Filter.

Themify – Filtro prodotti WooCommerce

WooCommerce Product Filter è un plug-in gratuito di Themify che funziona in modo diverso rispetto ai widget di filtro dei prodotti WooCommerce standard. Crea facilmente più combinazioni di filtri. Crea il modulo con il generatore di moduli trascina e rilascia. Impostalo su un layout verticale o orizzontale, scegli il numero di colonne e adattalo al tuo sito web. Mostra i risultati della ricerca in tempo reale e include molte opzioni. È intuitivo da usare e funziona con tutti i costruttori di temi.

Creazione di un nuovo filtro prodotto

Installa il plugin dal deposito di WordPress. Nel menu Dashboard, vai a Filtri prodotto > Filtri prodotto > Aggiungi nuovo . Otterrai un modale con tutto il necessario per creare il filtro. Passa attraverso le impostazioni per creare il tuo shortcode. Invece di avere tre widget di filtro, questo filtro può creare più tipi di filtri personalizzati per creare un numero qualsiasi di widget.

Dagli un titolo che descriva il filtro. Scegli tra un layout verticale o orizzontale, se mostrare i campi vuoti, l'ordinamento dei prodotti, il conteggio dei prodotti e i prodotti esauriti. Scegli se mostrare o meno l'impaginazione e scegli tra standard, scorrimento infinito o carica di più.

Inserisci il numero di prodotti per pagina. Scegliere se si desidera rendere attivabili i gruppi di campi, scorrere fino al risultato, scegliere tra logica AND o OR per le tassonomie e se i risultati vengono visualizzati nella pagina corrente o in una nuova pagina. Se scegli una nuova pagina sarai in grado di selezionare la pagina da un elenco. Puoi anche scegliere se visualizzare o meno il filtro nella nuova pagina.

Una volta effettuate le selezioni, dovrai creare il modulo. Questo determinerà come apparirà il filtro all'interno della barra laterale. Trascina ciascuno degli elementi del modulo che desideri nel campo nella parte inferiore della schermata di creazione dello shortcode.

Ogni elemento apre una nuova serie di funzionalità. Ognuno è diverso, ma la maggior parte ha opzioni simili. Ecco uno sguardo alla categoria.

Dagli un titolo. Se vuoi, puoi nascondere il titolo. Scegli se mostrare o meno i conteggi dei prodotti, la gerarchia delle categorie e includere i bambini. Visualizza il filtro come casella di controllo, collegamenti, pulsanti di opzione, casella a discesa o selezione multipla. Scegli la logica, imposta l'ordinamento e scegli il layout con il numero di colonne. Imposta i colori del testo. Puoi anche scegliere quali categorie includere o escludere.

Se scegli il colore, le icone apriranno una serie di selettori di colori in cui puoi impostare i colori di ogni categoria di prodotto individualmente. Imposta il colore per lo sfondo e il testo. Puoi scegliere i colori dai raccoglitori o inserire i codici esadecimali all'interno dei campi.

Puoi anche trascinare e rilasciare i campi nell'ordine desiderato. Una volta creato il filtro, seleziona Salva .

Chiudi il modale e vedrai il tuo filtro aggiunto all'elenco. Fornisce il nome, lo shortcode e l'elenco dei campi all'interno del filtro. Puoi modificare, esportare o eliminare il filtro. Copia lo shortcode.

Aggiungi un widget di testo alla barra laterale e incolla lo shortcode.

I filtri ora vengono visualizzati all'interno delle pagine del negozio create con i builder. Ecco la pagina con il Divi Builder.

Ecco il filtro che mostra nella pagina Beaver Builder nel tema Twenty Sixteen.

Ecco il filtro con Elementor nel tema Twenty Seventeen. Questo usa un layout orizzontale.

Utilizzo di Themify - Filtro prodotto WooCommerce con layout Divi

Divi ha molti layout di negozio tra cui scegliere. In questo esempio, ho aggiunto un modulo di testo alla pagina Negozio del negozio di mobili e ho inserito lo shortcode del filtro all'interno del modulo di testo. Avrei potuto scegliere il modulo della barra laterale, ma non importa con questo esempio.

Questa è la disposizione verticale. Si adatta perfettamente al design del layout.

Ho impostato i pulsanti in modo che corrispondano allo stile del layout. Sfortunatamente, non sono stato in grado di regolare il pulsante di ricerca.

Ecco il layout orizzontale. Questo esempio utilizza ancora il layout di 3/2 colonne che ho scelto per il filtro verticale.

I filtri si aprono al passaggio del mouse. È reattivo, quindi viene visualizzato verticalmente per adattarsi alla colonna.

Per questo, ho posizionato il filtro sotto il modulo negozio.

Ecco il filtro sopra il modulo negozio.

Sia che utilizzi lo shortcode all'interno di un modulo di testo o all'interno di una barra laterale, puoi aggiungere uno stile utilizzando la scheda Design del modulo Divi. Ciò significa che puoi applicare uno stile al testo dell'etichetta applicando uno stile al testo del modulo. In questo esempio, ho impostato il testo in rosso, aumentato le dimensioni e reso tutto maiuscolo.

Filtraggio dei prodotti WooCommerce

Per eseguire la ricerca, l'utente fa clic sui pulsanti, seleziona le caselle e fa scorrere il dispositivo di scorrimento per filtrare ciò che sta cercando. Possono anche inserire un titolo. Quando sono pronti, fanno semplicemente clic sul pulsante di ricerca.

risultati di ricerca

I risultati verranno quindi visualizzati nel modo in cui l'hai impostato nelle impostazioni. Per questo, l'ho impostato per visualizzarli nella parte inferiore della pagina. Scorre automaticamente ai risultati e fornisce all'utente una funzione di ordinamento.

Se lo imposti per l'apertura in una nuova pagina, i risultati verranno inseriti nella parte inferiore di quella pagina. In questo esempio, ho creato una pagina utilizzando l'intestazione della pagina Negozio del negozio di mobili. Ho aperto la funzione di ordinamento per mostrare le opzioni di ordinamento.

Pensieri finali

Questo è il nostro sguardo su come creare barre laterali WooCommerce filtrate per la pagina creata con Divi Builder. Il plugin è intuitivo e aggiunge molte funzionalità di filtro ai prodotti WooCommerce. Puoi creare tutti i filtri che vuoi e posizionarli su qualsiasi pagina tu voglia. Puoi persino modellarli con le caratteristiche di stile di Divi. Poiché si tratta di uno shortcode, puoi utilizzarli all'interno di barre laterali o moduli.

Mi piacerebbe avere più controllo su come vengono visualizzati i risultati. Ad esempio, sarebbe utile inserire uno shortcode dove apparirà il risultato. Ciò consentirebbe di posizionare i risultati in qualsiasi punto della pagina anziché in fondo. Ciò consentirebbe piè di pagina personalizzati, un'area dei risultati all'interno di una pagina, ecc. Vorrei anche avere alcune opzioni di stile in più. Principalmente, voglio dare uno stile al pulsante di ricerca.

Themify - WooCommerce Product Filter è un'ottima scelta se desideri un plug-in gratuito per aggiungere un filtro di prodotto alle tue pagine di Divi Builder.

Vogliamo sentire da voi. Hai provato il plugin Themify – WooCommerce Product Filter con le pagine del negozio realizzate con Divi Builder? Fateci sapere la vostra esperienza nei commenti.

Immagine in primo piano tramite Max Griboedov / shutterstock.com