Filtro de rango deslizante de WooCommerce para atributos y metacampos

Tamaño, potencia, longitud, diagonal de pantalla, año, kilometraje: los datos numéricos de un producto piden un deslizador de rango en lugar de una larga lista de casillas. Un filtro de rango deslizante de WooCommerce para atributos es fácil de activar en HUSKY, y es igual de fácil acabar con un deslizador que muestra 100000 antes que 9000, divide 1,9 en dos valores o siempre va de 0 a 100. El motivo casi siempre es el mismo: existen dos deslizadores distintos y tratan los números de forma diferente. Esta guía explica los dos, cómo configurar cada uno y cómo corregir el orden incorrecto, los decimales y los rangos vacíos.

Dos deslizadores de rango: valores de atributo o un metacampo numérico

HUSKY puede dibujar un deslizador de rango a partir de dos tipos de datos, y la elección determina lo que el deslizador puede hacer.

La diferencia clave: los términos de atributo son texto. WordPress guarda 9000 y 100000 como nombres, no como números, así que el deslizador de atributo solo puede recorrer una lista de términos en un orden dado. Nunca calcula. El deslizador de metacampo compara números en la base de datos, por lo que gestiona cualquier valor dentro de un rango, incluidos valores que ningún otro producto tiene.

Los atributos personalizados escritos directamente en la pestaña Atributos de un producto, sin un atributo global detrás, no son taxonomías, y ningún tipo de filtro puede usarlos. Crea primero un atributo global en Productos → Atributos (consulta gestión de taxonomías de producto en la documentación de WooCommerce).

Configurar un filtro de rango deslizante para atributos

1. Crea el atributo global, por ejemplo Potencia (Power), y añade sus valores como términos: 5, 7.5, 10, 15. Asígnalos a los productos como de costumbre.
2. Abre WooCommerce → Ajustes → Products Filter → Estructura (Structure) y establece el tipo de ese atributo en Deslizador (Slider). La extensión Slider añade este tipo.
3. Haz clic en el botón de opciones adicionales (additional options) (el engranaje) junto al atributo y define las opciones del deslizador:
   • Tipo (Type): doble (double) para un rango de-hasta; simple (single) para un solo tirador que selecciona todo desde el primer valor hasta el tirador («hasta 10 kW»).
   • Paso de la cuadrícula (Grid step): qué etiquetas bajo el deslizador son visibles. 1 muestra todas, 2 una de cada dos, -1 oculta las etiquetas entre los extremos. Es útil cuando los valores largos se solapan.
   • Activar el recuento dinámico (Enable dynamic recount): elimina los valores sin productos en los resultados actuales (véase más abajo).
   • Aspecto del deslizador (Slider skin): el diseño de este deslizador.
4. Deja Lógica de filtrado (Logic of filtering) en O (OR). El deslizador envía todos los términos del tramo elegido, por ejemplo pa_power=5,7-5,10, y a un producto le basta con tener uno de ellos. Con Y (AND) un producto tendría que tenerlos todos, y no se encontraría nada.

Como un rango son «los términos entre los tiradores», el orden de los términos es toda la lógica del deslizador. Si 6.5 está después de 8.2 en la lista, un rango de 6 a 7 lo omite. La siguiente sección corrige el orden.

Valores del deslizador de atributo en el orden incorrecto

Síntomas típicos: 100000 aparece antes que 9000, 10 y 11 van antes que 2, los valores negativos se ordenan -1, -2, -3, 0, 1, o los tiradores saltan de un lado a otro al arrastrarlos. Todos son ordenación como texto. La solución es dar a los términos un orden numérico.

Lo mejor: dejar que WooCommerce ordene el atributo numéricamente

Ve a Productos → Atributos, edita el atributo y establece Orden predeterminado (Default sort order) en Nombre (numérico) (Name (numeric)). WooCommerce ordena entonces los términos por el valor numérico de sus nombres, lo que gestiona decimales escritos con punto, números negativos y nombres que empiezan por un número, como 10 cm. En las opciones adicionales del deslizador deja Ordenar términos (Sort terms) en Predeterminado (Default) para que HUSKY mantenga ese orden. Si Términos de la caché (Cache terms) está activado (Avanzado → Opciones), pulsa después limpiar términos de la caché (clear terms cache).

Para una escala de texto, elige en su lugar Orden personalizado (Custom ordering) y arrastra los términos a su sitio en la pantalla Configurar términos (Configure terms) del atributo: Blando, Medio, Medio-duro, Duro. El mismo arrastrar y soltar sirve para cualquier lista numérica cuyo orden quieras controlar a mano.

