Cómo mostrar diferentes filtros de WooCommerce por categoría (Filtrado dinámico)

Aprende a mostrar diferentes conjuntos de filtros según las categorías de productos, crear filtros dependientes y personalizar filtros para la página de tienda de WooCommerce.

El Problema

Por defecto, WOOF muestra los mismos filtros en todas las páginas. Sin embargo, diferentes categorías de productos a menudo necesitan diferentes opciones de filtro:

Escenarios de ejemplo:

Categoría Electrónica: Mostrar Marca, Tamaño de Pantalla, Almacenamiento, RAM
Categoría Ropa: Mostrar Talla, Color, Material, Estilo
Categoría Muebles: Mostrar Material, Color, Dimensiones, Tipo de Habitación
Página de tienda (archivo principal): Mostrar solo Categorías, Rango de Precio, Marcas destacadas

Limitación actual: Todas las opciones de filtro permanecen globales, incluso después de que un usuario selecciona una categoría, lo que hace que la interfaz esté saturada de filtros irrelevantes.

Lo que aprenderás:

Cómo habilitar el filtrado dependiente/condicional (los filtros se actualizan según la selección)
Cómo mostrar diferentes filtros por categoría de producto
Cómo crear conjuntos de filtros personalizados para la página de tienda
Cómo usar Widget Logic para control avanzado de visibilidad

Solución 1: Habilitar el filtrado dependiente (Redibujado AJAX)

El primer paso es habilitar el redibujado del formulario AJAX, que actualiza los filtros dinámicamente cuando los usuarios hacen selecciones.

Para widgets:

Ve a Apariencia → Widgets
Encuentra tu widget de WOOF
Activa la opción "Form AJAX redrawing"

Esto hace que los filtros se actualicen automáticamente después de cada selección, mostrando solo las opciones relevantes.

Para shortcodes:

Añade el atributo ajax_redraw a tu shortcode de WOOF:

[woof ajax_redraw="1"]

Qué hace esto:

Cuando el usuario selecciona "Wheel" → otros filtros se actualizan automáticamente
Muestra solo Sub Tipos, Materiales, Colores disponibles para Wheel
Reduce el desorden ocultando opciones irrelevantes

Documentación: https://products-filter.com/shortcode/woof

Solución 2: Visibilidad de filtros basada en categorías (Shortcode personalizado)

Esta solución crea un shortcode dinámico que muestra diferentes filtros dependiendo de la categoría de producto actual.

Paso 1: Crear shortcode personalizado

Añade este código al functions.php de tu tema hijo:

/**
 * Dynamic WOOF shortcode that shows different filters per category
 * Usage: [woof_dynamic]
 */
add_shortcode('woof_dynamic', function () {
    // Check if WOOF is active
    if (!function_exists('woof_shortcode')) {
        return '<!-- WOOF plugin not active -->';
    }

    // Get current category
    $term = get_queried_object();

    // Check if we're on a product category page
    if (!$term || !isset($term->taxonomy) || $term->taxonomy !== 'product_cat') {
        return do_shortcode('[woof]'); // Show default filters
    }

    // Get category slug
    $cat = strtolower($term->slug);

    // Define which filters to show for each category
    $filters_map = [
        'wheel' => ['pa_sub-type', 'pa_material', 'pa_colour', 'pa_size'],
        'lingerie' => ['pa_size', 'pa_colour', 'pa_material'],
        'massage-candles' => ['pa_type', 'pa_material', 'pa_brand'],
        'electronics' => ['pa_brand', 'pa_screen-size', 'pa_storage'],
        'clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_style'],
        'furniture' => ['pa_material', 'pa_color', 'pa_dimensions', 'pa_room'],
    ];

    // If category not in map, show default filters
    if (!isset($filters_map[$cat])) {
        return do_shortcode('[woof]');
    }

    // Build shortcode with specific filters for this category
    $taxonomies = implode(',', $filters_map[$cat]);

    return do_shortcode('[woof tax_only="' . esc_attr($taxonomies) . '" ajax_redraw="1"]');
});

