Filtro de productos off-canvas para WooCommerce: panel deslizante

4 November 2026

Un filtro de productos off-canvas para WooCommerce mantiene limpia la página de la tienda: el filtro espera en un panel en el borde de la pantalla y se desliza hacia dentro cuando el visitante toca una pestaña o un botón Filtro (Filter). HUSKY lo incluye de serie como la extensión Slideout, así que no hace falta ningún cajón del tema ni un plugin de ventanas emergentes. Esta guía explica cómo funciona el panel, cómo limitarlo a las páginas de tienda y de categoría, cómo abrirlo desde tu propio botón y cerrarlo después de filtrar, y cómo arreglar un panel que no se desplaza, queda oculto detrás de la cabecera o no aparece en absoluto.

Panel deslizante, modo móvil o cajón del tema

HUSKY ofrece tres formas de mantener el filtro fuera de la vista hasta que se necesite. Elige una por página; combinarlas da dos filtros o un botón que no puede abrir nada.

Slideout (Avanzadas (Advanced) → Slideout, o el shortcode [woof_slideout]): un panel fijado al borde izquierdo, derecho, superior o inferior de la ventana, con una pestaña que lo abre. Funciona en ordenadores y teléfonos. Este es el tema de esta guía.
Modo móvil: solo en teléfonos, el filtro se sustituye por un botón Abrir filtro (Open filter) que lo abre como un panel a pantalla completa. Consulta la guía del filtro móvil.
El filtro automático con Ocultar auto filtro por defecto (Hide auto filter by default) = Sí: un botón sobre los productos que despliega el filtro encima de la cuadrícula. Consulta el filtro horizontal sobre los productos.

Un cajón o una barra lateral off-canvas del tema o de un constructor de páginas también sirve, siempre que solo muestre y oculte HTML del filtro que ya está en la página al cargarse. Si el cajón inserta su contenido más tarde, el formulario nunca se inicializa y los clics no hacen nada; la guía de Elementor muestra cómo reconocer ese caso. Esos cajones necesitan además su propio código para cerrarse después del filtrado con AJAX, descrito en filtros diferentes para móvil y escritorio.

Activar el panel deslizante

Slideout es una extensión integrada y está siempre activa. Sus ajustes están en WooCommerce → Ajustes → Filtro de productos → Avanzadas (Advanced) → Slideout:

Visibilidad global (Global visibility): Mostrar (Show) añade el panel a las páginas de WooCommerce automáticamente.
Botón como (Button as): como imagen (as Image) usa la Imagen de Slideout (Slideout image) con el tamaño definido por Tamaño de la imagen del botón (Button image size); como texto (as Text) muestra el Texto de Slideout (Slideout text) en la pestaña.
Posición (Position): el borde desde el que se desliza el panel. Desplazamiento (Offset) es su distancia a la parte superior de la ventana (posiciones izquierda y derecha) o a la izquierda (posiciones superior e inferior).
Acción (Action): Clic (Click) o Hover. Los teléfonos no tienen hover, así que usa Clic (Click) cuando el panel esté pensado para ellos.
Tamaño del contenedor (Container size): ancho y alto del panel. Con Visibilidad global (Global visibility) activada y sin ancho definido, el panel mide 350 px de ancho.
Estado tras la inicialización (State after init): No mantiene el panel cerrado al cargar la página.
Comportamiento en móviles (Mobile behavior): Mostrar en todos los dispositivos (Show on all devices), Mostrar solo en móviles (Show only on mobile) o Mostrar solo en escritorio (Show only on desktop).

Con Visibilidad global (Global visibility) activada, el plugin imprime [woof_slideout ...][woof][/woof_slideout] en el pie de la página: un formulario de filtro normal dentro de un panel con position: fixed, aparcado fuera de la ventana. Un clic en la pestaña lo desliza hacia dentro, y un clic en cualquier punto fuera del panel lo devuelve; no hay botón de cierre dentro. Como el formulario forma parte de la página desde el principio, todos los tipos de filtro funcionan igual que en una barra lateral, incluido el modo AJAX.

Dos detalles de la versión 3.4.6. Primero, "páginas de la tienda" en la opción significa todas las páginas donde is_woocommerce() de WooCommerce es verdadero, y eso incluye las páginas de un solo producto. Segundo, el panel global escribe el texto de la pestaña en el shortcode sin comillas, de modo que un texto de varias palabras se corta en el primer espacio: "Show filters" se convierte en "Show". Usa ahí un texto de una sola palabra, o el shortcode de abajo, donde puedes ponerlo entre comillas. El Comportamiento en móviles (Mobile behavior) se decide en el servidor a partir de la identificación del navegador, de modo que una caché de páginas debe conservar copias separadas para teléfonos y ordenadores, como se explica en la guía móvil.

Mostrar el panel solo donde quieras

Para controlar en qué páginas aparece, pon Visibilidad global (Global visibility) en Ocultar (Hide) y coloca tú mismo el shortcode. El botón Generar shortcode (Generate shortcode) de la parte inferior de la pestaña Slideout escribe uno a partir de las opciones actuales; recarga la página después en lugar de guardar si esos valores no deben convertirse en los globales, y pon comillas a los valores con espacios. Un shortcode típico:

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

image="null" convierte la pestaña en una pestaña de texto. Sin contenido, el shortcode construye él mismo el [woof] interior y le pasa todos los atributos que no son ajustes de slideout: tax_only, by_only, sid, btn_position, redirect y el resto de los atributos de [woof]. Con contenido entre [woof_slideout] y [/woof_slideout], se muestra ese contenido en su lugar, de modo que son posibles un encabezado y un formulario personalizado: [woof_slideout text="Filters" image="null"]<h3>Filter products</h3>[woof btn_position="t"][/woof_slideout]. En esa forma, los atributos de [woof] van en el shortcode interior.

