Как показывать разные фильтры WooCommerce для каждой категории (динамическая фильтрация)

Узнайте, как отображать разные наборы фильтров в зависимости от категорий товаров, создавать зависимые фильтры и настраивать фильтры для страницы магазина WooCommerce.

Проблема

По умолчанию WOOF отображает одинаковые фильтры на всех страницах. Однако разные категории товаров часто требуют разных опций фильтрации:

Пример сценариев:

• Категория "Электроника": Отобразить бренд, размер экрана, объем памяти, ОЗУ
• Категория "Одежда": Отобразить размер, цвет, материал, стиль
• Категория "Мебель": Отобразить материал, цвет, размеры, тип комнаты
• Страница магазина (главный архив): Отобразить только категории, ценовой диапазон, избранные бренды

Текущее ограничение: Все опции фильтрации остаются глобальными, даже после выбора пользователем категории, что приводит к захламлению интерфейса неуместными фильтрами.

Что вы узнаете:

1. Как включить зависимые/условные фильтры (фильтры обновляются на основе выбора)
2. Как отображать разные фильтры для каждой категории товаров
3. Как создавать пользовательские наборы фильтров для страницы магазина
4. Как использовать Widget Logic для расширенного управления видимостью

Решение 1: Включение зависимой фильтрации (AJAX Redraw)

Первый шаг — включение перерисовки AJAX для формы, которая динамически обновляет фильтры при выборе пользователями.

Для виджетов:

1. Перейдите в Внешний вид → Виджеты
2. Найдите свой виджет WOOF
3. Включите опцию «Перерисовка формы AJAX»

Это позволяет фильтрам автоматически обновляться после каждого выбора, отображая только релевантные опции.

Для шорткодов:

Добавьте ajax_redraw атрибут к вашему шорткоду WOOF:

[woof ajax_redraw="1"]

Что это делает:

• Когда пользователь выбирает "Колесо" → другие фильтры автоматически обновляются
• Отображаются только типы подкатегорий, материалы, цвета, доступные для "Колеса"
• Уменьшает беспорядок, скрывая неуместные опции

Документация: https://products-filter.com/shortcode/woof

Решение 2: Видимость фильтров на основе категорий (пользовательский шорткод)

Это решение создает динамический шорткод, который отображает разные фильтры в зависимости от текущей категории товаров.

Шаг 1: Создание пользовательского шорткода

Добавьте этот код в свой дочерний файл темы 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"]');
});

Шаг 2: Использование шорткода

Замените свой существующий [woof] шорткод на:

[woof_dynamic]

Поместите этот шорткод в:

• Области виджетов (виджет Текст/HTML)
• Блоки конструктора страниц (Elementor, Divi и т. д.)
• Файлы шаблонов темы: <?php echo do_shortcode('[woof_dynamic]'); ?>

Шаг 3: Настройка ваших категорий

Обновите $filters_map массив с вашими фактическими:

• Слаги категорий (например, 'wheel', 'electronics')
• Слаги атрибутов (например, 'pa_brand', 'pa_size')

Поиск ваших слагов:

Слаги категорий:

• Go to Товары → Категории
• Наведите курсор на название категории
• Посмотрите на URL: ...tag_ID=123&taxonomy=product_cat&post_type=product
• Или отредактируйте категорию и посмотрите на поле "слаг"

Слаги атрибутов:

• Go to Товары → Атрибуты
• Они начинаются с pa_ за которыми следует название атрибута
• Примеры: pa_color, pa_size, pa_brand, pa_material

Решение 3: Пользовательские фильтры для страницы магазина

Основная страница магазина WooCommerce требует другого подхода, поскольку это не архив категории.

Комбинированное решение: Страница магазина + Страницы категорий

Этот код обрабатывает как страницу магазина, так и отдельные страницы категорий:

