Filtro prodotti off-canvas per WooCommerce: pannello Slideout e soluzioni

4 November 2026

Un filtro prodotti off-canvas per WooCommerce tiene pulita la pagina del negozio: il filtro attende in un pannello al bordo dello schermo e scorre in vista quando il visitatore tocca una linguetta o un pulsante Filtro (Filter). HUSKY lo include come estensione Slideout, quindi non servono né un drawer del tema né un plugin per popup. Questa guida spiega come funziona il pannello, come limitarlo alle pagine del negozio e delle categorie, come aprirlo da un tuo pulsante e chiuderlo dopo il filtraggio, e come risolvere un pannello che non scorre, si nasconde dietro l'intestazione o non compare affatto.

Pannello Slideout, modalità mobile o drawer del tema

HUSKY offre tre modi per tenere il filtro fuori vista finché non serve. Scegline uno per pagina: combinarli dà due filtri oppure un pulsante che non può aprire nulla.

Slideout (Avanzate (Advanced) → Slideout, oppure lo shortcode [woof_slideout]): un pannello fissato al bordo sinistro, destro, superiore o inferiore della finestra, con una linguetta che lo apre. Funziona su computer e telefoni. È l'argomento di questa guida.
Modalità mobile: solo sui telefoni, il filtro viene sostituito da un pulsante Apri filtro (Open filter) che lo apre come pannello a schermo intero. Vedi la guida al filtro mobile.
Il filtro automatico con Nascondi il filtro automatico per impostazione predefinita (Hide auto filter by default) = Sì: un pulsante sopra i prodotti che fa scendere il filtro sulla griglia. Vedi il filtro orizzontale sopra i prodotti.

Funziona anche un drawer o una barra laterale off-canvas del tema o di un page builder, a patto che si limiti a mostrare e nascondere HTML del filtro già presente nella pagina al momento del caricamento. Se il drawer inserisce il suo contenuto più tardi, il modulo non viene mai inizializzato e i clic non fanno nulla; la guida a Elementor mostra come riconoscere questo caso. Tali drawer hanno inoltre bisogno di un proprio codice per chiudersi dopo il filtraggio AJAX, descritto in filtri diversi per mobile e desktop.

Attivare il pannello a scorrimento

Slideout è un'estensione integrata e sempre attiva. Le sue impostazioni si trovano in WooCommerce → Impostazioni → Products Filter → Avanzate (Advanced) → Slideout:

Visibilità globale (Global visibility): Mostra (Show) aggiunge automaticamente il pannello alle pagine di WooCommerce.
Pulsante come (Button as): come immagine (as Image) usa Immagine Slideout (Slideout image) nella dimensione impostata da Dimensione immagine del pulsante (Button image size); come testo (as Text) mostra il Testo Slideout (Slideout text) sulla linguetta.
Posizione (Position): il bordo da cui scorre il pannello. Scostamento (Offset) è la sua distanza dal bordo superiore della finestra (posizioni a sinistra e a destra) o da quello sinistro (posizioni in alto e in basso).
Azione (Action): Clic (Click) oppure Passaggio del mouse (Hover). I telefoni non hanno l'hover, quindi usa Clic (Click) se il pannello è pensato anche per loro.
Dimensione del contenitore (Container size): larghezza e altezza del pannello. Con Visibilità globale (Global visibility) attiva e nessuna larghezza impostata, il pannello è largo 350px.
Stato dopo l'inizializzazione (State after init): No mantiene il pannello chiuso quando la pagina si carica.
Comportamento su mobile (Mobile behavior): Mostra su tutti i dispositivi (Show on all devices), Mostra solo su mobile (Show only on mobile) oppure Mostra solo su desktop (Show only on desktop).

Con Visibilità globale (Global visibility) attiva, il plugin stampa [woof_slideout ...][woof][/woof_slideout] nel footer della pagina: un normale modulo di filtro dentro un pannello con position: fixed, parcheggiato fuori dalla finestra. Un clic sulla linguetta lo fa scorrere in vista, e un clic in qualsiasi punto fuori dal pannello lo fa rientrare; dentro non c'è alcun pulsante di chiusura. Poiché il modulo fa parte della pagina fin dall'inizio, ogni tipo di filtro funziona come in una barra laterale, modalità AJAX compresa.

Due dettagli nella versione 3.4.6. Primo, le "pagine del negozio" nell'opzione sono tutte le pagine in cui is_woocommerce() di WooCommerce è vero, e tra queste ci sono anche le pagine prodotto singolo. Secondo, il pannello globale scrive il testo della linguetta nello shortcode senza virgolette, quindi un testo di più parole viene tagliato al primo spazio: "Mostra filtri" diventa "Mostra". Usa lì un testo di una sola parola, oppure lo shortcode qui sotto, dove puoi metterlo tra virgolette. Il Comportamento su mobile (Mobile behavior) viene deciso dal server in base all'identificazione del browser, quindi una cache di pagina deve conservare copie separate per telefoni e computer, come spiegato nella guida mobile.

