如何按分类显示不同的 WooCommerce 筛选器（动态筛选）

了解如何根据产品分类显示不同的筛选器组合、创建依赖筛选以及为WooCommerce商店页面定制筛选器。

问题

默认情况下，WOOF 在所有页面显示相同的筛选器。但不同的产品分类往往需要不同的筛选选项：

示例场景：

电子产品分类：显示品牌、屏幕尺寸、存储、内存
服装分类：显示尺寸、颜色、材质、款式
家具分类：显示材质、颜色、尺寸、房间类型
商店页面（主归档页）：仅显示分类、价格范围、热门品牌

当前限制：即使选择了某个分类，所有筛选选项仍然是全局的，导致界面充斥着无关的筛选器。

你将学到：

如何启用依赖/条件筛选（根据选择动态更新筛选器）
如何按产品分类显示不同的筛选器
如何为商店页面创建自定义筛选组合
如何使用 Widget Logic 实现高级可见性控制

解决方案 1：启用依赖筛选（AJAX 重绘）

第一步是启用 AJAX 表单重绘，当用户进行选择时动态更新筛选器。

针对 Widget：

进入 外观 → 小工具
找到你的 WOOF 小工具
启用选项 “表单 AJAX 重绘”

这样筛选器会在每次选择后自动更新，仅显示相关选项。

针对简码：

在你的 WOOF 简码中添加 ajax_redraw 属性：

[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]

将简码放置在：

小工具区域（文本/HTML 小工具）
页面构建器模块（Elementor、Divi 等）
主题模板文件：<?php echo do_shortcode('[woof_dynamic]'); ?>

步骤 3：配置你的分类

更新 $filters_map 数组，填入实际值：

分类别名（例如：'wheel'、'electronics'）
属性别名（例如：'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"]');
});

代码作用：

在商店页面：仅显示分类、颜色和价格筛选器
在分类页面：根据映射显示分类专属筛选器
在其他页面：显示默认筛选器

自定义商店页面筛选器：修改以下代码行，在不同商店页面上显示不同筛选器：

[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 小工具

进入 外观 → 小工具
在侧边栏中添加多个 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"
在小工具设置中启用“表单 AJAX 重绘”
检查 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 请求
产品越多，响应时间越长
解决方案：使用缓存并优化数据库

多个小工具 vs 简码：

小工具：内存占用更高（所有小工具都加载）
简码：更高效（仅加载一组）
建议：使用简码方式

大型产品目录：

考虑在筛选器中启用分页
对属性使用懒加载
实现服务器端缓存

替代方案

使用多个简码

不采用单个动态简码，而是使用多个静态简码：

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

这为用户打造了专业、友好的筛选体验，量身定制于每个产品分类。

问题