Filtro prodotti WooCommerce su una pagina personalizzata o nella home

18 ore fa

Inserisci il filtro prodotti WooCommerce in una pagina personalizzata, in una landing page o nella home, e succede una di queste tre cose: il modulo compare ma non appare nessun prodotto, ogni clic porta al negozio, oppure la pagina si ricarica e non cambia nulla. Non si tratta di un bug. Lo shortcode [woof] stampa soltanto il modulo di ricerca, e il plugin decide dove mostrare i risultati in base a ciò che trova nel resto della pagina. Qui sotto trovi come funziona questa scelta e le configurazioni esatte degli shortcode per i casi più comuni: filtro e prodotti nella stessa pagina, una pagina limitata a una categoria o a un attributo, e un modulo nella home che porta i visitatori ai risultati.

Dove porta i visitatori un filtro prodotti WooCommerce su una pagina personalizzata

Quando il visitatore preme Filtra (Filter) (oppure cambia un'opzione con l'invio automatico attivo), lo script del plugin costruisce un link come ?swoof=1&pa_color=red e cerca nella pagina corrente un elenco di prodotti che possa aggiornare: l'output di [woof_products], uno shortcode [products] di WooCommerce, oppure un qualsiasi elenco .products dentro un contenitore .woocommerce. Se lo trova, i risultati si aprono nella stessa pagina. Se non lo trova, il visitatore viene mandato alla pagina del negozio, cioè quella selezionata in WooCommerce → Impostazioni → Prodotti → Pagina negozio (WooCommerce → Settings → Products → Shop page).

Cosa contiene la pagina	Dove appaiono i risultati
Solo `[woof]`	La pagina del negozio, con i filtri selezionati
`[woof]` + `[woof_products]`	La stessa pagina; senza ricaricamento con `is_ajax=1`
`[woof]` + `[products]` di WooCommerce	La stessa pagina, dopo un ricaricamento
`[woof redirect="..."]` e nessuna griglia prodotti AJAX	L'URL indicato in `redirect`
Una pagina prodotto singolo (i prodotti correlati non contano)	La pagina del negozio, oppure l'URL di `redirect`

Prima di costruire qualsiasi cosa, conviene conoscere due conseguenze. Se in WooCommerce non è impostata nessuna pagina Negozio, non c'è un posto dove mandare il visitatore e il filtro ricarica la pagina in cui si trova, anche una pagina prodotto singolo. Inoltre, se la tua home mostra un blocco di prodotti (prodotti in evidenza, un carosello delle offerte creato con il markup di WooCommerce), il filtro considera quel blocco come la griglia dei risultati e ricarica la home invece di aprire il negozio.

Filtro e prodotti nella stessa pagina

Per una pagina che funziona come un piccolo negozio, inserisci due shortcode. Possono stare in blocchi o colonne diversi, per esempio il modulo in una colonna stretta e i prodotti in quella larga:

[woof]
[woof_products per_page=12 columns=3 is_ajax=1]

per_page: impostalo sempre. Senza questo attributo [woof_products] usa Prodotti per pagina (Products per page) dalla scheda Avanzate → Opzioni (Advanced → Options) del plugin e, se vale -1 (il valore predefinito), l'impostazione di WordPress Le pagine del blog mostrano al massimo (Blog pages show at most), che nella maggior parte dei siti è 10.
columns: prodotti per riga. Se il tema lo rispetta dipende dal CSS del tema.
is_ajax=1: i risultati vengono sostituiti senza ricaricare la pagina e la barra degli indirizzi si aggiorna, così la pagina filtrata si può condividere. Con is_ajax=0 la pagina si ricarica. In una pagina personalizzata è questo attributo ad attivare AJAX; l'opzione Prova a rendere il negozio AJAX (Try to ajaxify the shop) riguarda solo gli archivi del negozio e delle categorie.

[woof_products] mostra i prodotti con la scheda prodotto del tuo tema (il template content-product.php) ed esegue gli hook standard del loop di WooCommerce, quindi il conteggio dei risultati, l'ordinamento e la paginazione appaiono come nella pagina del negozio.

Anche lo shortcode [products] di WooCommerce è filtrabile: quando un filtro è attivo, HUSKY aggiunge le sue condizioni alla query di quello shortcode. [products limit="12" columns="4" paginate="true"] accanto a [woof] funziona con il ricaricamento della pagina; per AJAX usa il gemello registrato da HUSKY, [products_woof], con gli stessi attributi.