Paso 2: Usar el shortcode

Reemplaza tu shortcode [woof] existente con:

[woof_dynamic]

Coloca este shortcode en:

Áreas de widgets (widget de Texto/HTML)
Bloques de constructores de páginas (Elementor, Divi, etc.)
Archivos de plantilla del tema: <?php echo do_shortcode('[woof_dynamic]'); ?>

Paso 3: Configurar tus categorías

Actualiza el array $filters_map con tus datos reales:

Slugs de categorías (ej., ‘wheel’, ‘electronics’)
Slugs de atributos (ej., ‘pa_brand’, ‘pa_size’)

Cómo encontrar tus slugs:

Slugs de categorías:

Ve a Productos → Categorías
Pasa el cursor sobre un nombre de categoría
Mira la URL: ...tag_ID=123&taxonomy=product_cat&post_type=product
O edita la categoría y mira el campo slug

Slugs de atributos:

Ve a Productos → Atributos
Empiezan con pa_ seguido del nombre del atributo
Ejemplos: pa_color, pa_size, pa_brand, pa_material

Solución 3: Filtros personalizados para la página de tienda

La página de tienda principal de WooCommerce necesita un tratamiento diferente ya que no es un archivo de categoría.

Solución combinada: Página de tienda + Páginas de categoría

Este código maneja tanto la página de tienda como las páginas de categoría individuales:

/**
 * Dynamic WOOF shortcode with Shop page support
 * Shows minimal filters on Shop, full filters on categories
 */
add_shortcode('woof_dynamic', function () {
    if (!function_exists('woof_shortcode')) {
        return '';
    }

    // Shop page (main product archive) - show minimal filters
    if (is_shop() AND !is_product_category() AND !is_product_tag()) {
        return do_shortcode('[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]');
    }

    // Product category pages - show category-specific filters
    $term = get_queried_object();
    if ($term AND isset($term->taxonomy) AND $term->taxonomy === 'product_cat') {
        $cat = strtolower($term->slug);

        // Define filters for each category
        $filters_map = [
            'wheel' => ['pa_sub-type', 'pa_material', 'pa_colour', 'pa_size'],
            'lingerie' => ['pa_size', 'pa_colour', 'pa_material'],
            'massage-candles' => ['pa_type', 'pa_material', 'pa_brand'],
            'electronics' => ['pa_brand', 'pa_screen-size', 'pa_storage'],
            'clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_style'],
        ];

        if (isset($filters_map[$cat])) {
            $taxonomies = implode(',', $filters_map[$cat]);
            return do_shortcode('[woof tax_only="' . esc_attr($taxonomies) . '" ajax_redraw="1"]');
        }
    }

    // Fallback - show all filters
    return do_shortcode('[woof ajax_redraw="1"]');
});

Qué hace este código:

En la página de tienda: Muestra solo filtros de Categorías, Color y Precio
En páginas de categoría: Muestra filtros específicos de la categoría según el mapeo
En otras páginas: Muestra filtros predeterminados

Personalizar filtros de la página de tienda: Cambia esta línea para mostrar diferentes filtros en la página de tienda:

[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]

Parámetros disponibles:

tax_only="product_cat,pa_brand" – Mostrar solo estas taxonomías
by_price="1" – Mostrar filtro de rango de precio
by_only="product_cat,pa_brand" – Alternativa a tax_only
ajax_redraw="1" – Habilitar actualizaciones dinámicas

Solución 4: Widget Logic para visibilidad condicional

Si prefieres usar widgets en lugar de shortcodes, puedes controlar la visibilidad de los widgets con lógica condicional.

Paso 1: Instalar el plugin Widget Logic

Elige uno de estos plugins:

Widget Logic: https://wordpress.org/plugins/widget-logic/
Show Widget by Logic: https://github.com/realmag777/Show-WordPress-Widget-by-Logic

Paso 2: Crear múltiples widgets de WOOF

