Filter WooCommerce products
Tempo di lettura: 11 minuti

Stai cercando un modo per filtrare i prodotti per attributo nel tuo negozio WooCommerce?

Filtrare i tuoi prodotti WooCommerce per attributo rende più semplice per i clienti individuare l’articolo che desiderano acquistare. Aiuta a far risparmiare tempo ai clienti e rende l’esperienza di acquisto più fluida.

In questo articolo, ti mostreremo come utilizzare il filtro WooCommerce in base alle impostazioni degli attributi nel tuo negozio online.

Perché filtrare i prodotti WooCommerce per attributo?

I filtri rendono semplicissimo 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. Invece di scorrere l’intera collezione di prodotti, gli utenti possono semplicemente sfogliare i prodotti a cui sono interessati.

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

Possono anche aumentare le vendite consentendo ai clienti di vedere tutte le opzioni disponibili per i prodotti a cui sono interessati, aiutandoli a effettuare 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 al caso tuo. Ti mostreremo come impostare un semplice filtro WooCommerce in base alle impostazioni degli attributi.

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 .

Nota: esiste anche una versione gratuita del plugin YITH WooCommerce Ajax Product Filter. Tuttavia, per questo tutorial utilizzeremo la versione premium del plugin.

Dopo l’attivazione, vai alla pagina YITH »Filtro prodotto Ajax dalla barra laterale di amministrazione di WordPress.

Da qui, fai clic sul pulsante “+ Crea una nuova preimpostazione” per iniziare a creare una preimpostazione del filtro.

Fare clic sul pulsante Crea una nuova preimpostazione

Una volta che sei lì, puoi iniziare digitando un nome per il filtro nella casella “Nome preimpostato”.

Tieni presente che il nome preimpostato non verrà visualizzato nel tuo negozio ed è lì solo come riferimento.

Digitare un nome preimpostato

Successivamente, scegli semplicemente “Orizzontale” come layout preimpostato e quindi fai clic sul pulsante “+ Aggiungi un nuovo filtro” in basso.

Se utilizzi la versione gratuita del plugin, questa opzione non sarà disponibile per te. Avrai invece il layout preimpostato “Predefinito”.

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

Scegli il layout preimpostato orizzontale e fai clic sul pulsante Aggiungi nuovo filtro

Crea un filtro per i prodotti WooCommerce

Innanzitutto, 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 le categorie di prodotti, puoi chiamarlo “Filtra per categoria”.

Successivamente, puoi selezionare i parametri per il filtro dal menu a discesa “Filtra per”. Tieni presente che la versione gratuita del plugin offre solo filtri per categorie e tag di prodotto.

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 in base a diverse fasce di prezzo, devi scegliere l’opzione “Fascia di prezzo”. Allo stesso modo, se desideri ordinare i prodotti per popolarità o valutazione media, devi scegliere l’opzione “Ordina per”.

Puoi anche scegliere l’opzione “Tassonomia” se desideri filtrare tag di prodotto, categorie, colori, dimensioni, materiali, stili e altro. Per questo tutorial, utilizzeremo questa opzione.

Digita un nome per il filtro e scegli un'opzione di filtro dal menu a discesa

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

Mentre 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”.

Scegli un'opzione di tassonomia dal menu a discesa e quindi scrivi i termini per le categorie

Successivamente, puoi scegliere come desideri 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. Per questo tutorial, sceglieremo l’opzione “Seleziona” per aggiungere un menu a discesa.

Scegli un tipo di filtro dal menu a discesa

Successivamente, devi attivare l’interruttore “Mostra campo di ricerca” se desideri abilitare una casella di ricerca nel menu a discesa.

Puoi anche visualizzare il filtro che stai creando come interruttore attivando l’interruttore “Mostra come interruttore”. Quindi, i clienti potranno attivare e disattivare il filtro.

Attiva o disattiva l'interruttore per il campo di ricerca

Dopo averlo fatto, scegli semplicemente un ordine predefinito per i termini filtrati dal menu a discesa “Ordina per”. Le categorie di filtro verranno visualizzate nell’ordine scelto.

Puoi ordinare le categorie di filtro utilizzando il nome, il conteggio dei termini o lo slug. Puoi anche scegliere il “Tipo di ordine” per i termini filtrati in ordine ascendente (ASC) o discendente (DESC).

Scegli il tipo di ordine come ascendente o discendente

Infine, fai clic sul pulsante “Salva filtro” in basso per salvare il filtro.

Ora ripeti la procedura per creare più filtri.

Dopo averlo fatto, torna all’inizio e passa alla scheda “Impostazioni generali” per configurare alcune impostazioni.

