← TORNA AL BLOG

Come aggiungere filtri AJAX ai prodotti WooCommerce

Un filtro AJAX per WooCommerce aggiorna i prodotti corrispondenti senza ricaricare tutta la pagina. Con HookSpark Product Filters, il cliente può restringere un catalogo dedicato per prezzo e disponibilità, controllare i risultati e azzerare la selezione. Su desktop, modificare un campo avvia l’aggiornamento; nel pannello filtri mobile, il cliente rivede le scelte e le applica insieme.

L’esempio usa un piccolo catalogo di tazze. Il cliente cerca una tazza disponibile con un prezzo compreso tra 20 e 40 nella valuta del negozio. Distingueremo una ricerca valida senza risultati da un intervallo di prezzo non valido e da un aggiornamento non riuscito: richiedono interventi diversi.

Cosa cambia con i filtri AJAX?

AJAX descrive come la pagina richiede e mostra risultati aggiornati. Non crea attributi, non corregge le scorte e non garantisce più vendite. Il plugin recupera la pagina filtrata e sostituisce la sezione del catalogo filtri. Il resto della pagina rimane al suo posto, mentre selezioni, conteggio e schede prodotto rispecchiano la ricerca applicata.

La ricerca Baymard Institute “Filtering UX: Display Applied Filters in an Overview”, consultata il 22 ottobre 2026, sostiene la visibilità delle selezioni attive per comprendere e modificare una lista filtrata. Non è una misura delle vendite ottenute con questo plugin.

La configurazione attuale usa un catalogo dedicato tramite shortcode. Attivare il plugin non significa sostituire automaticamente ogni archivio shop, griglia del tema o widget prodotti di un page builder. Prova la pagina e la griglia che useranno davvero i clienti.

1. Prepara un catalogo facile da controllare

Parti da un sito di prova con WooCommerce e HookSpark Product Filters. L’esempio su prezzo e disponibilità usa i filtri supportati dall’edizione Free e non richiede gli strumenti Pro per landing SEO. Usa prodotti semplici pubblicati e visibili nel catalogo, controllando prima prezzi e disponibilità in WooCommerce.

Per un riferimento semplice, prepara tre tazze disponibili con prezzo 15, 25 e 35, più una tazza esaurita da 30. Usa una sola valuta e la base prezzi mostrata nel catalogo di prova. Impostazioni fiscali, prodotti variabili e strumenti multivaluta richiedono verifiche specifiche prima di estendere l’esempio.

2. Crea e pubblica il catalogo filtri

Crea un set in HookSpark Product Filters, assegnagli un nome riconoscibile e seleziona l’ambito del catalogo da mostrare. Salva e attiva il set. Inserisci lo shortcode generato per quel set in una pagina WordPress e aprila come visitatore. Per la prima prova, usa una pagina separata dallo shop esistente.

Il catalogo pubblicato deve mostrare i campi del prezzo, il selettore di disponibilità e i prodotti corrispondenti. Se risulta indisponibile, controlla che il set sia salvato e attivo e che lo shortcode identifichi quello corretto. Non copiare un ID di esempio da un altro sito.

3. Filtra per prezzo e disponibilità

Imposta prezzo minimo 20 e massimo 40, quindi scegli la disponibilità in magazzino. Su desktop, le modifiche ai campi avviano gli aggiornamenti: aspetta che terminino prima di valutare il risultato. Su uno schermo stretto, apri il pannello filtri, imposta le stesse scelte e applicale con il pulsante dedicato. I valori selezionati restano visibili dopo l’aggiornamento.

Con i quattro prodotti di riferimento, devono comparire le tazze disponibili da 25 e 35. Quella da 15 è sotto l’intervallo; quella da 30 è esaurita. Prezzo e disponibilità devono corrispondere entrambi. Se il risultato è diverso, controlla i dati prodotto e l’ambito del set prima di aggiungere altri filtri.

