Filtro prodotti orizzontale sopra i prodotti in WooCommerce: colonne e righe

Un filtro nella barra laterale occupa un terzo della larghezza del negozio e, sui telefoni, spinge i prodotti molto in basso nella pagina. Un filtro prodotti orizzontale sopra i prodotti in WooCommerce dà alla griglia tutta la larghezza e mostra ogni scelta a colpo d'occhio: una barra di menu a tendina, oppure sezioni del filtro su due, tre o quattro colonne. HUSKY non ha una "modalità orizzontale" separata. Il layout dipende da due fattori: quanto è largo il punto in cui viene stampato il filtro e il CSS dei suoi blocchi. Qui sotto trovi i tre modi per mettere il filtro sopra i prodotti, i layout a colonne integrati, il CSS per una riga singola e le soluzioni ai problemi di layout più comuni.

La posizione del filtro determina il suo layout

Ogni sezione del filtro (categorie, colore, taglia, prezzo) è un blocco con la classe woof_container. In un widget della barra laterale i blocchi si impilano perché il widget è stretto. Stampati in un'area larga, gli stessi blocchi possono stare affiancati, e il plugin include classi che li dispongono in colonne. Per avere il filtro sopra i prodotti ci sono tre modi:

Il filtro automatico sopra i prodotti

1. Vai in WooCommerce → Impostazioni → Products Filter → Opzioni (Options) e imposta Imposta il filtro automaticamente (Set filter automatically) su Sì (Yes), oppure su Sì, ma solo per desktop (Yes, but only for desktop) se sui telefoni vuoi un filtro diverso. Salva.
2. Ricarica la pagina e apri la scheda Design. Due opzioni compaiono lì solo dopo aver salvato il primo passaggio: Nascondi il filtro automatico per impostazione predefinita (Hide auto filter by default) e Skin per il filtro automatico (Skins for the auto filter).
3. Imposta Nascondi il filtro automatico per impostazione predefinita (Hide auto filter by default) su No. Con Sì (Yes), il valore predefinito, i visitatori vedono solo un pulsante di apertura/chiusura e il filtro si apre come un pannello sopra i prodotti. È una scelta valida anche questa; il pulsante si personalizza con Immagine di chiusura/apertura del filtro automatico (Auto filter close/open image) e Testo di chiusura/apertura del filtro automatico (Auto filter close/open text). Per un pannello che scorre dal bordo dello schermo, vedi invece il filtro prodotti off-canvas.
4. Scegli una skin: Flat white, Flat grey o Flat dark, con 1, 2, 3 o 4 colonne. Predefinito (Default) è una skin semplice con tre blocchi per riga.
5. Rimuovi il widget HUSKY dalla barra laterale del negozio, così la pagina non mostra due filtri, e imposta il negozio su un layout a larghezza intera nel tema. Per questo le skin a 4 colonne sono indicate come "senza barra laterale": quattro blocchi di almeno 150px non entrano accanto a una barra laterale.

Dietro le quinte il plugin stampa [woof sid="flat_grey woof_auto_3_columns" ...] sull'azione di WooCommerce woocommerce_before_shop_loop con priorità 2, prima degli avvisi, del conteggio dei risultati e del menu a tendina dell'ordinamento. L'uso di questa azione ha due conseguenze:

• Il template del tema o del page builder deve eseguirla. I temi classici e il template di archivio di WooCommerce lo fanno; molti template di archivio dei builder e molte griglie prodotti personalizzate no, e allora non compare nulla. In quel caso usa lo shortcode.
• Quando una combinazione di filtri non trova nulla, il template di archivio di WooCommerce esegue woocommerce_no_products_found invece di woocommerce_before_shop_loop. Dopo il ricaricamento della pagina, il filtro automatico sparisce insieme ai prodotti e il visitatore vede soltanto il messaggio "nessun prodotto", senza modo di cambiare la selezione. In modalità AJAX il modulo resta nella pagina. Lo snippet dello shortcode nella prossima sezione gestisce questo caso.

Un filtro shortcode su colonne

L'attributo sid di [woof] diventa classi CSS del modulo del filtro. sid="flat_grey woof_auto_4_columns" stampa woof_sid_flat_grey, che dà i colori grigi, e woof_auto_4_columns, che dispone i blocchi su quattro colonne. Le classi delle colonne nel foglio di stile del plugin:

Ogni blocco è un inline block con una larghezza minima di 150px, quindi sugli schermi stretti i blocchi si dispongono da soli su meno colonne. La prima parola non deve per forza essere una skin: [woof sid="topbar woof_auto_3_columns"] mantiene l'aspetto neutro del plugin e ti dà la classe woof_sid_topbar per il tuo CSS.

