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