Campi prezzo da 20 a 40 e un controllo di disponibilità selezionato portano a due tazze corrispondenti da 25 e 35.
Un intervallo da 20 a 40 e la disponibilità restringono l’esempio alle due tazze da 25 e 35. Illustrazione, non screenshot del plugin.

4. Distingui risultati vuoti, dati errati e aggiornamenti falliti

Un intervallo valido da 100 a 120 non trova prodotti nel piccolo catalogo dell’esempio. È un risultato vuoto, non la prova che AJAX sia guasto. Rimuovi un filtro selezionato o azzera i filtri per ampliare la ricerca. Il reset torna all’ambito salvato del catalogo, non necessariamente a tutti i prodotti del negozio.

Un minimo di 40 con un massimo di 20 non è valido. Correggi l’intervallo invertito anziché considerarlo una vera ricerca senza risultati. Se la richiesta di rete fallisce, il plugin conserva i risultati precedenti e permette di riprovare. Quei prodotti non confermano che i nuovi filtri siano stati applicati.

Una griglia vuota, una freccia di reset e un catalogo di tazze ripristinato illustrano il recupero da una ricerca senza risultati.
Un risultato vuoto seguito dal reset ripristina i prodotti del catalogo filtri salvato. Non aggiunge scorte e non modifica i prezzi.

Verifica il percorso del cliente prima di andare online

Ripeti la ricerca 20–40 con prodotti disponibili su desktop e mobile. Controlla conteggio, schede e valori selezionati; azzera i filtri e verifica il ritorno al catalogo iniziale. Prova l’intervallo vuoto, inverti minimo e massimo e correggili. Dopo due ricerche valide diverse, usa Indietro nel browser e controlla che selezione e risultati concordino.

Prova tema, cache e ottimizzazioni finali come visitatore. Senza JavaScript, il modulo può usare la normale navigazione GET, ricaricando la pagina. È un ripiego utile, ma non dimostra che l’aggiornamento AJAX sia attivo. Evita promesse di compatibilità con ogni tema o di maggiore velocità senza misurare il tuo ambiente.

Domande frequenti

I filtri AJAX si applicano subito su ogni dispositivo?

Su desktop, modificare un campo avvia un aggiornamento. Nel pannello mobile, scegli i valori e applicali insieme. La richiesta di rete richiede comunque tempo: AJAX non significa risultati istantanei.

Posso filtrare anche per colore o taglia?

Puoi esporre nel set gli attributi globali WooCommerce supportati. La guida dedicata agli attributi spiega preparazione dei dati e varianti corrispondenti. Gli attributi personalizzati locali del prodotto non equivalgono agli attributi globali.

Il reset elimina la categoria del catalogo?

Azzera le scelte del cliente all’interno del set salvato. L’ambito di categoria configurato per quel set rimane parte del catalogo.

Ogni URL filtrato comparirà su Google?

No. Il comportamento AJAX e l’indicizzazione sono scelte distinte. Non trasformare ogni combinazione di prezzo o disponibilità in una landing indicizzabile. Consulta la guida SEO del plugin prima di attivare pagine dedicate.

La guida Google “Managing crawling of faceted navigation URLs”, consultata il 22 ottobre 2026, segnala che le combinazioni di filtri possono generare molti URL da scansionare. Scegli quali pagine meritano visibilità nella ricerca separatamente dal modo in cui si aggiornano i risultati.

Configura i filtri per attributo · Guida alla configurazione di Product Filters

Parti da un catalogo filtri chiaro, verifica i prodotti attesi e rendi comprensibile il recupero da risultati vuoti o aggiornamenti falliti. Aggiungi altri filtri quando rispondono a un bisogno reale di acquisto.

Scopri HookSpark Product Filters →

Per configurare le categorie, includere le sottocategorie e mantenere il perimetro dopo il ripristino, segui la guida ai filtri WooCommerce per categoria.

Marco Salvo

L’AUTORE

Marco Salvo

Fondatore di HookSpark.

Conosci Marco, fondatore di HookSpark →

Anteprima della schermata