Come filtrare i prodotti WooCommerce (Tutorial passo passo)

Dopo aver lavorato con innumerevoli proprietari di siti web WooCommerce, abbiamo imparato che i negozi online di successo condividono una caratteristica fondamentale: rendono facile per i clienti trovare esattamente ciò che desiderano.

Grandi marketplace come Amazon utilizzano filtri per prezzo, colore, taglia e ordinamento per novità perché capiscono come acquistano i clienti.

Il filtraggio dei prodotti è essenziale per la crescita di un'attività di eCommerce. Quando i clienti non riescono a trovare rapidamente ciò che cercano, spesso se ne vanno senza acquistare.

Ecco perché abbiamo creato questa guida passo passo per aiutarti ad aggiungere un filtraggio efficace dei prodotti al tuo negozio WooCommerce.

Imparerai come creare filtri basati sugli attributi che rendono il tuo negozio più facile da navigare e più piacevole per gli acquirenti.

Perché filtrare i prodotti WooCommerce per attributo?

I filtri rendono super facile per i clienti sfogliare i prodotti nel tuo negozio WooCommerce.

Consentono agli acquirenti di restringere la ricerca in base a diversi attributi, tra cui colore, fascia di prezzo, tessuto, taglia e altro ancora.

Invece di scorrere l'intera collezione di prodotti, gli utenti possono semplicemente sfogliare i prodotti che li interessano.

L'aggiunta di filtri può contribuire a migliorare l'esperienza utente, migliorare la funzionalità di ricerca e ridurre i tassi di rimbalzo nel tuo negozio online.

Possono anche aumentare le vendite consentendo ai clienti di vedere tutte le opzioni disponibili per i prodotti che li interessano, aiutandoli a fare acquisti più informati.

Detto questo, vediamo come puoi filtrare facilmente i prodotti sul tuo negozio WooCommerce. Ti mostreremo come filtrare i prodotti WooCommerce per attributo e attributo personalizzato:

Come filtrare i prodotti WooCommerce per attributo

Se stai cercando un modo semplice e veloce per filtrare i prodotti WooCommerce, allora questo metodo fa per te. Ti mostreremo come impostare semplici filtri per attributo utilizzando un plugin per filtri di prodotti WooCommerce.

Innanzitutto, devi installare e attivare il plugin YITH WooCommerce Ajax Product Filter. Per ulteriori istruzioni, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, vai alla pagina YITH » Ajax Product Filter dalla dashboard di WordPress.

Da qui, fai clic sul pulsante '+ Crea un nuovo preset' per iniziare a creare un preset di filtro.

Una volta lì, puoi iniziare digitando un nome per il filtro nella casella 'Nome del preset'.

Tieni presente che il nome del preset non verrà visualizzato nel tuo negozio ed è solo per tuo riferimento.

Successivamente, scegli semplicemente ‘Orizzontale’ come layout predefinito e quindi fai clic sul pulsante ‘+ Aggiungi un nuovo filtro’ in basso.

Se stai utilizzando la versione gratuita del plugin, questa opzione non sarà disponibile per te. Invece, avrai il layout predefinito ‘Predefinito’.

Ora puoi iniziare a creare un filtro per i tuoi prodotti WooCommerce.

Crea un filtro per i prodotti WooCommerce

Per prima cosa, dovrai digitare un nome per il filtro accanto all'opzione ‘Nome filtro’.

Ad esempio, se stai creando un filtro che aiuterà i clienti a ordinare per categorie di prodotti, puoi chiamarlo ‘Filtra per categoria’.

Successivamente, puoi selezionare i parametri per il filtro dal menu a discesa 'Filtra per'.

Per saperne di più sulle differenze tra queste opzioni, puoi leggere la nostra guida su come aggiungere tag, attributi e categorie a WooCommerce.

