Come aggiungere i filtri dei prodotti AJAX di WooCommerce

Vuoi creare filtri prodotto AJAX per il tuo sito? Siete venuti nel posto giusto. In questo articolo, ti mostreremo come aggiungere filtri prodotto WooCommerce per migliorare l'esperienza di acquisto nel tuo negozio .

Prima di dare un'occhiata al processo di creazione e aggiunta di filtri di prodotto, capiamo meglio cosa sono i filtri di prodotto AJAX e perché ne hai bisogno.

Cosa sono i filtri dei prodotti AJAX?

I filtri dei prodotti aiutano l'utente a trovare rapidamente il prodotto desiderato stabilendo i requisiti e filtrando tutti i risultati indesiderati. Ad esempio, se un cliente desidera una maglietta blu, selezionerà una maglietta come tipo di prodotto e il filtro di colore blu per scartare tutti gli altri prodotti e colori. Allo stesso modo, possono esserci filtri per dimensioni, peso, prezzo, valutazione media e così via.

Il termine AJAX si riferisce a una tecnica di sviluppo web che consente di aggiornare la pagina in modo asincrono per piccole quantità di dati. Ciò consente al sito di applicare modifiche minori a una pagina Web rimanendo sulla stessa pagina, il che significa che non è necessario alcun aggiornamento. Al contrario, con le tecniche precedenti, l'intera pagina Web doveva essere ricaricata ogni volta che si verificava un piccolo cambiamento che influiva sull'esperienza dell'utente e consumava più risorse del server.

Perché dovresti usare i filtri dei prodotti?

Ora la domanda che sorge qui è perché dovresti usare i filtri dei prodotti nel tuo negozio? In poche parole, hai bisogno di filtri di prodotto per migliorare l'esperienza di acquisto dei tuoi clienti e aiutarli a trovare ciò che stanno cercando. Quasi tutti i negozi online con un gran numero o una varietà di prodotti utilizzano filtri di prodotto. Amazon, eBay e Zara ne sono un buon esempio.

Utilizzando i filtri, gli acquirenti possono facilmente eliminare tutti i risultati indesiderati e ottenere una selezione dei soli prodotti a cui sono interessati. Ciò si traduce in una migliore soddisfazione del cliente che porta a più conversioni e vendite.

D'altra parte, senza i filtri dei prodotti AJAX, i clienti potrebbero avere difficoltà a trovare i prodotti che desiderano. Lo shopping online dovrebbe essere rapido e semplice, quindi se il processo richiede troppo tempo, i clienti lasceranno il tuo negozio e andranno su un sito diverso che offre un'esperienza migliore.

Poiché probabilmente non vuoi perdere i tuoi clienti, i filtri dei prodotti dovrebbero essere una parte importante della tua strategia di business online.

Quindi, ora che conosci la loro importanza, vediamo come puoi abilitare i filtri dei prodotti nel tuo negozio WooCommerce.

Come aggiungere i filtri dei prodotti WooCommerce

In questo tutorial, ti mostreremo due modi diversi per aggiungere filtri di prodotto al tuo negozio.

1. Filtri dei prodotti WooCommerce predefiniti
2. Utilizzo di un plug-in di terze parti

Diamo un'occhiata a entrambi i metodi.

1. Filtri dei prodotti WooCommerce predefiniti

Per impostazione predefinita, WooCommerce offre alcuni filtri di base per i prodotti. Se hai un negozio relativamente piccolo senza un'ampia varietà di prodotti, potresti scoprire che i filtri predefiniti sono sufficienti per le tue esigenze.

Per aggiungere questi filtri al tuo negozio, vai su WP Admin Dashboard e vai su Aspetto > Widget. Lì troverai un elenco di tutti i widget disponibili per il tuo sito.

Se hai abilitato WooCommerce, troverai i filtri dei prodotti predefiniti nell'elenco dei widget. Basta fare clic e trascinare il widget del filtro desiderato in una qualsiasi delle aree del widget supportate dal tema. Nel nostro caso, aggiungeremo i filtri dei prodotti alla barra laterale.

