Як показувати різні фільтри для кожної категорії в WOOF (динамічне фільтрування)

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

Проблема

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

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

• Категорія Електроніка: Показати бренд, розмір екрану, сховище, ОЗУ
• Категорія одягу: Показати розмір, колір, матеріал, стиль
• Категорія "Меблі": Показати Матеріал, Колір, Розміри, Тип кімнати
• Сторінка магазину (головний архів): Показувати лише категорії, діапазон цін, бренди заFeatured

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

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

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 масив із вашим фактичним:

• Слагові назви категорій (наприклад, 'колесо', 'електроніка')
• Сלаги атрибутів (наприклад, ‘pa_brand’, ‘pa_size’)

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

ССЫЛКИ на категорії:

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

ССЫЛКИ на атрибути

• Перейти до Товари → Атрибути
• Вони починаються з 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/
• Показувати віджет за логікою: https://github.com/realmag777/Show-WordPress-Widget-by-Logic

 

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

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

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

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

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

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()

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

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

Неправильні фільтри, що показуються на категорії

Проблема: Категорія відображає неправильний набір фільтрів
Рішення:

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

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

Проблема: Фільтри не відображаються на сторінці
Рішення:

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

Сторінка магазину показує фільтри категорій

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

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

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

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

• Перейти до Товари → Атрибути щоб знайти правильні слюги
• Не забудьте використовувати pa_ префікс (вимога WooCommerce)
• Перевірте орфографію: pa_colour vs 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
});

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