Se stai creando un filtro per ordinare i prodotti per diverse fasce di prezzo, devi scegliere l'opzione ‘Fascia di prezzo’. Allo stesso modo, se vuoi ordinare i prodotti per popolarità o valutazione media, devi scegliere l'opzione ‘Ordina per’.

Puoi anche scegliere l'opzione 'Tassonomia' se desideri filtrare per tag di prodotto, categorie, colori, taglie, materiali, stili e altro ancora.

Anche se cose come colore e taglia sono attributi, WordPress li memorizza tecnicamente come tassonomie, quindi li troverai sotto questa opzione. Per questo tutorial, useremo l'opzione 'Tassonomia'.

Dopo averlo fatto, devi scegliere tra le opzioni di tassonomia per il filtro. Ad esempio, se vuoi filtrare i prodotti per colore, dovrai scegliere quell'opzione dal menu a discesa.

Poiché stiamo creando un filtro per le categorie di prodotti, selezioneremo l'opzione ‘Categorie di prodotti’.

Successivamente, devi digitare tutte le categorie di prodotti sul tuo sito web nella sezione ‘Scegli termini’.

Dopodiché, puoi scegliere come vuoi che il filtro venga visualizzato sul front-end del tuo negozio dal menu a discesa ‘Tipo di filtro’.

Puoi visualizzare il filtro come casella di controllo, menu a discesa, testo, campioni di colore e altro ancora. Per questo tutorial, sceglieremo l'opzione ‘Seleziona’ per aggiungere un menu a discesa.

Successivamente, attiva l'interruttore ‘Mostra campo di ricerca’ se desideri abilitare una casella di ricerca all'interno del menu a discesa.

Puoi anche visualizzare il filtro che stai creando come un toggle attivando l'interruttore ‘Mostra come toggle’. Quindi, i clienti potranno attivare e disattivare il filtro.

Una volta fatto ciò, scegli un ordine predefinito per i termini filtrati dal menu a discesa ‘Ordina per’. Le categorie del filtro verranno visualizzate nell'ordine scelto.

Puoi ordinare le categorie del filtro utilizzando il nome, il conteggio dei termini o lo slug. Puoi anche scegliere il ‘Tipo di ordinamento’ per i termini filtrati in ordine crescente (ASC) o decrescente (DESC).

Infine, fai clic sul pulsante ‘Salva filtro’ in fondo per salvare il tuo filtro.

Ora, ripeti il processo per creare più filtri.

Una volta fatto ciò, torna in cima e passa alla scheda ‘Impostazioni generali’ per configurare alcune impostazioni.

Configura le impostazioni generali

Qui, devi iniziare scegliendo un'opzione di ‘Modalità filtro’. Puoi selezionare se vuoi applicare i filtri in tempo reale utilizzando AJAX o se vuoi mostrare un pulsante ‘Applica filtri’ sul tuo sito.

Successivamente, devi anche scegliere tra mostrare un pulsante di salvataggio o visualizzare immediatamente i risultati del filtro.

Una volta fatto ciò, scegli se vuoi mostrare i risultati del filtro nella stessa pagina utilizzando AJAX o se vuoi ricaricare i risultati in una nuova pagina.

Successivamente, scorri verso il basso fino all'opzione ‘Nascondi termini vuoti’ e attiva l'interruttore se non vuoi visualizzare termini di filtro che sono vuoti.

Ad esempio, se hai aggiunto una categoria ‘Tazze’ nel tuo negozio WooCommerce, ma attualmente non contiene articoli, non verrà visualizzata nell'elenco ‘Filtra per categoria’.

Dopo di che, procedi e attiva l'interruttore ‘Nascondi prodotti esauriti’ se non vuoi visualizzare prodotti esauriti nei risultati.

Puoi lasciare le altre impostazioni come predefinite o configurarle a tuo piacimento.

Dopo aver fatto le tue scelte, fai clic sul pulsante ‘Salva opzioni’ per memorizzare le modifiche e passare alla scheda ‘Personalizzazione’ in alto.