Configura le Impostazioni generali

Qui devi iniziare scegliendo un’opzione “Modalità filtro”. Puoi selezionare se desideri applicare filtri in tempo reale utilizzando AJAX o se desideri 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.

Scegli una modalità di filtro

Dopo averlo fatto, scegli se vuoi mostrare i risultati del filtro sulla stessa pagina utilizzando AJAX o se vuoi ricaricare i risultati su una nuova pagina.

Successivamente, devi scorrere verso il basso fino all’opzione “Nascondi termini vuoti” e attivare l’interruttore se non desideri visualizzare i termini del filtro vuoti.

Ad esempio, se hai aggiunto una categoria “Tazze” nel tuo negozio WooCommerce, ma al momento non contiene articoli, non verrà visualizzata nell’elenco “Filtra per categoria”.

Successivamente, vai avanti e attiva l’interruttore “Nascondi prodotti esauriti” se non desideri visualizzare i prodotti esauriti nei risultati.

Attiva/disattiva gli interruttori per nascondere termini vuoti o prodotti esauriti

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

Dopo aver effettuato le tue scelte, fai clic sul pulsante “Salva opzioni” per memorizzare le modifiche e passare alla scheda “Personalizzazione” in alto.

Configurare le impostazioni di personalizzazione (solo plugin Premium)

Nota: la scheda “Personalizzazione” non sarà disponibile se utilizzi la versione gratuita del plug-in.

Da qui puoi scegliere il colore dello stile dell’etichetta del filtro WooCommerce, il colore del termine testuale, la dimensione del campione di colore, il colore dell’area del filtro e altro ancora.

L’aggiunta di colori può aiutare il tuo filtro WooCommerce ad apparire esteticamente più gradevole e ad abbinarsi al marchio del tuo negozio online.

Personalizza i colori dei filtri

Una volta effettuate le scelte, fai clic sul pulsante “Salva opzioni” e passa alla scheda “SEO” dall’alto.

Configura le impostazioni SEO

Una volta che sei lì, attiva l’interruttore “Abilita opzione SEO” per attivare le impostazioni.

Ora puoi aggiungere meta tag dal menu a discesa da utilizzare sulle tue pagine filtrate. Ciò migliorerà il SEO del tuo sito .

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

Puoi anche aggiungere automaticamente l’attributo nofollow a tutti gli ancoraggi filtrati attivando l’interruttore “Aggiungi “nofollow” per filtrare gli ancoraggi”. Questo dirà ai motori di ricerca di non utilizzare gli ancoraggi del filtro durante il posizionamento della tua pagina.

Configura le impostazioni SEO per la preimpostazione del filtro

Una volta che sei soddisfatto, fai clic sul pulsante “Salva opzioni” per memorizzare le impostazioni.

Aggiungi il filtro WooCommerce alla pagina dei prodotti

Per aggiungere i filtri che hai appena creato alla pagina dei prodotti WooCommerce, devi passare alla scheda “Preimpostazioni filtro” dall’alto.

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

Copia lo shortcode per la preimpostazione del filtro

Successivamente, apri semplicemente la pagina dei prodotti WooCommerce nell’editor a blocchi dalla barra laterale di amministrazione di WordPress.

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

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

Aggiungi lo shortcode preimpostato del filtro al blocco

Infine, fai clic sul pulsante “Pubblica” o “Aggiorna” per salvare le modifiche.

Ora puoi visitare il tuo sito web per vedere la funzione di filtro per attributo di WooCommerce in azione.

Anteprima del filtro prodotto WooCommerce

Come filtrare i prodotti WooCommerce per attributo personalizzato

Se desideri creare un filtro dei prodotti WooCommerce utilizzando attributi personalizzati, questo metodo fa al caso tuo.

Crea un attributo personalizzato

Per creare un attributo personalizzato, dovrai visitare la pagina Prodotti »Attributi dalla barra laterale di amministrazione di WordPress.

Una volta che sei lì, inizia inserendo un nome e uno slug per l’attributo.

Ad esempio, se desideri creare un filtro per un materiale di prodotto specifico, puoi denominare l’attributo “Filtra per materiale”.

Successivamente, devi selezionare la casella “Abilita archivi” se desideri visualizzare tutti gli elementi che condividono quell’attributo su una singola pagina. 

Crea un attributo

Successivamente, fai clic sul pulsante “Aggiungi attributo” in basso.

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

Fare clic sul collegamento Configura termini per creare termini

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, ad esempio lana. Puoi aggiungere tutti i termini che desideri a un attributo.

