Come utilizzare il filtro prodotti per prezzo Blocco WooCommerce

Pubblicato: 2021-12-22

I clienti arriveranno spesso al tuo negozio WooCommerce con un budget prestabilito in mente. Penseranno: "Posso spendere solo $ X, quindi devo trovare la soluzione perfetta". Costringere gli utenti a navigare pagina dopo pagina di prodotti finché non ne trovano uno che soddisfi il loro budget può essere estenuante. È qui che torna utile il blocco Filtra prodotti per prezzo WooCommerce.

Questo blocco consente ai clienti di scegliere una fascia di prezzo specifica. WooCommerce aggiornerà quindi l'elenco dei prodotti per mostrare solo gli articoli che rientrano in quel budget. Questo articolo ti mostrerà come posizionare il blocco Filtra prodotti per prezzo e come configurarlo. Discuteremo anche le migliori pratiche per l'utilizzo di questo elemento.

Andiamo a farlo!

Come aggiungere il filtro prodotti per prezzo WooCommerce Block al tuo post o alla tua pagina

Prima di spiegare come utilizzare il blocco Filtra prodotti per prezzo , è importante notare che funziona solo in combinazione con il blocco Tutti i prodotti WooCommerce. Se inserisci il blocco Filtra prodotti per prezzo in una pagina che non include il blocco Tutti i prodotti , la funzione di filtro non funzionerà.

Insieme, questi due blocchi creano una combinazione perfetta per la pagina del negozio principale del tuo negozio. Con questo in mente, apri l'Editor blocchi e posiziona prima il blocco Tutti i prodotti :

Aggiunta di un blocco Tutti i prodotti in WooCommerce

Questo blocco genererà una griglia di prodotti che include ogni singolo articolo nel tuo catalogo. Puoi configurare quante righe e colonne include la griglia del prodotto e modificare l'ordine di visualizzazione degli articoli:

Configurazione del blocco Tutti i prodotti WooCommerce

Per ora, non armeggeremo con queste impostazioni. Seleziona invece l'opzione per aggiungere un nuovo blocco sopra l'elemento Tutti i prodotti . Cerca il blocco Filtra prodotti per prezzo :

Aggiunta del blocco Filtra prodotti per prezzo in WooCommerce

Una volta posizionato questo elemento, l'Editor blocchi visualizzerà un dispositivo di scorrimento del prezzo a partire da $ 0 e con un limite al prezzo dell'articolo più costoso del tuo negozio. Nel nostro caso, si tratta di un prodotto da $ 90, quindi lo slider va da $ 0 a $ 90:

Il blocco Filtra per prezzo in WooCommerce

Noterai che il dispositivo di scorrimento non funziona all'interno della schermata dell'editor. Per vedere il blocco in azione, dovrai visualizzare in anteprima la pagina (o pubblicarla e accedervi dal front-end). Se non sembra ancora a posto, non preoccuparti: parliamo di come configurarlo.

Filtra i prodotti per prezzo Impostazioni e opzioni del blocco WooCommerce

Il blocco Filtra prodotti per prezzo non offre un'ampia gamma di impostazioni. Tuttavia, puoi configurare alcuni aspetti dell'aspetto e del funzionamento del blocco.

Per accedere a queste impostazioni, seleziona l'elemento all'interno dell'Editor blocchi e fai clic sull'icona a forma di ingranaggio nell'angolo in alto a destra dello schermo. Questo aprirà il menu delle impostazioni del blocco a destra. All'interno di questo menu, puoi abilitare o disabilitare l'opzione per i campi di testo del prezzo modificabili:

Configurazione dei campi prezzo per il blocco Filtra prodotti per prezzo

Se selezioni l'opzione Testo , gli utenti potranno filtrare i prezzi solo utilizzando il dispositivo di scorrimento. L'opzione Modificabile predefinita consente loro anche di modificare manualmente i campi del prezzo.

Andando avanti, il menu delle impostazioni del blocco include un'opzione per aggiungere un pulsante di conferma o "filtro". Se abiliti questa impostazione, gli utenti dovranno fare clic su un pulsante per confermare la fascia di prezzo che hanno impostato. Infine, puoi modificare il livello di intestazione per il testo dell'etichetta Filtra prodotti per prezzo :