Mostrare il pannello solo dove serve

Per controllare le pagine, imposta Visibilità globale (Global visibility) su Nascondi (Hide) e inserisci tu lo shortcode. Il pulsante Genera shortcode (Generate shortcode) in fondo alla scheda Slideout ne scrive uno a partire dalle opzioni correnti; poi ricarica la pagina invece di salvare, se quei valori non devono diventare quelli globali, e metti tra virgolette i valori con spazi. Uno shortcode tipico:

[woof_slideout location="left" image="null" text="Filters" width="320px" onloadslideout="false"]

image="null" trasforma la linguetta in una linguetta di testo. Senza contenuto, lo shortcode costruisce da solo il [woof] interno e gli passa ogni attributo che non sia un'impostazione di slideout: tax_only, by_only, sid, btn_position, redirect e gli altri attributi di [woof]. Con un contenuto tra [woof_slideout] e [/woof_slideout], viene mostrato quel contenuto, quindi sono possibili un titolo e un modulo personalizzato: [woof_slideout text="Filters" image="null"]<h3>Filter products</h3>[woof btn_position="t"][/woof_slideout]. In questa forma gli attributi di [woof] vanno sullo shortcode interno.

Lo shortcode può stare nel contenuto della pagina o in un'area widget del footer, ma non in una barra laterale che il tema nasconde sui telefoni: il pannello si trova dentro quella barra laterale e sparisce con essa. Per mostrare il pannello solo nelle pagine del negozio e negli archivi prodotto, stampalo dal tema:

/*
 * HUSKY: slide-out filter on the shop and product archive pages,
 * not on single products. Set Advanced → Slideout → Global visibility = Hide.
 * Child theme functions.php or a code snippets plugin.
 */
add_action('wp_footer', function () {
    if (!is_shop() && !is_product_taxonomy()) {
        return;
    }
    echo do_shortcode('[woof_slideout location="left" image="null" text="Filters" width="320px" onloadslideout="false"]');
}, 5);

Mantieni la priorità sotto 10. L'estensione scrive gli stili di larghezza e altezza del pannello nel proprio callback del footer con priorità 10, usando l'ultimo pannello stampato prima della sua esecuzione; un pannello stampato dopo non riceve alcuna dimensione. Per un filtro diverso per ogni categoria, verifica is_product_category('shoes') e dai a ogni pannello il proprio tax_only="pa_size,pa_color". Per offrire il pannello anche nelle pagine del blog o nella home, aggiungi redirect="https://example.com/shop/", così i risultati si aprono nella pagina del negozio.

Usa un solo pannello per pagina. Lo script di slideout prepara soltanto il primo pannello che trova; un secondo, per esempio il pannello globale più un pannello da shortcode, mantiene lo stile di avvio che lo parcheggia fuori dalla finestra, quindi la sua linguetta manca o è fuori posto.

Aprirlo da un tuo pulsante e chiuderlo dopo il filtraggio

Il pannello reagisce a tre eventi: open, close e toggle. Per un pulsante personalizzato conta un dettaglio: il pannello si chiude a qualsiasi clic fuori da sé, e un pulsante nell'intestazione è fuori. Se l'evento di clic prosegue fino al documento, il pannello si apre e si richiude nello stesso istante. Il gestore qui sotto lo impedisce e chiude anche il pannello dopo ogni filtraggio AJAX, usando l'evento woof_ajax_done del plugin:

/*
 * HUSKY slide-out panel: custom open/close buttons, close after AJAX filtering.
 * Child theme functions.php or a code snippets plugin.
 * Buttons: <a href="#" class="open-husky-filter">Filter</a>
 *          <a href="#" class="close-husky-filter">Close</a> (inside the panel)
 */
add_action('wp_footer', function () {
    ?>
    <script>
    jQuery(function ($) {
        $(document.body).on('click', '.open-husky-filter', function (e) {
            e.preventDefault();   // a link with href="#" would jump to the top
            e.stopPropagation();  // otherwise the outside-click rule closes it at once
            $('.woof-slide-out-div').trigger('toggle');
        });
        $(document.body).on('click', '.close-husky-filter', function (e) {
            e.preventDefault();
            $('.woof-slide-out-div').trigger('close');
        });
        $(document).on('woof_ajax_done', function () {
            $('.woof-slide-out-div').trigger('close');
        });
    });
    </script>
    <?php
}, 100);

Per usare solo il tuo pulsante, nascondi la linguetta con .woof-slide-out-div .woof-handle { display: none; }. Inserisci il link di chiusura nel pannello tramite il contenuto dello shortcode, prima di [woof].

