Filtro de productos horizontal sobre los productos en WooCommerce

Un filtro en la barra lateral ocupa un tercio del ancho de la tienda y, en los móviles, empuja los productos muy abajo en la página. Un filtro de productos horizontal sobre los productos en WooCommerce da a la cuadrícula todo el ancho y muestra todas las opciones de un vistazo: una barra de desplegables, o secciones del filtro en dos a cuatro columnas. HUSKY no tiene un "modo horizontal" independiente. La disposición depende de dos cosas: lo ancho que sea el lugar donde se imprime el filtro y el CSS de sus bloques. A continuación se describen las tres formas de colocar el filtro sobre los productos, las disposiciones en columnas incluidas, el CSS para una sola fila y las soluciones a los problemas de maquetación más habituales.

El lugar donde se coloca el filtro determina su disposición

Cada sección del filtro (categorías, color, talla, precio) es un bloque con la clase woof_container. En un widget de la barra lateral los bloques se apilan porque el widget es estrecho. Impresos en un área ancha, esos mismos bloques pueden colocarse uno al lado del otro, y el plugin incluye clases que los organizan en columnas. Hay tres formas de colocar el filtro sobre los productos:

El filtro automático sobre los productos

1. Ve a WooCommerce → Ajustes → Filtro de productos → Opciones (Options) y pon Configurar filtro automáticamente (Set filter automatically) en Sí (Yes), o en Sí, pero solo en escritorio (Yes, but only for desktop) si los móviles deben tener un filtro distinto. Guarda.
2. Recarga la página y abre la pestaña Diseño. Allí aparecen dos opciones solo después de guardar el primer paso: Ocultar auto filtro por defecto (Hide auto filter by default) y Skins para el filtro automático (Skins for the auto filter).
3. Pon Ocultar auto filtro por defecto (Hide auto filter by default) en No. Con Sí (Yes), el valor predeterminado, los visitantes ven solo un botón de abrir/cerrar, y el filtro se abre como un panel sobre los productos. Es también una opción válida; el botón se personaliza con Filtro automático cerrar/abrir imagen (Auto filter close/open image) y Filtro automático para cerrar/abrir texto (Auto filter close/open text). Para un panel que se desliza desde el borde de la pantalla, consulta el filtro de productos off-canvas.
4. Elige un skin: Flat white, Flat grey o Flat dark, con 1, 2, 3 o 4 columnas. Predeterminado (Default) es un skin sencillo con tres bloques por fila.
5. Quita el widget de HUSKY de la barra lateral de la tienda para que la página no muestre dos filtros, y cambia la tienda a un diseño de ancho completo en el tema. Los skins de 4 columnas se etiquetan "sin barra lateral" por este motivo: cuatro bloques de al menos 150 px no caben junto a una barra lateral.

Internamente, el plugin imprime [woof sid="flat_grey woof_auto_3_columns" ...] en la acción de WooCommerce woocommerce_before_shop_loop con prioridad 2, antes de los avisos, el recuento de resultados y el desplegable de ordenación. Usar esta acción tiene dos consecuencias:

• La plantilla del tema o del constructor de páginas debe ejecutarla. Los temas clásicos y la propia plantilla de archivo de WooCommerce lo hacen; muchas plantillas de archivo de constructores y cuadrículas de productos personalizadas no, y entonces no aparece nada. En ese caso, usa el shortcode.
• Cuando una combinación de filtros no encuentra nada, la plantilla de archivo de WooCommerce ejecuta woocommerce_no_products_found en lugar de woocommerce_before_shop_loop. Tras recargar la página, el filtro automático desaparece junto con los productos, y el visitante solo ve el mensaje de "no hay productos" sin forma de cambiar la selección. En modo AJAX el formulario permanece en la página. El fragmento de shortcode de la sección siguiente resuelve este caso.

Un filtro con shortcode en columnas