Questo è letteralmente tutto ciò che devi fare per aggiungere i filtri dei prodotti WooCommerce predefiniti al tuo negozio.

Filtri prodotto predefiniti

Per impostazione predefinita, esistono tre tipi di filtri del prodotto: prezzo, attributo e valutazione media.

• Filtra per prezzo: aggiunge un dispositivo di scorrimento che puoi utilizzare per filtrare i prodotti in base alla fascia di prezzo
• Filtra per attributi : ti consente di filtrare gli articoli in base ai loro attributi come dimensioni, peso, colore e altro. Nota che dovrai aggiungere un widget separato per ogni attributo
• Filtra per valutazione media: come suggerisce il nome, puoi filtrare i prodotti in base alla loro valutazione media

Poiché i filtri dei prodotti predefiniti di WooCommerce sono preconfigurati, non è necessario configurarli. Basta trascinarli in un'area widget e il gioco è fatto. Tuttavia, le loro opzioni sono piuttosto semplici, quindi non offrono molte opzioni di personalizzazione per modificare caratteri, forme o cursori.

Anche se i filtri dei prodotti WooCommerce predefiniti faranno il lavoro per la maggior parte degli utenti là fuori, c'è un problema. Ogni volta che un cliente seleziona un filtro, l'intera pagina deve essere ricaricata per applicare la modifica. Come puoi immaginare, questo è fastidioso per gli utenti e influisce sulla loro esperienza di acquisto. Ecco perché dovresti aggiungere i filtri dei prodotti AJAX .

Sfortunatamente, WooCommerce non supporta i filtri AJAX per impostazione predefinita, quindi devi fare affidamento su plugin di terze parti.

2. Utilizzo di un plug-in di terze parti

Esistono diversi strumenti che puoi utilizzare per aggiungere filtri prodotto WooCommerce. Per questo tutorial, utilizzeremo i filtri di prodotto AJAX avanzati sviluppati da BeRocket . Questo è uno strumento ricco di funzionalità freemium che garantisce un'esperienza utente fluida.

Il plug-in è specializzato in filtri di prodotti AJAX e offre un'ampia varietà di filtri con uno stile personalizzato per adattarsi all'aspetto del tuo negozio. Consente inoltre filtri individuali e di gruppo e puoi impostare le tue preferenze generali che saranno valide per entrambi i tipi di filtro.

Ora vediamo come puoi aggiungere questo plugin al tuo negozio WooCommerce.

Passaggio 1: installa il plug-in

Per prima cosa, devi installare il plugin. Per questo, vai alla dashboard di amministrazione di WP e vai su Plugin> Aggiungi nuovo.

Cerca i filtri dei prodotti AJAX avanzati di BeRocket. Fare clic sul pulsante Installa per installare il plug-in e quindi attivarlo .

Successivamente, vai su BeRocket > Filtri prodotto dove potrai impostare le tue preferenze per i filtri. Queste non sono impostazioni tecniche ma piuttosto preferenze generali e opzioni di personalizzazione che puoi configurare a tuo piacimento. È possibile selezionare il numero di valori di attributo, nascondere i valori e altro.

Ora che hai installato e configurato il plugin, creiamo il tuo primo filtro.

Passaggio 2: crea un nuovo filtro prodotto

Per creare un filtro di prodotto, vai alla dashboard di amministrazione di WP e vai su BeRocket> Filtri.

Nella pagina delle impostazioni, premere il pulsante Aggiungi filtro .

Apparirà una nuova pagina delle impostazioni e dovrai compilare tutti i dettagli per creare un filtro. Ci sono più sezioni che devi riempire, quindi diamo un'occhiata a loro una per una.