Chiudere dopo il filtraggio va bene con un pulsante Filtro (Filter). Con Invio automatico (Autosubmit) attivo ogni clic filtra, e il pannello si chiuderebbe dopo ogni scelta; imposta Invio automatico (Autosubmit) su No nella scheda Opzioni (Options), così i visitatori fanno tutte le loro scelte e il pannello si chiude una sola volta. Senza AJAX la pagina si ricarica dopo il filtraggio e il pannello parte chiuso, purché Stato dopo l'inizializzazione (State after init) sia No. Finché le impostazioni del plugin non vengono salvate per la prima volta, uno shortcode senza onloadslideout si apre a ogni caricamento di pagina; gli esempi impostano onloadslideout="false" per essere indipendenti da questo.

Linguetta, colori, dimensioni e scorrimento

Lo script del pannello imposta alcuni valori direttamente inline, quindi certe regole richiedono !important, e il suo foglio di stile viene caricato nel footer, dopo la maggior parte degli altri, quindi alcuni selettori iniziano con body:

/* HUSKY slide-out panel. Advanced → Code → Custom CSS code,
   or the theme's Additional CSS. */

/* Tab colours; an image tab gets its background inline */
.woof-slide-out-div .woof-handle {
    background-color: #f5c200 !important;
    color: #000;
}

/* Left or right position: move only the tab down, not the panel */
.woof-slide-out-div .woof-handle {
    top: 40px !important;
}

/* No transparency, above sticky headers and cookie bars */
body .woof-slide-out-div {
    opacity: 1 !important;
    z-index: 100000;
}

/* Scroll inside the panel when the filter is longer than the screen */
.woof-slide-out-div .woof-slide-content {
    max-height: calc(100vh - 140px); /* 100px offset + room at the bottom */
    overflow-y: auto;
}

/* Dim the page while the panel is open; a click on the dark area closes it */
.woof-slide-out-div.ui-slideouttab-open {
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
}

Perché serve la regola di scorrimento: quando la pagina si carica, lo script riduce il pannello per adattarlo allo schermo se è troppo alto o troppo largo, ma lo fa una sola volta. Le sezioni che si aprono dopo, un elenco "mostra altro" o un telefono ruotato rendono il contenuto più alto della finestra, e la parte bassa diventa irraggiungibile. Un max-height con overflow-y: auto mantiene una barra di scorrimento in ogni stato. Imposta il valore sottratto uguale al tuo Scostamento (Offset) più un po' di margine.

Per impostazione predefinita il pannello è opaco al 95%, e per questo sui telefoni i prodotti si intravedono attraverso di esso. Il suo livello di sovrapposizione è 9999; un'intestazione fissa, un overlay del tema o un banner dei cookie con un valore più alto lo copre o intercetta i suoi clic, e il risultato sembra un filtro su cui non si può cliccare. Se alzare il pannello non basta, ispeziona l'elemento che sta sopra e abbassa il suo z-index.

Quando il pannello non funziona

La linguetta manca sui telefoni. Lo shortcode si trova in una barra laterale che il tema nasconde sugli schermi piccoli, Comportamento su mobile (Mobile behavior) esclude i telefoni, oppure una cache di pagina serve la copia per desktop.
Il pannello compare nelle pagine prodotto o ovunque. Visibilità globale (Global visibility) è su Mostra (Show); portala su Nascondi (Hide) e usa lo snippet del footer.
Si apre a ogni caricamento di pagina. Imposta Stato dopo l'inizializzazione (State after init) su No e aggiungi onloadslideout="false" ai tuoi shortcode.
Compare o funziona solo una di due linguette. Nella pagina ci sono due pannelli; tienine uno.
La linguetta compare in ritardo o non fa nulla. L'ottimizzazione di JavaScript ritarda o combina gli script del plugin. Escludi /wp-content/plugins/woocommerce-products-filter/ da ritardo e combinazione, come descritto in la guida ai plugin di ottimizzazione, e svuota tutte le cache.
Il filtraggio parte dal pannello ma i prodotti non cambiano. Il problema è la griglia prodotti, non il pannello; valgono le stesse cause di un filtro in una barra laterale, vedi l'URL cambia ma i prodotti restano gli stessi.

Checklist

Un solo modo di nascondere il filtro per pagina: Slideout, modalità mobile, il pulsante del filtro automatico o un drawer del tema.
Un solo pannello per pagina; Visibilità globale (Global visibility) su Nascondi (Hide) quando inserisci tu lo shortcode.
Lo shortcode fuori dalle barre laterali che il tema nasconde sui telefoni, oppure stampato da wp_footer con priorità inferiore a 10.
Linguetta di testo con virgolette: image="null" text="Show filters"; onloadslideout="false".
I pulsanti personalizzati impediscono al clic di raggiungere il documento; il pannello si chiude su woof_ajax_done.
Contenuto del pannello limitato con max-height e scorrevole; z-index sopra l'intestazione.

Se il pannello continua a comportarsi male, apri una discussione nel forum di supporto di HUSKY con il link alla pagina e lo shortcode o le impostazioni che usi, e lo controlleremo.