如何在自定义WooCommerce模板中添加产品属性筛选功能

嘿，我来帮你搞定这个WooCommerce产品筛选的问题！你已经有了基础的产品循环代码，接下来我们可以分几步添加属性筛选功能，让用户能按颜色、标签这些属性来过滤产品，全程不用依赖额外插件，纯代码实现：

第一步：添加筛选表单（放在产品循环上方） #

首先我们要在产品列表的顶部添加一个筛选表单，让用户能选择属性值。这里以颜色属性和产品标签为例，你可以根据自己的需求替换成其他属性：

<!-- 产品筛选表单 -->
<form method="get" class="product-filters">
    <!-- 颜色筛选下拉框 -->
    <div class="filter-group">
        <label for="color-filter">选择颜色:</label>
        <select name="color-filter" id="color-filter">
            <option value="">所有颜色</option>
            <?php
            // 获取当前分类下的颜色属性术语（pa_color是WooCommerce颜色属性的默认分类名，记得替换成你自己的属性slug）
            $color_terms = get_terms(array(
                'taxonomy' => 'pa_color',
                'hide_empty' => true,
                'meta_query' => array(
                    array(
                        'key' => 'product_cat',
                        'value' => $product_category,
                        'compare' => 'IN'
                    )
                )
            ));
            foreach ($color_terms as $term) {
                // 选中当前URL中对应的颜色值
                $selected = isset($_GET['color-filter']) && $_GET['color-filter'] == $term->slug ? 'selected' : '';
                echo '<option value="' . esc_attr($term->slug) . '" ' . $selected . '>' . esc_html($term->name) . '</option>';
            }
            ?>
        </select>
    </div>

    <!-- 产品标签筛选复选框 -->
    <div class="filter-group">
        <label>选择标签:</label>
        <?php
        $tag_terms = get_terms(array(
            'taxonomy' => 'product_tag',
            'hide_empty' => true,
            'meta_query' => array(
                array(
                    'key' => 'product_cat',
                    'value' => $product_category,
                    'compare' => 'IN'
                )
            )
        ));
        foreach ($tag_terms as $term) {
            // 选中当前URL中对应的标签值
            $checked = isset($_GET['tag-filter']) && in_array($term->slug, explode(',', $_GET['tag-filter'])) ? 'checked' : '';
            echo '<label><input type="checkbox" name="tag-filter[]" value="' . esc_attr($term->slug) . '" ' . $checked . '> ' . esc_html($term->name) . '</label>';
        }
        ?>
    </div>

    <!-- 提交按钮 -->
    <button type="submit" class="filter-submit">筛选产品</button>
    <!-- 重置按钮 -->
    <a href="<?php echo esc_url(get_permalink()); ?>" class="filter-reset">重置筛选</a>
</form>

第二步：修改WP_Query参数，整合筛选条件 #

接下来我们要把用户选择的筛选条件加到你的$args数组里，这样查询就能返回符合条件的产品：

<ul class="products">
<?php
// 初始化tax_query数组
$tax_query = array('relation' => 'AND');

// 处理颜色筛选条件
if (isset($_GET['color-filter']) && !empty($_GET['color-filter'])) {
    $tax_query[] = array(
        'taxonomy' => 'pa_color',
        'field'    => 'slug',
        'terms'    => sanitize_text_field($_GET['color-filter']),
    );
}

// 处理标签筛选条件
if (isset($_GET['tag-filter']) && !empty($_GET['tag-filter'])) {
    $tag_terms = array_map('sanitize_text_field', $_GET['tag-filter']);
    $tax_query[] = array(
        'taxonomy' => 'product_tag',
        'field'    => 'slug',
        'terms'    => $tag_terms,
        'operator' => 'IN'
    );
}

// 构建最终查询参数
$args = array(
    'post_type' => 'product',
    'product_cat' => $product_category,
    'tax_query' => $tax_query, // 加入筛选条件
);

$loop = new WP_Query($args);

if ($loop->have_posts()) {
    while ($loop->have_posts()): $loop->the_post();
        wc_get_template_part('content', 'product');
    endwhile;
} else {
    echo __('No products found');
}

wp_reset_postdata();
?>
</ul>

一些实用提示 #

• 替换属性分类名：比如pa_color是WooCommerce默认的颜色属性分类slug，如果你自己的属性slug是custom-color，记得改成对应的pa_custom-color（WooCommerce属性的分类名都是以pa_开头的）。
• 样式优化：你可以给筛选表单添加CSS样式，让它更美观，比如把复选框排成一行、调整间距等。
• 多属性逻辑：如果需要“或”逻辑的筛选（比如选红色或蓝色都能显示），只需要把tax_query里的relation改成OR即可。
• 安全处理：代码里用了sanitize_text_field()和esc_attr()、esc_html()来处理用户输入，避免XSS安全问题，这一点可不能忽略哦！

备注：内容来源于stack exchange，提问作者Oceandigitals