Las opciones propias de HUSKY para ordenar términos

La opción Ordenar términos (Sort terms) de las opciones adicionales del deslizador anula el orden predeterminado:

• Título (Title) usa la ordenación natural de los nombres: correcta para números enteros positivos (2 antes que 10) y para nombres como 10 cm, pero no para decimales ni números negativos.
• Numérico. (Numeric.) compara el valor entero del slug del término. Solo funciona con números enteros positivos: el slug de 6.5 es 6-5, que cuenta como 6, y WordPress elimina el signo menos inicial al crear un slug, de modo que -3 se ordena como 3.

Código: orden numérico para cualquier deslizador de taxonomía

Para una taxonomía personalizada, donde Nombre (numérico) (Name (numeric)) de WooCommerce no está disponible, ordena los valores del deslizador con código. El filtro woof_sort_terms_before_out recibe los términos de cada filtro y el tipo de filtro:

/**
 * HUSKY: order the values of every taxonomy range slider by their number
 * (decimals with a dot and negative numbers included).
 * Child theme functions.php or a code snippets plugin.
 */
add_filter( 'woof_sort_terms_before_out', function ( $terms, $type ) {
    if ( 'slider' === $type && is_array( $terms ) ) {
        uasort( $terms, function ( $a, $b ) {
            return (float) $a['name'] <=> (float) $b['name'];
        } );
    }
    return $terms;
}, 20, 2 );

Los términos sin un número inicial (una escala de texto) cuentan aquí como 0 y conservan su orden actual, por lo que el fragmento no altera esos deslizadores.

Decimales, comas y pasos desiguales en los deslizadores de atributo

• Escribe los decimales con punto. El deslizador recibe sus etiquetas como una única lista separada por comas, así que un término llamado 1,9 se convierte en dos etiquetas, 1 y 9, y todas las posiciones posteriores apuntan al término equivocado. Renombra esos términos como 1.9. Esto no tiene nada que ver con el ajuste del separador decimal de la tienda: los nombres de los términos son texto plano.
• Las posiciones están espaciadas por igual por término, no por valor. Los términos 1, 2, 5 y 50 obtienen cuatro pasos iguales. Si el deslizador debe verse proporcional, añade como términos los valores intermedios que faltan.
• Un deslizador necesita al menos dos valores. Con solo dos términos los tiradores solo pueden estar en los dos extremos. Si tras el recuento dinámico quedan menos de dos valores, el deslizador no se muestra en absoluto.
• Solo se pueden elegir términos existentes. Un producto con el valor 6.5 solo se encuentra si el término 6.5 existe y está entre los tiradores.

Deslizador de rango para metacampos: dimensiones, años y otros números

Cuando el valor es una medida real, un deslizador de metacampo suele ser la mejor herramienta: compara números, acepta entradas de/hasta y sigue siendo rápido con miles de valores distintos. Configuración con la extensión Meta Fields:

1. Abre la pestaña Meta datos (Meta Data) de los ajustes del filtro. Introduce la clave en Añadir una clave personalizada a mano (Add Custom key by hands), o usa Obtener claves de cualquier producto por su ID (Get keys from any product by its ID) para ver qué claves tiene un producto.
2. Establece el tipo del campo en número (number) y su vista en Deslizador (Slider). El deslizador no se ofrece para campos de texto ni de fecha. Guarda.
3. Abre las opciones adicionales del campo y rellena Rango (Range) como min^max, por ejemplo 10^250. Define Paso (Step) (0.5 funciona) y, si hace falta, Prefijo (Prefix), Sufijo (Postfix) (cm), Mostrar entradas (Show inputs) para los cuadros numéricos de/hasta y Usar embellecimiento (Use prettify) para un separador de miles.
4. Coloca el nuevo elemento de filtro en la pestaña Estructura (Structure) como cualquier otro.

Claves útiles: WooCommerce guarda las dimensiones de envío y el peso de un producto como _length, _width, _height y _weight. Un campo numérico de ACF se guarda con el nombre del campo. Los detalles sobre las claves meta están en la documentación de metadatos.

Aspectos que conviene conocer sobre los deslizadores de metacampo:

• El rango nunca se calcula. El deslizador muestra exactamente el Rango (Range) que introdujiste; un campo vacío recurre a 0–100. Encontrar el mínimo y el máximo reales exigiría leer todos los productos en cada visita a la página. El recuento dinámico decide qué filtros y valores se muestran, no dónde empieza y termina un deslizador. Actualiza el rango cuando lleguen productos nuevos que lo superen.
• Guarda números simples con punto como separador decimal y sin separador de miles: 1250.5. La base de datos solo lee el número del comienzo del valor, así que 1,250.5 se compara como 1 y 1250,5 como 1250.
• Años: un rango como 1990^2026, paso 1 y Usar embellecimiento (Use prettify) en No; de lo contrario, 2026 se muestra como 2 026.
• Variaciones: se buscan los metadatos del propio producto. Si el valor existe solo en las variaciones, guárdalo también en el producto padre, o usa un atributo.

Valores decimales: woof_slider_meta_query_type

De forma predeterminada, el deslizador de metacampo compara los valores como NUMERIC, que MySQL trata como números enteros. Un producto con 10.11 se encuentra entonces en el rango 1–10, y 4.2, 4.4 y 4.6 cuentan todos como 4. Para comparar decimales, cambia el tipo con el filtro woof_slider_meta_query_type:

/**
 * HUSKY: compare these meta sliders as decimal numbers.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter( 'woof_slider_meta_query_type', function ( $type, $meta_key ) {
    if ( in_array( $meta_key, array( '_length', '_width', '_height', 'screen_size' ), true ) ) {
        return 'DECIMAL(10,2)'; // up to 99999999.99
    }
    return $type;
}, 10, 2 );

En DECIMAL(M,D), M es el número total de dígitos y D los dígitos tras el punto. Elígelos según tu valor más grande: con DECIMAL(5,3) el máximo es 99.999, y cualquier valor mayor se trata como 99.999.

Ocultar los deslizadores que no se aplican a la categoría actual

• Deslizador de atributo: establece Activar el recuento dinámico (Enable dynamic recount) en Sí (Yes) en sus opciones adicionales. Los valores sin productos en la categoría actual y en la selección de filtros desaparecen, y si quedan menos de dos valores, el deslizador se elimina. Cada valor cuesta una consulta de recuento adicional, así que en atributos con cientos de términos vigila la velocidad de la página o usa un deslizador de metacampo.
• Deslizador de metacampo: con Ocultar términos vacíos (Hide empty terms) en Sí (Yes) en la pestaña Opciones, no se muestra un deslizador de metacampo que no tenga productos dentro de su rango en los resultados actuales.

Un deslizador de atributo sin valores lo elimina el script del plugin después de cargar la página, por lo que su título puede parpadear un instante. Este CSS lo oculta desde el principio (Apariencia → Personalizar → CSS adicional, o la hoja de estilos de tu tema hijo):

/* HUSKY: hide empty taxonomy sliders before the script removes them */
.woof_container_slider:has(.woof_hide_slider) {
    display: none;
}

Cuando el propio producto tiene un rango

Un deslizador encuentra productos por un valor por producto. Si un producto abarca un rango (adecuado para alturas de 150–190 cm, 3–10 jugadores), no existe una búsqueda integrada de «rangos que se solapan». Dos modelos viables:

• Dos metacampos, por ejemplo players_min y players_max, cada uno con su propio deslizador. Un visitante que busca un juego para 4 jugadores establece el primer deslizador en 1–4 y el segundo en 4–10.
• Un atributo con un término por valor (150, 151 ... 190), con todos los términos adecuados asignados al producto, y el atributo mostrado como deslizador. Asigna los términos de forma masiva en lugar de a mano.

Lista de comprobación

• Deslizador de atributo: atributo global, decimales escritos con punto, Orden predeterminado (Default sort order) en Nombre (numérico) (Name (numeric)) o términos arrastrados al orden correcto, Lógica de filtrado (Logic of filtering) en O (OR).
• Deslizador de metacampo: tipo de campo número (number), valores numéricos simples, Rango (Range) rellenado como min^max, un tipo decimal para valores fraccionarios.
• Muchos valores distintos o medidas reales: un deslizador de metacampo en lugar de un atributo con cientos de términos.
• Deslizadores en categorías equivocadas: Activar el recuento dinámico (Enable dynamic recount) para los deslizadores de atributo, Ocultar términos vacíos (Hide empty terms) para los de metacampo.

Si un deslizador sigue mostrando valores incorrectos tras estos pasos, pregunta en el foro de soporte de HUSKY con el atributo o la clave meta, algunos valores de ejemplo y un enlace a la página.