Configura le Impostazioni di Personalizzazione (Solo Plugin Premium)

Nota: La scheda ‘Personalizzazione’ non sarà disponibile se stai utilizzando la versione gratuita del plugin.

Da qui, puoi scegliere il colore dell'etichetta del tuo filtro WooCommerce, il colore del termine testuale, la dimensione della campitura di colore, il colore dell'area del filtro e altro ancora.

L'aggiunta di colori può rendere il tuo filtro WooCommerce più esteticamente gradevole e abbinarlo al marchio del tuo negozio e-commerce.

Una volta effettuate le tue scelte, fai clic sul pulsante ‘Salva Opzioni’ e passa alla scheda ‘SEO’ dall'alto.

Configura le impostazioni SEO

Una volta lì, attiva l'interruttore ‘Abilita opzione SEO’ per attivare le impostazioni.

Ora puoi aggiungere meta tag dal menu a discesa da utilizzare nelle tue pagine filtrate. Questo migliorerà la SEO del tuo sito.

Per maggiori dettagli, potresti voler leggere il nostro articolo su metadati e meta tag di WordPress.

Puoi anche attivare l'interruttore per aggiungere l'attributo 'nofollow' ai tuoi link di filtro. Questo aggiunge un tag speciale che dice ai motori di ricerca di non seguire quei link specifici.

Consigliamo di attivare questa opzione. Impedisce a Google di perdere tempo a scansionare centinaia di pagine di filtro temporanee in modo che possa concentrarsi sulla classificazione delle tue pagine di prodotto effettive.

Una volta soddisfatto, fai clic sul pulsante ‘Salva opzioni’ per memorizzare le impostazioni.

Aggiungi il filtro WooCommerce alla pagina del negozio

Per aggiungere i filtri che hai appena creato alla tua pagina principale del negozio WooCommerce, devi passare alla scheda 'Preimpostazioni filtro' dall'alto.

Una volta lì, copia semplicemente lo shortcode del preset filtro che hai appena creato.

Successivamente, apri semplicemente la tua pagina del negozio WooCommerce nell'editor a blocchi dalla bacheca di WordPress. Questa è solitamente la pagina intitolata 'Negozio' dove sono elencati tutti i tuoi prodotti.

Una volta lì, fai clic sul pulsante Aggiungi blocco ‘(+)’ nell'angolo in alto a sinistra per trovare il blocco Shortcode.

Ora, incolla semplicemente lo shortcode del preset filtro che hai copiato nel blocco Shortcode.

Infine, fai clic sul pulsante ‘Pubblica’ o ‘Aggiorna’ per salvare le modifiche.

Ora puoi visitare il tuo sito WordPress per vedere il filtro attributi personalizzato di WooCommerce in azione.

Come filtrare per un nuovo attributo globale

Se hai bisogno di filtrare i prodotti per dettagli specifici come 'Materiale' o 'Marca', dovresti usare un attributo globale.

Un attributo globale viene creato nella tua bacheca principale di WordPress e può essere assegnato a molti prodotti diversi. Questo li collega insieme in modo che i clienti possano filtrare per quel termine specifico.

Questo è diverso da un 'attributo prodotto personalizzato' locale che viene creato direttamente all'interno di una singola pagina prodotto e non può essere facilmente utilizzato per il filtraggio.

Crea un attributo globale

Per creare un attributo globale, devi visitare la pagina Prodotti » Attributi dalla bacheca di WordPress.

Una volta lì, inizia inserendo un nome e uno slug per l'attributo della tassonomia personalizzata.

Ad esempio, se si desidera creare un filtro per un materiale specifico del prodotto, è possibile denominare l'attributo 'Filtra per materiale'.

Successivamente, è necessario selezionare la casella 'Abilita archivi' se si desidera visualizzare tutti gli articoli che condividono tale attributo in un'unica pagina. 

