Come filtrare i prodotti WooCommerce per attributo

Un cliente cerca una maglietta color prugna, taglia M. Il negozio offre molti modelli, ma aprirli uno per uno per controllare le taglie richiede tempo. I filtri per attributo permettono di trovare i modelli adatti prima di aprire le singole pagine prodotto.

In questa guida usiamo HookSpark Product Filters per creare un catalogo dedicato alle magliette con filtri per Colore e Taglia . Per il catalogo di base bastano l’edizione Free e gli attributi globali di WooCommerce.

Verifica prima se è la soluzione adatta: questo plugin mostra un proprio catalogo tramite uno shortcode inserito in una pagina WordPress. Non aggiunge automaticamente una barra laterale all’archivio Negozio esistente, non filtra un widget Prodotti di Elementor e non sostituisce il blocco Raccolta prodotti di WooCommerce. Se devi mantenere uno di questi layout, valuta prima i blocchi filtro nativi di WooCommerce e i loro requisiti, anziché creare un catalogo separato.

Il catalogo di magliette dell’esempio

In un negozio di prova crea una categoria Magliette con tre prodotti pubblicati. Assegna prezzi e scorte sufficienti alle varianti e rendile acquistabili. Usa gli attributi globali Colore e Taglia, con Prugna e Lavanda come colori e S e M come taglie.

Selezionando Prugna e M deve comparire la Maglietta Everyday. La Maglietta Weekend presenta entrambi i valori tra i suoi attributi, ma non ha una variante Prugna / M. Mostrarla per quella combinazione porterebbe il cliente a un prodotto che non può acquistare nella configurazione richiesta.

1. Prepara gli attributi globali prima di configurare i filtri

1. Apri Prodotti → Attributi in WooCommerce. Crea Colore e Taglia se non esistono già.
2. Usa Configura termini per aggiungere i valori che vendi davvero. Evita nomi diversi come “Medium” e “M” per la stessa taglia, a meno che indichino caratteristiche differenti.
3. Apri ogni prodotto di prova e, nella sezione Attributi, seleziona quelli globali già creati. Assegna i termini appropriati e salva.
4. Per un prodotto variabile, usa questi attributi per le variazioni, crea le combinazioni effettive e imposta prezzo e scorte. Salva il prodotto.

Un attributo personalizzato scritto soltanto dentro un prodotto è diverso da un attributo globale. L’elenco delle sorgenti dei filtri di HookSpark usa gli attributi globali registrati da WooCommerce e non propone quelli personalizzati del singolo prodotto. Vedere “Colore: Prugna” nella pagina prodotto non basta quindi a dimostrare che i dati siano pronti per i filtri.

Non creare una variante Prugna / M mancante solo per far comparire un risultato: il catalogo deve rispecchiare ciò che vendi. Nei prodotti semplici i valori degli attributi descrivono l’articolo, senza creare varianti selezionabili.

2. Crea il gruppo di filtri per le magliette

1. Apri HookSpark → Product Filters e crea un gruppo.
2. Inserisci Magliette in Nome del set. Questo nome diventa anche il titolo del catalogo: scegli un testo adatto ai clienti.
3. In Filtri disponibili, seleziona Colore e Taglia.
4. Imposta Categoria del catalogo a Magliette. Lascia Sottocategorie su Includi le sottocategorie se vuoi includere nel catalogo anche le collezioni figlie.
5. Usa Aggiorna anteprima per controllare la configurazione. Quando sei pronto, seleziona Abilita questo catalogo filtrabile e fai clic su Salva set di filtri.

La categoria stabilisce quali prodotti fanno parte del catalogo. Quando azzeri i filtri torni alle magliette della categoria, non a tutti i prodotti del negozio. Se includi soltanto le assegnazioni dirette alla categoria, i prodotti associati esclusivamente a una sottocategoria non entreranno nel catalogo della categoria principale.

Per categorie principali, sottocategorie e perimetro del ripristino, vedi come filtrare i prodotti WooCommerce per categoria. Appartenenza alla categoria e attributi delle variazioni rispondono a domande diverse.

L’anteprima nell’editor mostra al massimo sei schede, mentre il totale comprende tutti i risultati. Un’anteprima di sei schede non indica quindi che il catalogo sia limitato a sei prodotti.

3. Inserisci il catalogo in una pagina WordPress

Copia lo shortcode generato dal gruppo salvato. Crea una pagina WordPress, aggiungi un blocco Shortcode e incolla il codice. Usa l’ID effettivo del gruppo salvato: il nome leggibile del gruppo non è il suo ID.