Le colonne hanno bisogno di spazio. Un'area widget è larga quanto la barra laterale, quindi metti lo shortcode in un punto a larghezza intera: un widget Shortcode in una sezione a larghezza intera di Elementor o Divi, una pagina sopra [products] o [woof_products] (vedi il filtro in una pagina personalizzata), oppure il template del negozio. Per stamparlo sopra i prodotti nelle pagine del negozio e degli archivi prodotto senza Imposta il filtro automaticamente (Set filter automatically), collegalo alla stessa azione che usa il plugin:

/*
 * HUSKY: filter in columns above the products on the shop and product archives.
 * Child theme functions.php or a code snippets plugin.
 * Keep "Set filter automatically" = No, otherwise the page shows two filters.
 */
function my_husky_top_filter() {
    if (is_shop() || is_product_taxonomy()) {
        echo do_shortcode('[woof sid="flat_grey woof_auto_4_columns"]');
    }
}
add_action('woocommerce_before_shop_loop', 'my_husky_top_filter', 1);

// WooCommerce skips woocommerce_before_shop_loop when nothing is found:
// keep the filter on the "no products" page too.
add_action('woocommerce_no_products_found', 'my_husky_top_filter', 5);

is_product_taxonomy() copre gli archivi di categorie, tag e attributi. La priorità 1 è importante: con Prova a rendere il negozio AJAX (Try to ajaxify the shop) attiva, il plugin apre l'area che AJAX sostituisce alla priorità 2 della stessa azione, e un filtro stampato dopo quel punto finirebbe al suo interno e sparirebbe dopo il primo filtraggio. Una limitazione: la modalità mobile, che sui telefoni sostituisce il filtro con un pulsante Apri filtro (Open filter), nella versione 3.4.6 non riesce a trovare un modulo il cui sid abbia due parole. Se ti serve la modalità mobile, dai al modulo un sid di una sola parola e costruisci il layout con il CSS della sezione successiva; la guida al filtro mobile spiega i dettagli.

Lo shortcode [woof_front_builder] è l'alternativa senza codice. Costruisce un modulo di filtro direttamente nella pagina, e tra le sue opzioni Layout c'è Larghezza predefinita della sezione del filtro (Default filter section width): 25% dà quattro sezioni per riga, 50% due. Ogni sezione può sovrascriverla con la propria Larghezza della sezione (Section width). La FAQ su come inserire un filtro sopra la griglia dei prodotti mostra come stampare un modulo di questo tipo sopra i prodotti del negozio.

Tutti i filtri su una sola riga