Dopodiché, fare clic sul pulsante 'Aggiungi attributo' in basso.

Una volta creato l'attributo, fare clic sul collegamento 'Configura termini' per aggiungere termini all'attributo.

Questo ti indirizzerà a una nuova schermata, dove dovrai digitare un termine nella casella 'Nome'.

Ad esempio, se hai creato un attributo chiamato 'Filtra per materiale', puoi aggiungere i singoli materiali come termini, come la lana. Puoi aggiungere quanti termini desideri a un attributo.

Una volta terminato, fare clic sul pulsante 'Aggiungi nuovo filtro per materiale' per salvare il termine.

Aggiungi l'attributo globale a un prodotto

Dopo aver creato un attributo, dovrai aggiungerlo ai singoli prodotti WooCommerce.

Per fare ciò, apri la pagina del prodotto che desideri modificare. Da qui, scorri verso il basso fino alla sezione 'Dati prodotto' e passa alla scheda 'Attributi'.

Successivamente, fai clic sul menu a discesa. Invece di selezionare 'Attributo prodotto personalizzato', dovresti cercare il nome dell'attributo globale che hai appena creato (ad esempio, 'Filtra per materiale').

Selezionalo dall'elenco e quindi fai clic sul pulsante 'Aggiungi'.

Ora che l'attributo personalizzato è stato aggiunto, cerca semplicemente il termine che corrisponde al prodotto nell'opzione 'Seleziona termini'.

Ad esempio, se hai creato un attributo per il materiale e il prodotto che stai modificando è fatto di lana, dovrai scegliere ‘Lana’ dal menu a discesa.

Una volta terminato, fai clic sul pulsante ‘Salva attributi’.

Successivamente, fai clic sul pulsante ‘Aggiorna’ o ‘Pubblica’ in alto per salvare le modifiche.

Ora dovrai ripetere il processo per tutti i prodotti che condividono lo stesso attributo.

Crea un filtro attributo personalizzato utilizzando un plugin

Successivamente, dovrai installare e attivare il plugin YITH WooCommerce Ajax Product Filter. Per ulteriori istruzioni, consulta la nostra guida su come installare un plugin WordPress.

Nota: Puoi utilizzare la versione gratuita o premium del plugin per creare un filtro attributo personalizzato per WooCommerce.

Dopo l'attivazione, vai alla pagina YITH » Ajax Product Filter dal pannello di controllo di WordPress.

Da qui, fai clic sul pulsante ‘+ Crea un nuovo preset’.

Successivamente, devi digitare un nome per il preset che stai creando nella casella ‘Nome preset’.

Una volta terminato, fai clic sul pulsante ‘+ Aggiungi un nuovo filtro’ in basso per iniziare a creare un filtro attributo personalizzato di WooCommerce.

Innanzitutto, dovrai digitare un nome nella casella ‘Nome filtro’.

Ad esempio, se stai creando un filtro che aiuterà i clienti a ordinare tra diverse opzioni di materiale, puoi chiamarlo ‘Filtro per materiale’.

Successivamente, seleziona semplicemente ‘Tassonomia’ dal menu a discesa ‘Filtra per’. Se stai utilizzando la versione gratuita del plugin, questa opzione sarà selezionata per te per impostazione predefinita.

Ora, l'attributo personalizzato che hai creato sarà già disponibile nel menu a discesa accanto all'opzione ‘Scegli tassonomia’.

Procedi e scegli l'attributo personalizzato dall'elenco a discesa e digita i termini dell'attributo nella casella ‘Scegli termini’.

Successivamente, devi scegliere come desideri che il filtro venga visualizzato sul front-end del tuo negozio dal menu a discesa ‘Tipo di filtro’.

Il filtro può essere visualizzato come una casella di controllo, un menu a discesa, testo, campioni di colore e altro ancora.