Ve a Apariencia → Widgets
Añade múltiples widgets de WOOF a tu barra lateral
Configura cada widget con diferentes filtros

Paso 3: Añadir lógica condicional

Para cada widget, añade condiciones de visibilidad:

Mostrar solo en la categoría Wheel:

is_product_category('wheel')

Mostrar solo en la categoría Lingerie:

is_product_category('lingerie')

Mostrar solo en la página de tienda:

is_shop() AND !is_product_category()

Mostrar en múltiples categorías:

is_product_category(array('wheel', 'lingerie', 'massage-candles'))

Mostrar en todas partes excepto en la página de tienda:

!is_shop()

Mostrar en categorías Electrónica o Computadoras:

is_product_category('electronics') || is_product_category('computers')

Ejemplos del mundo real

Ejemplo 1: Tienda de productos para adultos

$filters_map = [
    'wheel' => ['pa_type', 'pa_material', 'pa_color', 'pa_power-source', 'pa_waterproof'],
    'lingerie' => ['pa_size', 'pa_color', 'pa_style', 'pa_material'],
    'oil' => ['pa_type', 'pa_brand', 'pa_ingredients', 'pa_volume'],
    'toys' => ['pa_category', 'pa_material', 'pa_size', 'pa_color'],
];

Ejemplo 2: Tienda de electrónica

$filters_map = [
    'laptops' => ['pa_brand', 'pa_processor', 'pa_ram', 'pa_storage', 'pa_screen-size'],
    'smartphones' => ['pa_brand', 'pa_storage', 'pa_ram', 'pa_camera', 'pa_battery'],
    'headphones' => ['pa_brand', 'pa_type', 'pa_connection', 'pa_noise-cancelling'],
    'cameras' => ['pa_brand', 'pa_megapixels', 'pa_sensor-size', 'pa_video-quality'],
];

Ejemplo 3: Tienda de moda

$filters_map = [
    'mens-clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_brand', 'pa_style'],
    'womens-clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_brand', 'pa_occasion'],
    'shoes' => ['pa_size', 'pa_color', 'pa_brand', 'pa_type', 'pa_material'],
    'accessories' => ['pa_color', 'pa_material', 'pa_brand', 'pa_type'],
];

Ejemplo 4: Tienda de muebles

$filters_map = [
    'bedroom' => ['pa_type', 'pa_material', 'pa_color', 'pa_style', 'pa_size'],
    'living-room' => ['pa_type', 'pa_material', 'pa_color', 'pa_seating-capacity'],
    'office' => ['pa_type', 'pa_material', 'pa_color', 'pa_ergonomic'],
    'outdoor' => ['pa_type', 'pa_material', 'pa_weather-resistant', 'pa_color'],
];

Avanzado: Incluir precio y categorías

Si quieres mostrar rango de precio y categorías además de los atributos:

// On category pages, add price and allow category drill-down
if (isset($filters_map[$cat])) {
    $taxonomies = implode(',', $filters_map[$cat]);
    return do_shortcode('[woof tax_only="product_cat,' . esc_attr($taxonomies) . '" by_price="1" ajax_redraw="1"]');
}

Explicación de parámetros:

product_cat – Muestra filtro de categoría para desglose
by_price="1" – Muestra control deslizante de rango de precio
ajax_redraw="1" – Actualiza filtros dinámicamente

Solución de problemas

Los filtros no se actualizan dinámicamente

Problema: Los filtros permanecen estáticos después de la selección
Solución:

Asegúrate de que ajax_redraw="1" esté en tu shortcode
Activa "Form AJAX redrawing" en la configuración del widget
Revisa la consola de JavaScript en busca de errores

Filtros incorrectos mostrados en la categoría

Problema: La categoría muestra un conjunto de filtros incorrecto
Solución:

Verifica que el slug de la categoría sea correcto (revisa la URL o la configuración de la categoría)
Usa minúsculas en el array $filters_map
Comprueba si la categoría existe en tu mapeo