Le colonne vanno bene per gli elenchi di caselle di controllo. Per una barra sottile, porta le sezioni nella scheda Struttura (Structure) su tipi di visualizzazione compatti: Menu a tendina (Drop-down), Menu a tendina multiplo (Multi drop-down), Radio/Checkbox in menu a tendina (Radio/Checkbox in drop-down) (caselle di controllo dentro un pannello a tendina, vedi la pagina dell'estensione) oppure Menu a tendina gerarchico (Hierarchy drop-down) per le categorie. Un menu a tendina mostra il nome del filtro come prima opzione, quindi puoi disattivare i titoli dei blocchi con Mostra l'etichetta del titolo (Show title label) nelle opzioni aggiuntive di ogni sezione (l'icona a ingranaggio) e risparmiare una riga di altezza. Poi lascia che sia flexbox a disporre i blocchi. Per un modulo inserito con [woof sid="topbar"]:

/*
 * HUSKY: filter sections in one row above the products.
 * Advanced → Code → Custom CSS code, or the theme's Additional CSS.
 */
.woof_sid_topbar .woof_redraw_zone {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.woof_sid_topbar .woof_container {
    flex: 1 1 180px;      /* share the row, never narrower than 180px */
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;    /* drop-down panels must not be cut off */
}
.woof_sid_topbar .woof_submit_search_form_container {
    flex: 0 0 auto;       /* Filter and Reset buttons at the end of the row */
    margin: 0;
}
.woof_sid_topbar .chosen-container,
.woof_sid_topbar .select2-container {
    width: 100% !important;
}
@media (max-width: 767px) {
    .woof_sid_topbar .woof_container,
    .woof_sid_topbar .woof_submit_search_form_container {
        flex-basis: 100%;
    }
}

Cinque o sei menu a tendina entrano in una riga di un'area di contenuto di 1200px; se sono di più vanno a capo su una seconda riga invece di essere schiacciati. Il pulsante Filtra (Filter) esiste solo quando Invio automatico (Autosubmit) è disattivato, e Reimposta (Reset) solo dopo che è stato selezionato qualcosa, quindi il blocco dei pulsanti spesso è vuoto e allora non occupa spazio nella riga. Sotto i 768px ogni blocco occupa tutta la larghezza. Per applicare le stesse regole al filtro automatico, sostituisci .woof_sid_topbar con la classe della sua skin, per esempio .woof_sid_flat_grey, oppure .woof_sid_auto_shortcode per la skin Predefinito (Default).

I termini di un filtro su righe o colonne

Una lunga colonna di taglie o di marchi è l'altra metà del problema. Per caselle di controllo e pulsanti di opzione, apri le opzioni aggiuntive della sezione in Struttura (Structure) e imposta Mostra gli elementi su una riga (Display items in a row) su Sì (Yes): gli elementi scorrono affiancati e vanno a capo. Vale per i termini senza sottocategorie; un genitore con figli resta su una riga propria, così le sue sottocategorie possono aprirsi sotto di esso.

Per un numero fisso di colonne, usa una griglia CSS sull'elenco di una sola sezione:

/* Sizes in three equal columns. Replace pa_size with your taxonomy slug. */
.woof .woof_container_pa_size ul.woof_list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 12px;
}

Ogni sezione ha la classe woof_container_ più lo slug della sua tassonomia: woof_container_product_cat, woof_container_pa_color, woof_container_pa_size. Gli elenchi delle sottocategorie hanno una classe propria, quindi la griglia si applica solo al primo livello. Per mantenere breve un elenco lungo, imposta invece Altezza massima del blocco (Max height of the block) nelle stesse opzioni aggiuntive; l'elenco avrà allora una propria barra di scorrimento. Altri selettori sono nella guida a come personalizzare il filtro con il CSS.

Correggere un layout orizzontale rotto

• Trova prima i nomi delle classi. Imposta Avanzate (Advanced) → Opzioni (Options) → Mostra il pulsante di aiuto per i blocchi (Show blocks helper button) su Sì (Yes). Gli amministratori vedono allora un link mostra aiuto blocchi (show blocks helper) sopra ogni filtro che ha un sid; un clic etichetta ogni sezione con la sua classe, come woof_container_pa_color, e stampa la classe del modulo. Disattivalo dopo, come descrive la FAQ sul pulsante di aiuto.
• I blocchi si impilano ancora. Il contenitore è troppo stretto (un'area widget o una colonna stretta del builder), oppure un vecchio CSS personalizzato imposta larghezze o float su .woof_container. Rimuovi i tentativi precedenti prima di aggiungere nuove regole: regole basate su float e su flex mescolate danno risultati imprevedibili.
• Titoli coperti da riquadri bianchi, elenchi tagliati. La skin automatica Predefinito (Default) limita ogni blocco a 250px di altezza con una propria barra di scorrimento, e i temi spesso aggiungono float, sfondi o altezze fisse ai blocchi dentro l'area del contenuto. Reimpostali per il tuo modulo, per esempio .woof_sid_auto_shortcode .woof_container { float: none; max-height: none; overflow: visible; }, oppure passa a una skin Flat.
• Un pannello a tendina si apre dietro i prodotti. Dai al modulo un proprio livello di sovrapposizione: .woof_sid_topbar { position: relative; z-index: 20; }.
• Layout dei builder. In Elementor o Divi, inserisci lo shortcode in un widget o modulo Shortcode dentro una sezione a larghezza intera sopra i prodotti. La griglia stessa deve essere una che il filtro possa controllare; vedi come filtrare le griglie Loop di Elementor.
• Dopo la modifica del CSS non cambia nulla. Svuota la cache di pagina e qualsiasi CSS combinato o ottimizzato, poi prova da disconnesso.

Il CSS usato nel sito demo contiene altri esempi pronti di layout del filtro.

Checklist

• Un solo modulo di filtro per pagina: il widget della barra laterale rimosso, oppure Imposta il filtro automaticamente (Set filter automatically) disattivato quando si usa lo shortcode.
• Nascondi il filtro automatico per impostazione predefinita (Hide auto filter by default) su No se la barra deve essere sempre visibile.
• Il filtro si trova in un contenitore a larghezza intera; per quattro colonne il negozio non ha barra laterale.
• Colonne da una classe woof_auto_N_columns in sid, oppure un sid di una sola parola più CSS quando serve la modalità mobile.
• Tipi di visualizzazione a tendina per una barra su una sola riga; Mostra gli elementi su una riga (Display items in a row) o una griglia per le lunghe liste di caselle di controllo.
• Cache svuotate; pagina controllata da disconnesso su un desktop e su un telefono.

Se il layout continua a rompersi, apri una discussione nel forum di supporto di HUSKY con il link alla pagina e il CSS che hai aggiunto, e lo esamineremo.