El atributo sid de [woof] se convierte en clases CSS del formulario del filtro. sid="flat_grey woof_auto_4_columns" imprime woof_sid_flat_grey, que da los colores grises, y woof_auto_4_columns, que coloca los bloques en cuatro columnas. Las clases de columnas de la hoja de estilos del plugin:

Cada bloque es un bloque en línea (inline block) con un ancho mínimo de 150 px, de modo que en pantallas estrechas los bloques se reparten por sí solos en menos columnas. La primera palabra no tiene por qué ser un skin: [woof sid="topbar woof_auto_3_columns"] mantiene el aspecto neutro del plugin y te da la clase woof_sid_topbar para tu propio CSS.

Las columnas necesitan espacio. Un área de widgets es tan ancha como la barra lateral, así que pon el shortcode en un lugar de ancho completo: un widget Shortcode en una sección de ancho completo de Elementor o Divi, una página encima de [products] o [woof_products] (consulta el filtro en una página personalizada), o la plantilla de la tienda. Para imprimirlo sobre los productos en las páginas de la tienda y de archivo de productos sin Configurar filtro automáticamente (Set filter automatically), engánchalo a la misma acción que usa el 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() cubre los archivos de categoría, etiqueta y atributo. La prioridad 1 es importante: con Intenta ajaxificar la tienda (Try to ajaxify the shop) activada, el plugin abre el área que AJAX sustituye con la prioridad 2 de la misma acción, y un filtro impreso después de ese punto quedaría dentro de ella y desaparecería tras el primer filtrado. Una limitación: el modo móvil, que sustituye el filtro por un botón Abrir filtro (Open filter) en los teléfonos, no encuentra un formulario cuyo sid tenga dos palabras en la versión 3.4.6. Si necesitas el modo móvil, da al formulario un sid de una sola palabra y crea la disposición con el CSS de la sección siguiente; la guía del filtro móvil explica los detalles.

El shortcode [woof_front_builder] es la alternativa sin código. Construye un formulario de filtro en la propia página, y sus opciones de Maquetación (Layout) incluyen Ancho predeterminado de la sección del filtro (Default filter section width): 25% da cuatro secciones por fila, 50% dos. Cada sección puede reemplazarlo con su propio Ancho de sección (Section width). La FAQ sobre insertar un filtro sobre la cuadrícula de productos muestra cómo imprimir un formulario así sobre los productos de la tienda.

Todos los filtros en una fila

Las columnas van bien para listas de casillas de verificación. Para una barra delgada, cambia las secciones de la pestaña Estructura (Structure) a tipos de vista compactos: Desplegable (Drop-down), Desplegable múltiple (Multi drop-down), Radio/Casilla en desplegable (Radio/Checkbox in drop-down) (casillas dentro de un panel desplegable, consulta la página de la extensión) o Desplegable Jerarquía (Hierarchy drop-down) para las categorías. Un desplegable muestra el nombre del filtro como primera opción, así que puedes desactivar los títulos de los bloques con Mostrar etiqueta de título (Show title label) en las opciones adicionales de cada sección (el icono del engranaje) y ahorrar una línea de altura. Después deja que flexbox disponga los bloques. Para un formulario colocado 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%;
    }
}

Cinco o seis desplegables caben en una fila de un área de contenido de 1200 px; si hay más, pasan a una segunda fila en lugar de comprimirse. El botón Filtro (Filter) existe solo cuando Autoenviar (Autosubmit) está desactivado, y Re-inicializar (Reset) solo después de seleccionar algo, así que el bloque de botones suele estar vacío y entonces no ocupa espacio en la fila. Por debajo de 768 px cada bloque ocupa todo el ancho. Para aplicar las mismas reglas al filtro automático, sustituye .woof_sid_topbar por la clase de su skin, por ejemplo .woof_sid_flat_grey, o .woof_sid_auto_shortcode para el skin Predeterminado (Default).

Términos de un filtro en filas o columnas

