Как показывать разные фильтры для каждой категории в WOOF (динамическая фильтрация)
Узнайте, как показывать разные наборы фильтров в зависимости от категории товаров, создать зависимую фильтрацию и настроить фильтры для страницы магазина WooCommerce.
Проблема
По умолчанию WOOF показывает одинаковые фильтры на всех страницах. Однако разным категориям товаров часто нужны разные опции фильтра:
Примеры сценариев:
- Категория электроники: Показывать Бренд, Размер экрана, Память, ОЗУ
- Категория одежды: Показывать Размер, Цвет, Материал, Стиль
- Категория мебели: Показывать Материал, Цвет, Размеры, Тип комнаты
- Страница магазина (главный архив): Показывать только Категории, Диапазон цены, Рекомендуемые бренды
Текущее ограничение: Все опции фильтра остаются глобальными, даже после выбора пользователем категории, из-за чего интерфейс перегружен нерелевантными фильтрами.
Что вы узнаете:
- Как включить зависимую/условную фильтрацию (фильтры обновляются в зависимости от выбора)
- Как показывать разные фильтры для каждой категории товаров
- Как создать собственные наборы фильтров для страницы магазина
- Как использовать Widget Logic для расширенного управления видимостью
Решение 1: включить зависимую фильтрацию (AJAX Redraw)
Первый шаг — включить перерисовку формы через AJAX, которая динамически обновляет фильтры при выборе пользователем.
Для виджетов:
- Перейдите в Appearance → Widgets
- Найдите ваш виджет WOOF
- Включите опцию “Form AJAX redrawing”
Это заставляет фильтры автоматически обновляться после каждого выбора, показывая только релевантные опции.
Для шорткодов:
Добавьте атрибут ajax_redraw в ваш шорткод WOOF:
[woof ajax_redraw="1"]
Что это делает:
- Когда пользователь выбирает “Wheel” → другие фильтры автоматически обновляются
- Показывает только подтипы, материалы, цвета, доступные для 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]
Разместите этот шорткод в:
- Областях виджетов (виджет Text/HTML)
- Блоках конструктора страниц (Elementor, Divi и т.д.)
- Файлах шаблонов темы:
<?php echo do_shortcode('[woof_dynamic]'); ?>
Шаг 3: настройте ваши категории
Обновите массив $filters_map вашими фактическими:
- Slug категорий (например, ‘wheel’, ‘electronics’)
- Slug атрибутов (например, ‘pa_brand’, ‘pa_size’)
Как найти ваши slug:
Slug категорий:
- Перейдите в Products → Categories
- Наведите курсор на название категории
- Посмотрите на URL:
...tag_ID=123&taxonomy=product_cat&post_type=product - Или отредактируйте категорию и посмотрите на поле slug
Slug атрибутов:
- Перейдите в Products → Attributes
- Они начинаются с
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"]');
});
Что делает этот код:
- На странице магазина: Показывает только фильтры Категорий, Цвета и Цены
- На страницах категорий: Показывает фильтры, специфичные для категории, из карты соответствия
- На других страницах: Показывает фильтры по умолчанию
Настройка фильтров страницы магазина: Измените эту строку, чтобы показывать другие фильтры на странице магазина:
[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_onlyajax_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
- Перейдите в Appearance → Widgets
- Добавьте несколько виджетов WOOF в сайдбар
- Настройте каждый виджет с разными фильтрами
Шаг 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"присутствует в шорткоде - Включите “Form AJAX redrawing” в настройках виджета
- Проверьте консоль JavaScript на наличие ошибок
Неправильные фильтры показываются на категории
Проблема: Категория показывает неправильный набор фильтров
Решение:
- Убедитесь, что slug категории правильный (проверьте URL или настройки категории)
- Используйте нижний регистр в массиве
$filters_map - Проверьте, есть ли категория в вашей карте соответствия
Фильтры вообще не появляются
Проблема: Никаких фильтров не видно на странице
Решение:
- Убедитесь, что slug атрибутов начинаются с
pa_(например,pa_color, а неcolor) - Проверьте, привязаны ли атрибуты к товарам в этой категории
- Временно используйте
[woof], чтобы проверить, работает ли базовый шорткод
Страница магазина показывает фильтры категории
Проблема: Страница магазина показывает неправильный набор фильтров
Решение:
- Убедитесь, что условие
is_shop()стоит первым в вашем коде - Проверьте, включено ли
!is_product_category() - Очистите все кэши (WordPress, сервер, браузер)
Slug атрибутов не работают
Проблема: Фильтры не показываются для конкретных атрибутов
Решение:
- Перейдите в Products → Attributes, чтобы найти правильные slug
- Не забывайте использовать префикс
pa_(требование WooCommerce) - Проверьте правописание:
pa_colourпротивpa_color
Код не работает после добавления
Проблема: Белый экран или ошибки после добавления кода
Решение:
- Проверьте синтаксические ошибки PHP в логе ошибок
- Убедитесь, что вы редактируете functions.php дочерней темы
- Убедитесь, что все скобки и кавычки закрыты
- Удалите код и добавляйте его обратно построчно
Особенности производительности
Влияние AJAX redraw:
- Каждый выбор запускает 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 redraw для зависимой фильтрации
Решение 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
});
Это создаёт профессиональный, удобный опыт фильтрации, адаптированный под каждую категорию товаров.