Як показувати різні фільтри WooCommerce за категоріями (Динамічна фільтрація)

Дізнайтеся, як відображати різні набори фільтрів на основі категорій продуктів, створювати залежні фільтри та налаштовувати фільтри для сторінки магазину WooCommerce.

Проблема

За замовчуванням WOOF показує однакові фільтри на всіх сторінках. Однак для різних категорій продуктів часто потрібні різні параметри фільтра:

Приклади сценаріїв:

• Категорія електроніки:Показати бренд, розмір екрана, пам'ять, оперативну пам'ять
• Категорія одягу:Показати розмір, Color, матеріал, стиль
• Категорія меблів:Показати матеріал, Color, розміри, тип приміщення
• Сторінка магазину (головний архів):Показати лише категорії, ціновий діапазон, рекомендовані бренди

Поточне обмеження:Усі параметри фільтрів залишаються глобальними навіть після того, як користувач вибирає категорію, через що інтерфейс захаращений нерелевантними фільтрами.

Що ви дізнаєтеся:

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

Рішення 1: увімкніть залежну фільтрацію (AJAX перемалювати)

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

Для віджетів:

1. Перейти доВигляд → Віджети
2. Знайдіть свій віджет WOOF
3. Увімкніть опцію“Form AJAX redrawing”

Завдяки цьому фільтри автоматично оновлюються після кожного вибору, показуючи лише відповідні параметри.

Для коротких кодів:

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

[woof ajax_redraw="1"]

Що це робить:

• Коли користувач вибирає «Колесо» → інші фільтри автоматично оновлюються
• Показує лише підтипи, матеріали, Color, доступні для Wheel
• Зменшує безлад, приховуючи невідповідні параметри

Документація: 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масив із вашим фактичним:

• Категорія слимаки(наприклад, «колесо», «електроніка»)
• Атрибут слимаків(наприклад, "pa_brand", "pa_size")

Пошук ваших слимаків:

Категорія слимаків:

• Перейти доТовари → Категорії
• Наведіть курсор на назву категорії
• Подивіться на URL:...tag_ID=123&taxonomy=product_cat&post_type=product
• Або відредагуйте категорію та подивіться на поле слимака

Слики атрибутів:

• Перейти доТовари → Атрибути
• Вони починаються з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. На сторінці магазину:Показує лише фільтри категорій, Color і ціни
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: Логіка віджетів для умовної видимості

Якщо ви віддаєте перевагу використанню віджетів замість коротких кодів, ви можете керувати видимістю віджетів за допомогою умовної логіки.

Крок 1. Встановіть плагін Widget Logic

Виберіть один із цих плагінів:

• Логіка віджетів: https://wordpress.org/plugins/widget-logic/
• Показати віджет за логікою: https://github.com/realmag777/Show-WordPress-Widget-by-Logic

Крок 2: Створіть декілька віджетів WOOF

1. Перейти доВигляд → Віджети
2. Додайте кілька віджетів WOOF на бічну панель
3. Налаштуйте кожен віджет різними фільтрами

Крок 3: Додайте умовну логіку

Для кожного віджета додайте умови видимості:

Показати лише в категорії колеса:

is_product_category('wheel')

Показати тільки в категорії Нижня білизна:

is_product_category('lingerie')

Показати лише на сторінці магазину:

is_shop() AND !is_product_category()

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

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

Показувати всюди, крім сторінки магазину:

!is_shop()

Показати в категоріях «Електроніка» або «Комп’ютери»:

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

Advanced: Включити ціну та категорії

Якщо ви хочете показати діапазон цін і категорії на додаток до атрибутів:

// 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"у вашому короткому коді
• Увімкніть «Form AJAX redrawing» у налаштуваннях віджета
• Перевірте консоль JavaScript на наявність помилок

У категорії відображаються неправильні фільтри

проблема:Категорія показує неправильний набір фільтрів
рішення:

• Перевірте правильність слагана категорії (перевірте параметри URL-адреси чи категорії)
• Використовуйте малі літери в$filters_mapмасив
• Перевірте, чи існує категорія у вашому відображенні

Фільтри взагалі не з’являються

проблема:На сторінці немає фільтрів
рішення:

• Перевірте, що слики атрибутів починаються зpa_(наприклад,pa_colorніcolor)
• Перевірте, чи атрибути призначено продуктам у цій категорії
• використання[woof]тимчасово, щоб перевірити, чи працює базовий шорткод

На сторінці магазину показано фільтри категорій

проблема:На сторінці магазину показано неправильний набір фільтрів
рішення:

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

Слаги атрибутів не працюють

проблема:Фільтри не відображаються для певних атрибутів
рішення:

• Перейти доТовари → Атрибутизнайти правильні слимаки
• Пам'ятайте про використанняpa_префікс (вимога WooCommerce)
• Перевірте орфографію:pa_colourпротиpa_color

Код не працює після додавання

проблема:Білий екран або помилки після додавання коду
рішення:

• Перевірте синтаксичні помилки 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]');
}
?>

Резюме

проблема:Скрізь показуються однакові фільтри, захаращений інтерфейс

Рішення 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
});

Це створює професійну, зручну систему фільтрації, адаптовану до кожної категорії продукту.