Los filtros no aparecen en absoluto

Problema: No hay filtros visibles en la página
Solución:

Verifica que los slugs de atributos comiencen con pa_ (ej., pa_color no color)
Comprueba si los atributos están asignados a productos en esa categoría
Usa [woof] temporalmente para ver si el shortcode básico funciona

La página de tienda muestra filtros de categoría

Problema: La página de tienda muestra un conjunto de filtros incorrecto
Solución:

Verifica que la condición is_shop() sea la primera en tu código
Comprueba que !is_product_category() esté incluido
Limpia todas las cachés (WordPress, servidor, navegador)

Los slugs de atributos no funcionan

Problema: Los filtros no se muestran para atributos específicos
Solución:

Ve a Productos → Atributos para encontrar los slugs correctos
Recuerda usar el prefijo pa_ (requisito de WooCommerce)
Revisa la ortografía: pa_colour vs pa_color

El código no funciona después de añadirlo

Problema: Pantalla blanca o errores después de añadir código
Solución:

Revisa errores de sintaxis PHP en el registro de errores
Asegúrate de estar editando el functions.php del tema hijo
Verifica que todos los corchetes y comillas estén cerrados
Elimina el código y vuelve a añadirlo línea por línea

Consideraciones de rendimiento

Impacto del redibujado AJAX:

Cada selección activa una solicitud AJAX
Más productos = mayor tiempo de respuesta
Solución: Usar caché y optimizar la base de datos

Varios widgets vs. shortcode:

Widgets: Mayor uso de memoria (todos los widgets se cargan)
Shortcode: Más eficiente (solo se carga un conjunto)
Recomendación: Usar el enfoque de shortcode

Catálogos grandes:

Considera la paginación en los filtros
Usa carga diferida para atributos
Implementa caché del lado del servidor

Enfoques alternativos

Usar múltiples shortcodes

En lugar de un shortcode dinámico, usa varios estáticos:

// On wheel category page
[woof tax_only="pa_sub-type,pa_material,pa_colour,pa_size" ajax_redraw="1"]

// On Lingerie category page
[woof tax_only="pa_size,pa_colour,pa_material" ajax_redraw="1"]

// On Shop page
[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]

Luego usa Widget Logic para mostrar el shortcode correcto en cada página.

Usar archivos de plantilla

Añade lógica condicional directamente en la plantilla de tu tema:

<?php
if (is_product_category('books')) {
    echo do_shortcode('[woof tax_only="pa_sub-type,pa_material,pa_colour,pa_size"]');
} elseif (is_product_category('lingerie')) {
    echo do_shortcode('[woof tax_only="pa_size,pa_colour,pa_material"]');
} elseif (is_shop()) {
    echo do_shortcode('[woof tax_only="product_cat,pa_colour" by_price="1"]');
} else {
    echo do_shortcode('[woof]');
}
?>

Resumen

Problema: Los mismos filtros se muestran en todas partes, saturando la interfaz

Solución 1: Habilitar el redibujado AJAX para filtrado dependiente

Solución 2: Crear shortcode [woof_dynamic] con mapeo de categorías

Solución 3: Añadir manejo de la página de tienda con filtros mínimos

Solución 4: Usar Widget Logic para control avanzado de visibilidad

Mejor enfoque: Combinar Soluciones 2 + 3 para un filtrado dinámico completo

Código clave:

add_shortcode('woof_dynamic', function() {
    // Shop page logic
    if (is_shop() AND !is_product_category()) {
        return do_shortcode('[woof tax_only="product_cat" by_price="1"]');
    }
    
    // Category mapping
    $term = get_queried_object();
    if ($term AND $term->taxonomy === 'product_cat') {
        $filters_map = [
            'category-slug' => ['pa_attribute1', 'pa_attribute2'],
        ];
        // Return category-specific filters
    }
    
    return do_shortcode('[woof]'); // Fallback
});

Esto crea una experiencia de filtrado profesional y fácil de usar, adaptada a cada categoría de producto.