Una volta fatto ciò, scegli un ordine predefinito per i termini filtrati dal menu a discesa ‘Ordina per’.

Puoi ordinare le categorie del filtro utilizzando il nome, il conteggio dei termini o lo slug. Puoi anche selezionare il ‘Tipo di ordinamento’ per i termini filtrati in ordine crescente (ASC) o decrescente (DESC).

Infine, fai clic sul pulsante ‘Salva filtro’ in basso per salvare il tuo filtro di attributi personalizzato.

Successivamente, devi passare alla scheda ‘Impostazioni generali’ dall'alto. Da qui, puoi scegliere una modalità di filtro, nascondere i termini vuoti e configurare altre impostazioni in base alle tue esigenze.

Una volta terminato, fai clic sul pulsante ‘Salva opzioni’ per memorizzare le modifiche e passare alla scheda ‘Personalizzazione’ dall'alto.

Nota: Se stai utilizzando la versione gratuita, queste impostazioni di personalizzazione non saranno disponibili.

Da qui, puoi personalizzare l'aspetto del tuo preset di filtro sul front-end del tuo sito web.

Ad esempio, puoi scegliere il colore dello stile dell'etichetta, il colore del testo dei termini, la dimensione dei campioni di colore, il colore dell'area del filtro e altro ancora.

Dopo aver fatto le tue scelte, fai clic sul pulsante ‘Salva opzioni’ e passa alla scheda ‘SEO’ dall'alto.

Da qui, attiva l'interruttore ‘Abilita opzione SEO’ per attivare le impostazioni.

Puoi aggiungere meta tag robots dal menu a discesa da utilizzare nelle tue pagine filtrate. Ciò ottimizzerà la SEO del tuo sito.

Puoi anche attivare l'interruttore 'Aggiungi "nofollow" agli ancoraggi del filtro' per aggiungere automaticamente l'attributo nofollow a tutti gli ancoraggi del filtro.

Una volta soddisfatto, fai clic sul pulsante ‘Salva opzioni’ per memorizzare le impostazioni.

Aggiungi il filtro attributi personalizzato a una pagina prodotti WooCommerce

Per aggiungere il filtro attributi personalizzato a una pagina negozio WooCommerce, dovrai passare alla scheda ‘Preset filtro’ in alto.

Da qui, copia lo shortcode del filtro attributi personalizzato.

Successivamente, apri la tua pagina prodotti nell'editor a blocchi dalla barra laterale di amministrazione di WordPress.

Qui, fai clic sul pulsante Aggiungi blocco ‘(+)’ nell'angolo in alto a sinistra per trascinare e rilasciare il blocco Shortcode.

Dopodiché, incolla semplicemente lo shortcode del preset filtro che hai copiato nel blocco.

Infine, fai clic sul pulsante ‘Pubblica’ o ‘Aggiorna’ per salvare le modifiche.

Ora puoi visitare il tuo sito web per vedere il filtro attributi personalizzato di WooCommerce in azione.

Suggerimenti bonus: assicurati che i tuoi filtri si carichino istantaneamente

Aggiungere filtri è un ottimo modo per migliorare l'esperienza utente, ma devono essere veloci. Se un cliente fa clic su un filtro e deve aspettare un'eternità affinché i prodotti si aggiornino, probabilmente abbandonerà il tuo negozio.

Poiché i filtri dei prodotti si basano su complesse query di database, l'hosting del tuo sito web gioca un ruolo enorme nella velocità con cui funzionano. Ecco alcuni modi per mantenere il tuo negozio in funzione senza intoppi.

Esegui l'aggiornamento a un hosting ad alte prestazioni

Per garantire che i tuoi filtri AJAX si carichino istantaneamente, ti consigliamo di passare a SiteGround.

Sono un provider di hosting consigliato da WooCommerce che offre Ultrafast PHP. Questa tecnologia accelera le query di database richieste per filtrare i prodotti, rendendo il tuo negozio molto più reattivo.