Una volta terminato, fai clic sul pulsante “Aggiungi nuovo filtro per materiale” per salvare il termine.

Aggiungi un termine di attributo

Aggiungi l’attributo personalizzato a un prodotto

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

Per questo, dovrai aprire la pagina del prodotto che desideri modificare. Da qui, scorri verso il basso fino alla sezione “Dati prodotto” e passa alla scheda “Attributi”.

Successivamente, apri semplicemente il menu a discesa “Attributo prodotto personalizzato” e seleziona l’attributo personalizzato che hai appena creato.

Ora vai avanti e fai clic sul pulsante “Aggiungi”.

Scegli l'attributo personalizzato che hai creato dal menu a discesa

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”.

Aggiungi un termine di attributo per il prodotto

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

Ora dovrai ripetere la procedura per tutti i prodotti che condividono lo stesso attributo.

Crea un filtro di attributi 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 di attributi personalizzato per WooCommerce.

Dopo l’attivazione, vai alla pagina YITH »Filtro prodotto Ajax  dalla barra laterale di amministrazione di WordPress.

Da qui, vai avanti e fai clic sul pulsante “+ Crea un nuovo preset”.

Fare clic sul pulsante Crea una nuova preimpostazione

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 per gli attributi personalizzati di WooCommerce.

Crea un filtro

Innanzitutto, dovrai digitare un nome nella casella “Nome filtro”.

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

Successivamente, seleziona semplicemente “Tassonomia” dal menu a discesa “Filtra per”. Se utilizzi la versione gratuita del plugin, questa opzione verrà scelta per impostazione predefinita.

Scegli l'opzione tassonomia dal filtro per il menu a discesa

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

Vai avanti e scegli l’attributo personalizzato dall’elenco a discesa e digita i termini dell’attributo nella casella “Scegli termini”.

Scegli il filtro degli attributi personalizzati e aggiungi i suoi 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 casella di controllo, menu a discesa, testo, campioni di colore e altro.

Scegli un tipo di filtro dal menu a discesa

Dopo averlo fatto, scegli un ordine predefinito per i termini filtrati dal menu a discesa “Ordina per”.

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

Scegli il tipo di ordine come ascendente o discendente

Infine, fai clic sul pulsante “Salva filtro” in basso per salvare il filtro degli attributi personalizzati.

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.

Scegli una modalità di filtro

Una volta terminato, fai clic sul pulsante “Salva opzioni” per memorizzare le modifiche e passare alla scheda “Personalizzazione” in alto.

Nota : se utilizzi la versione gratuita, le impostazioni di personalizzazione non saranno disponibili.

Da qui, puoi personalizzare l’aspetto del filtro preimpostato sul front-end del tuo sito web.

Ad esempio, puoi scegliere il colore dello stile dell’etichetta, il colore del termine testuale, la dimensione del campione di colore, il colore dell’area del filtro e altro.

Personalizza i colori dei filtri

Dopo aver effettuato 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 sulle pagine filtrate. Ciò migliorerà il SEO del tuo sito.

Configura le impostazioni SEO per la preimpostazione del filtro

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 che sei soddisfatto, fai clic sul pulsante “Salva opzioni” per memorizzare le impostazioni.

Aggiungi il filtro degli attributi personalizzati a una pagina dei prodotti WooCommerce

Per aggiungere il filtro degli attributi personalizzati a una pagina di prodotti WooCommerce, dovrai passare alla scheda “Preimpostazioni filtro” in alto.

Da qui, copia lo shortcode del filtro degli attributi personalizzati.

Copia lo shortcode per la preimpostazione del filtro

Successivamente, apri la pagina dei tuoi 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 trovare e aggiungere il blocco Shortcode.

Successivamente, incolla semplicemente lo shortcode preimpostato del filtro che hai copiato nel blocco.

Aggiungi lo shortcode preimpostato del filtro al blocco

Infine, fai clic sul pulsante “Pubblica” o “Aggiorna” per salvare le modifiche.

Ora puoi visitare il tuo sito web per vedere il filtro degli attributi personalizzati WooCommerce in azione.

Anteprima per il filtro degli attributi personalizzati

Ci auguriamo che questo articolo ti abbia aiutato a imparare come filtrare i prodotti WooCommerce per attributo e attributo personalizzato. Potresti anche voler vedere il nostro articolo su come aggiungere la ricerca fuzzy al tuo sito web per migliorare i risultati della ricerca e le nostre migliori scelte per i migliori temi WooCommerce .

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

Il post Come filtrare i prodotti WooCommerce (tutorial passo passo) è apparso per la prima volta su WPBeginner .

Collegamento alla fonte

Di Simone Serra

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.