Configurazione del blocco Filtra prodotti per prezzo

La configurazione del blocco Filtra prodotti per prezzo non dovrebbe richiedere molto tempo, poiché l'elemento include solo una manciata di impostazioni. Se non sei sicuro delle opzioni da selezionare, parleremo delle nostre impostazioni consigliate nella prossima sezione.

Suggerimenti e best practice per l'utilizzo efficace del blocco WooCommerce Filtra i prodotti in base al prezzo

La prima cosa che devi considerare quando usi il blocco Filtra prodotti per prezzo è che funziona solo insieme al blocco Tutti i prodotti WooCommerce. Il blocco Tutti i prodotti non ti consente di filtrare i prodotti per categorie o altri attributi. Ciò significa che ha senso accoppiare i due blocchi insieme se stai costruendo una pagina del negozio WooCommerce.

Come accennato in precedenza, ha senso posizionare il blocco Filtra prodotti per prezzo sopra l'elemento Tutti i prodotti . In questo modo, gli utenti non perderanno la funzione di filtro mentre navigano nella pagina del negozio.

Il blocco Filtra prodotti per prezzo include già un'intestazione identificativa, che recita "Filtra per prezzo". Quell'intestazione è perfetta per la maggior parte dei negozi, così come il suo livello H3 predefinito. Si consiglia di utilizzare livelli di intestazione inferiori solo se nella pagina sono presenti altri elementi H3 che hanno la precedenza.

Il blocco Filtra prodotti per prezzo in azione

Per motivi di usabilità, ti consigliamo di mantenere anche i campi di testo modificabili predefiniti forniti con il blocco Filtra prodotti per prezzo . Offrire agli utenti la possibilità di modificare i prezzi manualmente o utilizzare il dispositivo di scorrimento rende il blocco più adattabile.

Per quanto riguarda l'aggiunta di un pulsante di conferma, lasciamo questa scelta a te. Abilitare il pulsante significa che la griglia del tuo prodotto non si aggiornerà automaticamente quando utilizzi il dispositivo di scorrimento Filtra prodotti per prezzo . Tuttavia, questo può essere un valido compromesso se il tuo sito web sta già soffrendo di problemi di prestazioni.

Domande frequenti sui prodotti Filtra per prezzo Blocco WooCommerce

Se hai ancora domande sul blocco Filtra prodotti per prezzo , questa sezione mira a rispondere. Iniziamo parlando dei requisiti per il funzionamento di questo blocco.

Perché il filtro prodotti per blocco prezzo non funziona?

Il blocco Filtra prodotti per prezzo funziona solo se lo abbini al blocco Tutti i prodotti WooCommerce. Se inserisci il blocco Filtra prodotti per prezzo insieme a qualsiasi altro tipo di griglia di prodotti, semplicemente non funzionerà. Potrai spostare il cursore, ma i prodotti non si aggiorneranno di conseguenza.

Posso modificare i prezzi minimo e massimo nel filtro prodotti per blocco prezzo?

Il blocco Filtra prodotti per prezzo imposta automaticamente il dispositivo di scorrimento del prezzo in modo che inizi da $ 0 e limiti il ​​prezzo del prodotto più costoso del tuo negozio. Puoi modificare il valore del dispositivo di scorrimento solo modificando i prezzi dei prodotti nel tuo negozio.

Conclusione

L'elemento Filtra prodotti per prezzo è un blocco WooCommerce che funziona solo quando lo abbini a un altro elemento. Altri blocchi che funzionano solo in coppia includono Filter Products by Attribute e Active Product Filters .

L'utilizzo del blocco Filtra prodotti per prezzo WooCommerce consente ai clienti di navigare nell'intero inventario del tuo negozio e vedere solo gli articoli che si adattano ai loro budget. Il blocco funziona solo insieme all'elemento Tutti i prodotti , quindi tienilo a mente quando lo posizioni sul tuo sito web.

Hai domande su come utilizzare il blocco Filtra prodotti per prezzo ? Parliamo di loro nella sezione commenti qui sotto!

Immagine in primo piano di Bakhtiar Zein / shutterstock.com