Cómo Mostrar Diferentes Filtros por Categoría en WOOF (Filtrado Dinámico)

Aprende cómo mostrar diferentes conjuntos de filtros basados en categorías de productos, crear filtrado dependiente 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 tamaño, 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 Precios, Marcas Destacadas

Limitación actual: Todas las opciones de filtro permanecen globales, incluso después de que un usuario selecciona una categoría, haciendo que la interfaz se vea desordenada con 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 filtros diferentes por categoría de producto
Cómo crear conjuntos de filtros personalizados para la página de la tienda
Cómo usar Widget Logic para un control avanzado de visibilidad

Solución 1: Habilitar Filtrado Dependiente (Redibujo AJAX)

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

Para Widgets:

Ir a Appearance → Widgets
Encuentra tu widget WOOF
Habilitar la opción "Redibujo AJAX del formulario"

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 ajax_redraw atributo a tu shortcode WOOF:

[woof ajax_redraw="1"]

Lo que hace esto:

Cuando el usuario selecciona “Rueda” → otros filtros se actualizan automáticamente
Solo muestra Tipos de Sub, Materiales, Colores disponibles para Rueda
Reduce el desorden ocultando opciones irrelevantes

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

Solución 2: Visibilidad del filtro 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 un Shortcode Personalizado

Add this code to your child theme’s functions.php:

/**
 * 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: Usa el Shortcode

Reemplaza tu existente [woof] shortcode con:

[woof_dynamic]

Coloca este shortcode en:

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

Paso 3: Configura Tus Categorías

Actualizar el $filters_map array con tus datos actuales:

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

Encontrando tus slugs:

Slugs de categorías:

Ir a Productos → Categorías
Pasa el cursor sobre el nombre de una 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:

Ir a Productos → Atributos
Comienzan 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 la tienda

La página principal de WooCommerce Shop necesita un manejo 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ías 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"]');
});

Lo que hace este código:

En la página de la tienda: Muestra solo los filtros de Categorías, Color y Precio
En las páginas de categoría: Muestra filtros específicos de categoría del mapeo
En otras páginas: Muestra filtros predeterminados

Personaliza los 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 precios
by_only="product_cat,pa_brand" – Alternativa a tax_only
ajax_redraw="1" – Habilitar actualizaciones dinámicas

Solución 4: Lógica de Widget para Visibilidad Condicional

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

Paso 1: Instalar el plugin Widget Logic

Elija uno de estos plugins:

Lógica de widget: https://wordpress.org/plugins/widget-logic/
Mostrar Widget por Lógica: https://github.com/realmag777/Show-WordPress-Widget-by-Logic

Paso 2: Crear Múltiples Widgets WOOF

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

Paso 3: Agrega Lógica Condicional

Para cada widget, agrega condiciones de visibilidad:

Mostrar solo en la categoría Rueda:

is_product_category('wheel')

Mostrar solo en la categoría Lencería:

is_product_category('lingerie')

Mostrar solo en la página de la 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 las categorías de Electrónica u Ordenadores:

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 el rango de precios y las 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 los parámetros:

product_cat – Muestra el filtro de categoría para desglose
by_price="1" – Muestra el control deslizante del rango de precios
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
Habilita "Redibujo AJAX del formulario" en la configuración del widget.
Revisa la consola de JavaScript en busca de errores

Filtros incorrectos que se muestran 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 (comprueba la URL o la configuración de la categoría)
Use lowercase in $filters_map array
Comprueba si la categoría existe en tu mapeo

Los filtros no aparecen en absoluto

Problema: No se ven filtros en la página
Solución:

Verifica que las slugs de los atributos comiencen con pa_ (por ejemplo, pa_color no color)
Comprueba si los atributos están asignados a los productos de 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 la tienda muestra un conjunto de filtros incorrecto
Solución:

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

Las slugs de atributos no funcionan

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

Ir a Productos → Atributos para encontrar los slugs correctos
Recuerda usar pa_ prefijo (requisito de WooCommerce)
Check spelling: pa_colour vs pa_color

Código no funciona después de añadir

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

Comprobar errores de sintaxis PHP en el registro de errores
Asegúrate de que estás editando el functions.php del tema hijo.
Verifica que todos los corchetes y comillas estén cerrados
Elimine el código y agréguelo línea por línea

Consideraciones de Rendimiento

Impacto del rediseño 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

Múltiples widgets vs. shortcode:

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

Catálogos grandes:

Considerar paginación en filtros
Usar carga diferida para atributos
Implementar caché del lado del servidor

Enfoques Alternativos

Usando 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.

Uso de 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, abarrotando la interfaz

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

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

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

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

Mejor Enfoque: Combina las Soluciones 2 + 3 para un filtrado dinámico completo

Clave del código:

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.