Limitare la pagina a una categoria, un tag o un attributo

Una pagina dedicata a un solo marchio, a una sola località o ai soli "smartphone ricondizionati" richiede una condizione permanente che i visitatori non possano rimuovere. È l'attributo taxonomies, e va inserito in entrambi gli shortcode:

[woof taxonomies="product_cat:87+product_tag:105" tax_exclude="product_cat,product_tag"]
[woof_products taxonomies="product_cat:87+product_tag:105" per_page=12 columns=3 is_ajax=1]

La sintassi è taxonomy:ID. Più ID della stessa tassonomia si separano con virgole; tassonomie diverse si uniscono con + e devono corrispondere tutte. Con la logica OR predefinita, product_cat:87,92+pa_brand:14 significa "nella categoria 87 o 92, e marchio 14", e i prodotti delle categorie figlie di 87 e 92 sono inclusi. Se nelle impostazioni del plugin hai portato una tassonomia alla logica AND, quella logica vale anche per i suoi ID in questo punto.

ID dei termini, non slug né nomi

Il plugin converte ogni valore in un termine con l'ID indicato. Uno slug come cadeau o un nome come Yes non è un ID, non corrisponde a nulla e quella parte della condizione viene scartata senza alcun errore, quindi la pagina mostra tutti i prodotti. Per trovare un ID, apri Prodotti → Categorie (Products → Categories) (oppure Tag (Tags), oppure Prodotti → Attributi → Configura termini (Products → Attributes → Configure terms)), passa il mouse sul link Modifica (Edit) del termine e leggi il numero dopo tag_ID= nel link.

Il nome della tassonomia deve essere esatto: product_cat, product_tag, pa_ seguito dallo slug dell'attributo per gli attributi globali (pa_color, non color), oppure lo slug di una tassonomia personalizzata, come una tassonomia dei marchi. Gli attributi personalizzati scritti direttamente in un singolo prodotto non sono tassonomie e qui non si possono usare.

Cosa fa ciascuno shortcode con il valore

In [woof_products] limita i prodotti. È la parte che fa il lavoro vero.
In [woof] limita ciò che il modulo conta: con Mostra conteggio (Show count) e Riconteggio dinamico (Dynamic recount) attivi, i numeri accanto alle opzioni e l'intervallo di prezzo descrivono lo stesso insieme limitato, e con Nascondi termini vuoti (Hide empty terms) le opzioni senza prodotti in questa pagina scompaiono. In modalità AJAX il modulo viene ridisegnato dopo ogni filtraggio con il valore di [woof_products], quindi mantieni i due valori identici, altrimenti i conteggi cambiano dopo il primo clic.

La condizione non è nell'URL: fa parte della pagina. Il reset, o la deselezione di tutto, riporta alla pagina e la condizione resta al suo posto. Nascondi i blocchi che hai già prefiltrato con tax_exclude (nomi di tassonomie, separati da virgole), oppure costruisci un modulo breve con tax_only e by_only, per esempio [woof tax_only="pa_brand,pa_size" by_only="by_price"]; by_only="none" nasconde il prezzo, la ricerca testuale e gli altri filtri che non sono tassonomie. Altre combinazioni si trovano in come mostrare filtri diversi in pagine diverse e l'elenco completo degli attributi nella pagina dello shortcode [woof]. Per prefiltrare in base a un campo meta invece che a una tassonomia, vedi come manipolare i dati di ricerca.

Un filtro nella home che reindirizza al negozio

La configurazione più affidabile per la home è un modulo di ricerca che manda i visitatori a una pagina dei risultati:

[woof redirect="https://example.com/shop/" autosubmit=1 ajax_redraw=1 tax_only="product_cat,pa_size" by_only="none"]

redirect: la pagina dei risultati. Può essere il negozio, l'archivio di una categoria come https://example.com/product-category/tires/ (i risultati restano allora dentro quella categoria, perché la categoria è nell'indirizzo), oppure una pagina personalizzata con [woof] e [woof_products]. Usa un URL pulito, senza ?: il plugin vi aggiunge ?swoof=1&....
autosubmit=1 da solo manda il visitatore altrove alla prima modifica, cosa adatta a un singolo menu a tendina. Per un modulo con più campi, aggiungi ajax_redraw=1: ogni scelta aggiorna soltanto il modulo (conteggi, opzioni dipendenti) e il pulsante Filtra (Filter) apre la pagina dei risultati. Con autosubmit=0 non succede nulla finché il visitatore non preme Filtra (Filter).