• Titolo: assegna un titolo significativo al filtro, in modo che sia facile da capire, ad esempio dimensioni, colore, valutazione e così via
• Condizioni: puoi impostare le condizioni per visualizzare il filtro su determinate pagine, prodotti o categorie. Puoi aggiungere più condizioni e persino aggiungere condizioni nidificate. Puoi anche nascondere il filtro su alcuni tipi di dispositivi come dispositivi mobili, schede o desktop
• Tipo di widget: qui è necessario selezionare il tipo di filtro che si desidera creare. Sono disponibili quattro tipi tra cui scegliere: filtro, pulsante Aggiorna prodotti, pulsante Ripristina prodotti e Area filtri selezionati
• Attributi e valori: specificare l'attributo per il filtro corrente
• Stile: modella e personalizza il filtro. Avrai più layout tra cui scegliere come casella di controllo, menu a discesa, casella dei colori, dispositivo di scorrimento e altro
• Opzioni richieste: fornisci tutte le opzioni disponibili in questo filtro. Ad esempio, fornisci tutti i colori disponibili per il filtro colore
• Aggiuntivo: questa sezione contiene solo le preferenze. Ci sono diverse opzioni che puoi impostare secondo le tue esigenze

Dopo aver compilato il modulo, fare clic sul pulsante Salva filtro per creare il filtro.

Gestisci i tuoi filtri

Quindi puoi navigare su BeRocket> Filtri per trovare tutti i filtri creati in un unico posto. Da questa pagina puoi modificare, abilitare, disabilitare e persino rimuovere qualsiasi filtro desideri.

Congratulazioni! Ora hai creato il tuo primo filtro prodotto WooCommerce utilizzando un plug-in. Allo stesso modo, puoi creare tutti i filtri di cui hai bisogno per migliorare l'esperienza dei tuoi clienti.

Ma non è così! Per ora hai creato un filtro individuale, ma puoi fare un ulteriore passo avanti e creare gruppi di filtri. Con questo plugin, puoi unire filtri con attributi simili in un gruppo. Ad esempio, le dimensioni, il peso e il colore possono essere combinati per creare un gruppo di filtri chiamato Attributi fisici . I gruppi di filtri sono facili da gestire e mantengono organizzata la barra laterale nel caso in cui tu abbia troppi filtri.

Ora vediamo come aggiungere gruppi di filtri di prodotti in WooCommerce utilizzando i filtri di prodotti AJAX avanzati.

Passaggio 3: crea un gruppo di filtri

Nella dashboard di WordPress, vai su BeRocket > Gruppi e fai clic sul pulsante Aggiungi gruppo di filtri per creare un gruppo di filtri.

Nella pagina delle impostazioni, compila il modulo Aggiungi nuovo gruppo di filtri proprio come hai fatto prima per i singoli filtri. Questo è leggermente diverso, quindi diamo un'occhiata alle opzioni:

• Titolo: nessun segreto qui, basta dare al tuo gruppo di filtri un titolo chiaro e significativo
• Condizioni: impostare le condizioni se si desidera visualizzare il filtro su pagine o categorie specifiche. È possibile aggiungere più condizioni oltre a condizioni nidificate. Puoi anche scegliere di nascondere il filtro da un particolare dispositivo
• Impostazioni gruppo: puoi scegliere quali filtri individuali vuoi aggiungere a questo gruppo. Seleziona il filtro desiderato dal menu a tendina e premi Aggiungi filtro per aggiungerlo al gruppo. Allo stesso modo, puoi aggiungere tutti i filtri che desideri

Al termine, fai clic sul pulsante Salva nell'angolo in alto a destra per salvare il gruppo di filtri.

Ora puoi navigare su BeRocket > Gruppi e dare un'occhiata a tutti i tuoi gruppi di filtri in un unico posto. Puoi anche gestire, modificare o rimuovere gruppi da questa pagina.

Ora che li abbiamo creati, è il momento di visualizzare questi filtri sul front-end del negozio.

Passaggio 4: visualizza i filtri

Nella dashboard di amministrazione di WP, vai su Aspetto> Widget.