/**
 * 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"]');
});

Что делает этот код:

1. На странице магазина: Отображаются только фильтры Категории, Цвет и Цена
2. На страницах категорий: Отображаются фильтры, специфичные для категории, из сопоставления
3. На других страницах: Отображаются фильтры по умолчанию

Настройка фильтров страницы магазина: Измените эту строку, чтобы отображать другие фильтры на странице магазина:

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

Доступные параметры:

• tax_only="product_cat,pa_brand" – Показывать только эти таксономии
• by_price="1" – Показывать фильтр ценового диапазона
• by_only="product_cat,pa_brand" – Альтернатива tax_only
• ajax_redraw="1" – Включить динамические обновления

Решение 4: Widget Logic для условной видимости

Если вы предпочитаете использовать виджеты вместо шорткодов, вы можете контролировать видимость виджетов с помощью условной логики.

Шаг 1: Установите плагин Widget Logic

Выберите один из этих плагинов:

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

Шаг 2: Создайте несколько виджетов WOOF

1. Go to Appearance → Widgets
2. Добавьте несколько виджетов WOOF в свою боковую панель
3. Настройте каждый виджет с разными фильтрами

Шаг 3: Добавьте условную логику

Для каждого виджета добавьте условия видимости:

Показывать только для категории Wheel:

is_product_category('wheel')

Показывать только для категории Lingerie:

is_product_category('lingerie')

Показывать только на странице магазина:

is_shop() AND !is_product_category()

Показывать в нескольких категориях:

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

Показывать везде, кроме страницы магазина:

!is_shop()

Показывать в категориях Electronics или Computers:

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

Реальные примеры

Пример 1: Магазин товаров для взрослых

$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'],
];

Пример 2: Магазин электроники

$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'],
];

Пример 3: Магазин модной одежды

$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'],
];

Пример 4: Магазин мебели

$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'],
];

Расширенная настройка: Включить цену и категории

Если вы хотите показать ценовой диапазон и категории в дополнение к атрибутам:

// 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"]');
}

Объяснение параметров:

• product_cat – Отображает фильтр категорий для детализации
• by_price="1" – Отображает ползунок ценового диапазона
• ajax_redraw="1" – Динамически обновляет фильтры

Устранение неполадок

Фильтры не обновляются динамически

Проблема: Фильтры остаются статичными после выбора
Решение:

• Убедитесь, что ajax_redraw="1" присутствует в вашем шорткоде
• Включите «AJAX перерисовка формы» в настройках виджета
• Проверьте консоль JavaScript на наличие ошибок

Неправильные фильтры отображаются в категории

Problem: Категория показывает некорректный набор фильтров
Solution:

• Проверьте, правильный ли слаг категории (проверьте URL или настройки категории)
• Используйте строчные буквы в $filters_map массиве
• Проверьте, существует ли категория в вашем сопоставлении

Фильтры вообще не появляются

Problem: На странице не видно ни одного фильтра
Solution:

• Убедитесь, что ярлыки атрибутов начинаются с pa_ (например, pa_color not color)
• Проверьте, назначены ли атрибуты товарам в этой категории
• Используйте [woof] временно, чтобы увидеть, работает ли базовый шорткод

Страница магазина показывает фильтры категорий

Problem: На странице магазина отображается неверный набор фильтров
Solution:

• Проверьте is_shop() условие в вашем коде
• Убедитесь, что !is_product_category() включено
• Очистите все кэши (WordPress, сервер, браузер)

Не работают ярлыки атрибутов

Problem: Фильтры не отображаются для определенных атрибутов
Solution:

• Go to Products → Attributes чтобы найти правильные ярлыки
• Не забудьте использовать pa_ префикс (требование WooCommerce)
• Проверьте написание: pa_colour vs pa_color

Код не работает после добавления

Problem: Белый экран или ошибки после добавления кода
Solution:

• Проверьте ошибки синтаксиса PHP в журнале ошибок
• Убедитесь, что вы редактируете functions.php дочерней темы
• Убедитесь, что все скобки и кавычки закрыты
• Удалите код и добавляйте его обратно построчно

Соображения по производительности

Влияние AJAX-перерисовки:

• Каждый выбор вызывает AJAX-запрос
• Больше товаров = больше время ответа
• Решение: используйте кэширование и оптимизируйте базу данных

Несколько виджетов против шорткода:

• Виджеты: большее потребление памяти (загружаются все виджеты)
• Шорткод: более эффективен (загружается только один набор)
• Рекомендация: используйте подход со шорткодом

Крупные каталоги:

• Рассмотрите пагинацию в фильтрах
• Используйте ленивую загрузку для атрибутов
• Внедрите серверное кэширование

Альтернативные подходы

Использование нескольких шорткодов

Вместо одного динамического шорткода используйте несколько статических:

// 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"]

Затем используйте Widget Logic для отображения нужного шорткода на каждой странице.

Использование файлов шаблонов

Добавьте условную логику непосредственно в шаблон вашей темы:

<?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]');
}
?>

Итог

Problem: Одни и те же фильтры отображаются везде, загромождая интерфейс

Решение 1: Включите AJAX-перерисовку для зависимой фильтрации

Решение 2: Создайте [woof_dynamic] шорткод с отображением категорий

Решение 3: Добавьте обработку страницы магазина с минимальными фильтрами

Решение 4: Используйте Widget Logic для расширенного контроля видимости

Лучший подход: Объедините решения 2 + 3 для комплексной динамической фильтрации

Ключевой код:

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
});

Это создает профессиональный, удобный для пользователя опыт фильтрации, адаптированный к каждой категории товаров.