Le regole che causano la maggior parte delle segnalazioni "il reindirizzamento non funziona":

Il reindirizzamento viene ignorato in modalità AJAX. Se la stessa pagina contiene anche [woof_products is_ajax=1] o [products_woof], il modulo filtra quella griglia.
Una pagina, un filtro. Quando una pagina contiene più moduli, lo script prende redirect, autosubmit e ajax_redraw dal primo modulo che trova. Un secondo modulo nella barra laterale, o un filtro automatico sopra i prodotti, può sovrascrivere in silenzio il modulo che hai configurato. Il widget di HUSKY ha un proprio campo Reindirizza a (Redirect to) per lo stesso scopo.
Una condizione taxonomies nel modulo della home non viaggia con il reindirizzamento: nell'URL finisce solo ciò che il visitatore ha selezionato. Se il modulo riguarda una sola categoria, reindirizza all'archivio di quella categoria.

Perché non filtrare direttamente nella pagina iniziale statica

Filtrare sul posto funziona nelle pagine normali. La pagina iniziale statica fa eccezione: parametri come product_cat o product_tag sono anche variabili di query di WordPress e, quando compaiono nell'indirizzo radice del sito, WordPress smette di trattare la richiesta come la tua pagina iniziale. A seconda del tema, i visitatori vedono allora l'archivio di una categoria, una pagina vuota, oppure un titolo Pagina non trovata (Page not found) aggiunto dal plugin SEO. Metti il filtro e [woof_products] in una pagina normale (per esempio /products/) e fai in modo che il modulo della home reindirizzi lì.

Mostrare i prodotti solo dopo che il visitatore ha filtrato

Per una landing page che deve aprirsi con il solo modulo, aggiungi display_on_search=1 a [woof_products]. Finché non viene applicato un filtro, l'area dei prodotti resta vuota; dopo la prima ricerca la pagina mostra i risultati. La documentazione descrive questo attributo per la modalità con ricaricamento, quindi usalo con is_ajax=0. Dettagli nella pagina dello shortcode [woof_products].

Pagine prodotto singolo, menu e griglie dei page builder

Pagine prodotto singolo. Un filtro nella barra laterale della pagina prodotto apre sempre il negozio (o l'URL di redirect); i prodotti correlati e gli upsell non vengono considerati risultati.
Menu e mega menu. Collega le voci di categoria ai veri archivi delle categorie (/product-category/.../), non a pagine che contengono uno shortcode. Gli archivi sono filtrabili senza alcuna configurazione e mantengono la categoria durante il filtraggio.
Griglie prodotti dei builder. Una griglia di Elementor, Divi o di un altro builder che esegue una propria query sui prodotti non reagisce al filtro, anche se il modulo resta nella pagina. Sostituiscila con [woof_products], oppure rendi filtrabile la sua query come descritto in l'URL del filtro cambia ma i prodotti no.
[woof_products] nei template delle categorie. Lo shortcode non sa su quale archivio di categoria si trova: è pensato per le pagine. In un template di categoria mostra tutti i prodotti, a meno che tu non passi taxonomies, quindi lascia lì il loop prodotti standard dell'archivio.

Se ancora non funziona

Le virgolette sono dritte. Gli shortcode copiati da un elaboratore di testi o da alcune pagine web arrivano con le virgolette curve (’pa_age’), che WordPress non accetta come virgolette degli attributi. Riscrivile in un blocco Shortcode.
Ogni valore in taxonomies è un ID numerico di termine, il nome della tassonomia è esatto, non ci sono spazi attorno a + o : e i due shortcode hanno lo stesso valore.
[woof_products] ha per_page, così la pagina non si ferma a 10 prodotti.
Nelle impostazioni di WooCommerce è selezionata una pagina Negozio.
Nella pagina c'è un solo modulo di filtro, oppure il primo contiene il redirect che vuoi.
La griglia prodotti nella pagina è [woof_products], [products] o [products_woof], non un widget del builder con una query propria.

Se tutto questo è a posto e la pagina continua a comportarsi male, pubblica nel forum di supporto di HUSKY il link alla pagina e i due shortcode esattamente come sono nell'editor.