Individua i widget AAPF Filters Single e AAPF Filters Group e trascinali nell'area del widget desiderata. Nota che dovrai aggiungere il widget per ciascun filtro separatamente. Seleziona il filtro che desideri aggiungere a questo widget e fai clic su Salva .

Bravo! Ce l'hai fatta. I filtri sono ora visualizzati sul front-end del tuo negozio nell'area widget corrispondente.

Tuttavia, c'è qualcos'altro. questo non è l'unico modo per aggiungere filtri di prodotto al tuo negozio WooCommerce. Se desideri visualizzare i filtri in un'altra area oltre alle aree dei widget, puoi utilizzare gli shortcode.

Passaggio 5: visualizza i filtri al di fuori dell'area dei widget utilizzando gli shortcode

Ogni filtro ha uno shortcode che puoi utilizzare per visualizzarlo ovunque sul tuo sito. Vai su BeRocket > Filtri e troverai gli shortcode per ogni filtro. Copia semplicemente lo shortcode per il filtro che desideri visualizzare.

Successivamente, vai alla pagina/post in cui desideri visualizzare i filtri, fai clic sull'icona + in alto a sinistra e cerca il blocco dello shortcode. Quindi seleziona l' icona del widget shortcode per aggiungere un'area shortcode alla tua pagina/post.

Ora incolla lo shortcode del filtro che hai appena copiato nell'area shortcode e premi Aggiorna/Pubblica nell'angolo in alto a destra per rendere attive le modifiche.

Questo è tutto! I filtri verranno ora visualizzati nella posizione desiderata. Puoi passare al front-end per vedere le modifiche.

Passaggio 6: identificare i problemi con i filtri

Aspetta un po' di più! C'è un'altra piccola caratteristica di questo plugin che ci piacerebbe menzionare. Questo plugin per i filtri dei prodotti WooCommerce ti fornisce uno strumento utile per farti conoscere lo stato dei tuoi filtri attivi. Inoltre, ti dice se ci sono problemi con un particolare filtro e il motivo alla base, così puoi risolverlo e farlo funzionare in pochissimo tempo.

Per utilizzare lo strumento di stato dei filtri attivi, accedi al tuo amministratore WP e vai al front-end in cui vengono visualizzati i filtri. Sulla barra nera in alto, vedrai la scheda Filtri prodotto con l' icona di un razzo. Fare clic su questa scheda e verranno visualizzate tutte le informazioni utili.

Tutto fatto! Congratulazioni! Ora puoi creare, aggiornare e visualizzare con successo i filtri dei prodotti sul tuo negozio WooCommerce e anche fare attenzione a eventuali problemi con i filtri.

Conclusione

Tutto sommato, i filtri dei prodotti WooCommerce sono un must se hai un gran numero di prodotti o una vasta gamma di prodotti. Sono molto convenienti per i clienti in quanto li aiutano a trovare i prodotti che stanno cercando più rapidamente e a migliorare la loro esperienza di acquisto.

In qualità di proprietario di un negozio, la soddisfazione del cliente è della massima importanza e può aiutarti a incrementare le vendite. D'altra parte, se i tuoi acquirenti non riescono a trovare rapidamente ciò che vogliono, probabilmente se ne andranno e non torneranno.

In questo tutorial, abbiamo visto come puoi aggiungere filtri di prodotto al tuo negozio WooCommerce e assicurarti che gli utenti trovino ciò che vogliono.

In sintesi, abbiamo imparato:

• Cosa sono i filtri dei prodotti AJAX?
• Vantaggi dei filtri dei prodotti WooCommerce
• Come aggiungere filtri prodotto WooCommerce
  • Filtri per prodotti WC predefiniti
  • Utilizzo di un plug-in di terze parti

Hai provato ad aggiungere filtri prodotto al tuo negozio? Quale metodo hai utilizzato e come è stata la tua esperienza? Facci sapere nella sezione commenti qui sotto.