El shortcode puede estar en el contenido de la página o en un área de widgets del pie, pero no en una barra lateral que el tema oculte en los teléfonos: el panel está dentro de esa barra lateral y desaparece con ella. Para mostrar el panel solo en la tienda y en los archivos de productos, imprímelo desde el 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);

Mantén la prioridad por debajo de 10. La extensión escribe los estilos de ancho y alto del panel en su propio callback del pie con prioridad 10, usando el último panel impreso antes de que se ejecute; un panel impreso más tarde no recibe tamaño. Para un filtro distinto por categoría, comprueba is_product_category('shoes') y da a cada panel su propio tax_only="pa_size,pa_color". Para ofrecer el panel también en las páginas del blog o de inicio, añade redirect="https://example.com/shop/" para que los resultados se abran en la página de la tienda.

Usa un solo panel por página. El script de slideout prepara solo el primer panel que encuentra; un segundo, por ejemplo el panel global más un panel con shortcode, conserva el estilo de arranque que lo aparca fuera de la ventana, de modo que su pestaña falta o está mal colocada.

Abrirlo desde tu propio botón y cerrarlo después de filtrar

El panel reacciona a tres eventos: open, close y toggle. Un detalle importa para un botón personalizado: el panel se cierra con cualquier clic fuera de él, y un botón de la cabecera está fuera. Si el evento de clic sigue hasta el documento, el panel se abre y se cierra de nuevo en el mismo instante. El manejador de abajo lo evita y además cierra el panel después de cada filtrado con AJAX, usando el 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);

Para usar solo tu botón, oculta la pestaña con .woof-slide-out-div .woof-handle { display: none; }. Coloca el enlace de cierre en el panel mediante el contenido del shortcode, antes de [woof].

Cerrar después de filtrar va bien con un botón Filtro (Filter). Con Autoenviar (Autosubmit) activado, cada clic filtra y el panel se cerraría después de cada elección; pon Autoenviar (Autosubmit) en No en la pestaña Opciones (Options) para que los visitantes hagan todas sus elecciones y el panel se cierre una sola vez. Sin AJAX, la página se recarga tras filtrar y el panel empieza cerrado, siempre que Estado tras la inicialización (State after init) sea No. Hasta que se guardan por primera vez los ajustes del plugin, un shortcode sin onloadslideout se abre en cada carga de página; los ejemplos definen onloadslideout="false" para no depender de eso.

Pestaña, colores, tamaño y desplazamiento

El script del propio panel define algunos valores en línea, así que algunas reglas necesitan !important, y su hoja de estilos se carga en el pie, después de la mayoría de las demás, por lo que algunos selectores empiezan por 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);
}

Por qué hace falta la regla de desplazamiento: al cargar la página, el script reduce el panel para ajustarlo a la pantalla si es demasiado alto o ancho, pero solo una vez. Las secciones que se abren más tarde, una lista de "mostrar más" o un teléfono girado hacen que el contenido sea más alto que la ventana, y la parte inferior queda inaccesible. Un max-height con overflow-y: auto mantiene una barra de desplazamiento en todos los estados. Define el valor restado como tu Desplazamiento (Offset) más algo de margen.

El panel es opaco al 95% por defecto, lo que hace que los productos se vean a través en los teléfonos. Su nivel de apilamiento es 9999; una cabecera fija, una capa superpuesta del tema o un aviso de cookies con un nivel más alto lo tapan o capturan sus clics, lo que parece un filtro en el que no se puede hacer clic. Si subir el panel no ayuda, inspecciona el elemento que está encima y baja su z-index.

Cuando el panel no funciona

Falta la pestaña en los teléfonos. El shortcode está en una barra lateral que el tema oculta en pantallas pequeñas, el Comportamiento en móviles (Mobile behavior) excluye los teléfonos, o una caché de páginas sirve la copia de escritorio.
El panel aparece en las páginas de producto o en todas partes. Visibilidad global (Global visibility) está en Mostrar (Show); cámbiala a Ocultar (Hide) y usa el fragmento del pie.
Se abre en cada carga de página. Pon Estado tras la inicialización (State after init) en No y añade onloadslideout="false" a tus shortcodes.
Solo aparece o funciona una de dos pestañas. Hay dos paneles en la página; deja uno.
La pestaña aparece tarde o no hace nada. La optimización de JavaScript retrasa o combina los scripts del plugin. Excluye /wp-content/plugins/woocommerce-products-filter/ del retraso y de la combinación, como se describe en la guía sobre plugins de optimización, y vacía todas las cachés.
El filtrado se inicia desde el panel pero los productos no cambian. Eso es cosa de la cuadrícula de productos, no del panel; se aplican las mismas causas que para un filtro en una barra lateral, consulta la URL cambia pero los productos siguen igual.

Lista de comprobación

Una sola forma de ocultar el filtro por página: Slideout, modo móvil, el botón del filtro automático o un cajón del tema.
Un panel por página; Visibilidad global (Global visibility) en Ocultar (Hide) cuando colocas tú mismo el shortcode.
El shortcode fuera de las barras laterales que el tema oculta en los teléfonos, o impreso desde wp_footer con una prioridad inferior a 10.
Pestaña de texto con comillas: image="null" text="Show filters"; onloadslideout="false".
Los botones personalizados impiden que el clic llegue al documento; el panel se cierra con woof_ajax_done.
Contenido del panel limitado con max-height y con desplazamiento; z-index por encima de la cabecera.

Si el panel sigue sin comportarse bien, abre un tema en el foro de soporte de HUSKY con el enlace de la página y el shortcode o los ajustes que usas, y lo revisaremos.