Una struttura tipica è [hs_product_filters set="YOUR_SET_ID"]. Sostituisci il segnaposto con il valore copiato dall’editor. Usa un solo catalogo HookSpark nella pagina e pubblicala con la normale procedura di WordPress.

Apri la pagina senza aver effettuato l’accesso. Un gruppo disattivato o inesistente non mostrerà un catalogo funzionante. Inserire lo shortcode non aggiorna il menu del negozio: quando il catalogo è pronto, collegalo dalla collezione pertinente o da una voce di navigazione.

4. Verifica le combinazioni, non soltanto i singoli filtri

I valori dello stesso filtro sono alternativi: Prugna oppure Lavanda. Filtri diversi devono invece corrispondere entrambi: Prugna e M. Nei prodotti variabili una singola variante idonea deve soddisfare l’intera selezione.

Ogni prodotto compare una sola volta, anche quando corrispondono più varianti. La scheda rappresenta la variante corrispondente meno costosa e rimanda alla normale pagina prodotto. Filtrare serve a trovare l’articolo: verifica gli attributi selezionati nella pagina e completa lì l’acquisto. Il filtro non riserva scorte né cambia il prezzo.

Mantieni visibili le selezioni applicate e rendile facili da rimuovere

HookSpark mostra le selezioni applicate sopra i risultati come etichette rimovibili. Rimuovi M per mantenere la scelta del colore oppure azzera i filtri per tornare alla collezione iniziale. Prova anche i comandi Indietro e Avanti del browser, oltre all’azzeramento.

La ricerca del Baymard Institute Display “Applied Filters” in an Overview, di Kathryn Reeves, pubblicata il 6 ottobre 2020 e aggiornata il 13 maggio 2026, segnala che i clienti possono perdere il contesto quando i filtri applicati non sono riepilogati chiaramente. I test sostengono l’utilità di rendere visibili le selezioni e facilitarne la rimozione. Si tratta di prove di usabilità, non di un aumento delle vendite misurato per HookSpark o per questo esempio di magliette.

Su schermi stretti apri Filtra prodotti, modifica le selezioni e usa Applica filtri. Su telefono le scelte restano una bozza finché non le applichi; chiudere o annullare il pannello ripristina la selezione applicata in precedenza. Durante la modifica della bozza il pannello non mostra un’anteprima in tempo reale del numero di risultati.

Per verificare come si aggiornano i risultati, segui il tutorial sui filtri prodotti AJAX WooCommerce. L’esempio con prezzo e disponibilità copre aggiornamenti desktop, applicazione dei filtri su mobile, risultati vuoti e recupero dopo una richiesta non riuscita.

Che cosa controllare quando un prodotto non compare

• L’attributo manca nell’editor: verifica che sia globale e non soltanto un attributo personalizzato del prodotto.
• Una combinazione non dà risultati: controlla le combinazioni delle varianti effettive, non soltanto l’elenco di colori e taglie del prodotto principale. Rimuovi un’etichetta per ampliare la selezione.
• Il prodotto è fuori dal catalogo: controlla l’assegnazione alle categorie e la gestione delle sottocategorie.
• Il prodotto non è acquistabile: verifica pubblicazione, visibilità nel catalogo, prezzi delle varianti e scorte. L’impostazione WooCommerce che nasconde i prodotti esauriti resta valida: un filtro Esaurito non la annulla.
• I risultati cambiano aggiungendo un altro filtro: prezzo e disponibilità devono corrispondere alla stessa variante di Colore e Taglia. Verifica separatamente le integrazioni fiscali e di prezzo del tuo negozio.

Ti servono Pro o pagine SEO dedicate?

Il catalogo con filtri per attributo descritto qui usa Free. L’estensione Pro aggiunge funzioni separate, tra cui la creazione o modifica di collegamenti a pagine SEO dedicate con URL leggibili. Le normali combinazioni di filtri non creano automaticamente pagine da indicizzare su Google. Controlla il confronto aggiornato tra le edizioni e la documentazione di Product Filters prima di pianificare questo ulteriore percorso.

I filtri prodotto non raccolgono istruzioni di personalizzazione. Se il cliente deve inserire un testo per un articolo, consulta la nostra guida al campo per incisioni. Se deve acquistare scatole intere, la guida alle confezioni da sei spiega come gestire le quantità acquistabili. Sono esigenze diverse dal restringere un catalogo.