Per maggiori dettagli sul perché le prestazioni sono importanti, consulta il nostro studio di caso su perché siamo passati a SiteGround.

Utilizza la cache avanzata

Si consiglia di impostare una cache avanzata per garantire che il tuo sito si carichi istantaneamente. Questo mantiene una versione pronta dei risultati dei prodotti filtrati, in modo che il tuo server eviti di eseguire costose query al database ogni volta che qualcuno cambia un filtro.

Puoi utilizzare uno dei migliori plugin di caching per WooCommerce per migliorare la velocità. Tuttavia, assicurati di configurare il plugin per escludere le pagine specifiche dei risultati del filtro in modo che i clienti vedano sempre stati di magazzino aggiornati.

Oltre a ciò, puoi anche provare a ottimizzare le immagini dei tuoi prodotti, scegliere un tema WooCommerce a caricamento più rapido, utilizzare l'ultima versione di PHP, attivare un firewall a livello DNS e molto altro per migliorare l'esperienza del cliente.

Per istruzioni dettagliate, consulta la nostra guida per principianti su come velocizzare le prestazioni di WooCommerce.

Domande frequenti sui filtri dei prodotti WooCommerce

Ecco alcune domande che i nostri lettori hanno posto frequentemente sull'aggiunta di filtri prodotto in WooCommerce:

Come si utilizza un filtro prodotto WooCommerce?

Puoi aggiungere filtri di base utilizzando il blocco integrato 'Filtra prodotti per attributo' nell'editor di WordPress. Tuttavia, per un'esperienza professionale in cui la pagina si aggiorna istantaneamente senza ricaricarsi, consigliamo di utilizzare un plugin come YITH WooCommerce Ajax Product Filter.

Come si filtrano i prodotti WooCommerce per attributo personalizzato?

Per filtrare per attributo personalizzato, devi prima creare un attributo globale in Prodotti » Attributi e assegnarlo ai tuoi articoli. Una volta assegnato, puoi utilizzare un widget o un plugin di filtro per consentire ai clienti di ordinare i tuoi prodotti per quel termine specifico (come materiale o marca).

Come si ordinano i prodotti in WooCommerce?

WooCommerce include un menu a discesa di ordinamento predefinito nella pagina Negozio che consente ai clienti di ordinare per prezzo o popolarità. Come proprietario del negozio, puoi modificare l'ordine di ordinamento predefinito andando su Aspetto » Personalizza » WooCommerce » Catalogo prodotti.

Come si categorizzano i prodotti in WooCommerce?

Puoi categorizzare i prodotti navigando su Prodotti » Categorie per creare nuovi gruppi (come Uomo, Donna o Accessori). Quando modifichi un prodotto, seleziona semplicemente la casella della categoria pertinente nella barra laterale destra per assegnarlo.

Come creo una ricerca prodotti in WooCommerce?

Puoi creare una barra di ricerca aggiungendo il widget 'Ricerca Prodotti' all'area della barra laterale o dell'intestazione del tuo sito. Per una ricerca più potente che includa la corrispondenza delle categorie e la correzione degli errori di battitura, ti consigliamo di utilizzare un plugin specializzato come SearchWP.

WooCommerce ha la gestione degli ordini?

Sì, WooCommerce ha un sistema di gestione degli ordini integrato situato sotto WooCommerce » Ordini. Da questa dashboard, puoi visualizzare i dettagli del cliente, aggiornare gli stati di spedizione, elaborare rimborsi e gestire tutti gli ordini in arrivo.

Speriamo che questo articolo ti abbia aiutato a imparare come filtrare i prodotti WooCommerce per attributo e attributo personalizzato. Potresti anche voler consultare il nostro articolo su come offrire uno sconto sulla spedizione in WooCommerce e le nostre migliori scelte per i migliori temi WooCommerce.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.