Una columna larga de tallas o marcas es la otra mitad del problema. Para casillas de verificación y botones de radio, abre las opciones adicionales de la sección en Estructura (Structure) y pon Visualizar artículos en una línea (Display items in a row) en Sí (Yes): los elementos fluyen uno junto a otro y saltan de línea. Se aplica a los términos sin subcategorías; un padre con hijos permanece en su propia línea para que sus subcategorías puedan abrirse debajo.

Para un número fijo de columnas, usa una cuadrícula CSS en la lista de una sección:

/* 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;
}

Cada sección lleva la clase woof_container_ más el slug de su taxonomía: woof_container_product_cat, woof_container_pa_color, woof_container_pa_size. Las listas de subcategorías tienen su propia clase, de modo que la cuadrícula se aplica solo al primer nivel. Para mantener corta una lista larga, pon en su lugar Altura máxima del bloque (Max height of the block) en las mismas opciones adicionales; la lista tendrá entonces su propia barra de desplazamiento. Encontrarás más selectores en la guía para dar estilo al filtro con CSS.

Arreglar una disposición horizontal rota

• Averigua primero los nombres de las clases. Pon Avanzadas (Advanced) → Opciones (Options) → Mostrar bloques Botón de ayuda (Show blocks helper button) en Sí (Yes). Los administradores verán entonces un enlace mostrar bloques ayudante (show blocks helper) encima de cada filtro que tenga un sid; un clic etiqueta cada sección con su clase, como woof_container_pa_color, e imprime la clase del formulario. Desactívalo después, como describe la FAQ sobre el botón de ayuda.
• Los bloques siguen apilados. El contenedor es demasiado estrecho (un área de widgets o una columna estrecha del constructor), o un CSS personalizado anterior define anchos o floats en .woof_container. Elimina los intentos anteriores antes de añadir reglas nuevas: mezclar reglas basadas en float y en flex da resultados impredecibles.
• Títulos tapados por cajas blancas, listas cortadas. El skin automático Predeterminado (Default) limita cada bloque a 250 px de altura con su propia barra de desplazamiento, y los temas suelen añadir floats, fondos o alturas fijas a los bloques dentro del área de contenido. Restablécelos para tu formulario, por ejemplo .woof_sid_auto_shortcode .woof_container { float: none; max-height: none; overflow: visible; }, o cambia a un skin Flat.
• Un panel desplegable se abre detrás de los productos. Dale al formulario su propio nivel de apilamiento: .woof_sid_topbar { position: relative; z-index: 20; }.
• Maquetaciones de constructores. En Elementor o Divi, coloca el shortcode en un widget o módulo Shortcode dentro de una sección de ancho completo sobre los productos. La propia cuadrícula debe ser una que el filtro pueda controlar; consulta filtrar las cuadrículas Loop de Elementor.
• No cambia nada después de editar el CSS. Vacía la caché de páginas y cualquier CSS combinado u optimizado, y prueba después sin haber iniciado sesión.

El CSS usado en el sitio de demostración tiene más ejemplos listos de disposiciones del filtro.

Lista de comprobación

• Un formulario de filtro por página: el widget de la barra lateral eliminado, o Configurar filtro automáticamente (Set filter automatically) desactivado cuando se usa el shortcode.
• Ocultar auto filtro por defecto (Hide auto filter by default) en No si la barra debe estar siempre visible.
• El filtro está en un contenedor de ancho completo; para cuatro columnas, la tienda no tiene barra lateral.
• Columnas con una clase woof_auto_N_columns en sid, o un sid de una sola palabra más CSS cuando se necesita el modo móvil.
• Tipos de vista desplegables para una barra de una fila; Visualizar artículos en una línea (Display items in a row) o una cuadrícula para listas largas de casillas.
• Cachés vaciadas; página comprobada sin haber iniciado sesión, en un ordenador y en un teléfono.

Si la disposición sigue rota, abre un tema en el foro de soporte de HUSKY con el enlace de la página y el CSS que has añadido, y lo revisaremos.