如何在WooCommerce商品循环中按自定义商品属性筛选商品？

一、基础配置确认 #

首先确保你的自定义商品属性已正确设置：

• 在WooCommerce后台创建属性时，勾选**「用于存档/筛选」**选项，让属性值以分类法形式存储，支持查询调用
• 确认WordPress数据库采用UTF-8mb4编码，保证ü、ß这类特殊字符能正常存储和读取

二、后端查询修改（适配特殊字符） #

使用pre_get_posts钩子拦截商品循环查询，解码URL传递的特殊字符参数，确保查询匹配准确：

add_action('pre_get_posts', 'custom_attr_filter_loop_query');
function custom_attr_filter_loop_query($query) {
    // 仅作用于前台主商品查询（商城页、分类页、标签页）
    if (!is_admin() && $query->is_main_query() && (is_shop() || is_product_category() || is_product_tag())) {
        $target_attr = 'custom_attribute'; // 替换为你的自定义属性slug
        $selected_value = isset($_GET[$target_attr]) ? urldecode($_GET[$target_attr]) : '';

        if (!empty($selected_value)) {
            $meta_query = $query->get('meta_query', []);
            $meta_query[] = [
                'key' => "pa_{$target_attr}", // WooCommerce属性元键固定以pa_开头
                'value' => $selected_value,
                'compare' => '='
            ];
            $query->set('meta_query', $meta_query);
        }
    }
}

三、前端筛选控件实现 #

在商品循环上方添加筛选下拉框，自动加载属性的所有可选值（包含特殊字符），同时保留当前页面的其他查询参数：

add_action('woocommerce_before_shop_loop', 'custom_attr_filter_control');
function custom_attr_filter_control() {
    $target_attr = 'custom_attribute'; // 替换为你的自定义属性slug
    $attribute = wc_get_attribute($target_attr);
    if (!$attribute) return;

    // 获取该属性下关联商品的所有值
    $terms = get_terms([
        'taxonomy' => "pa_{$target_attr}",
        'hide_empty' => true,
        'orderby' => 'name',
        'order' => 'ASC'
    ]);
    if (empty($terms)) return;

    // 输出筛选表单
    $shop_url = esc_url(woocommerce_get_page_permalink('shop'));
    echo "<form method='get' action='{$shop_url}'>";
    
    // 保留现有查询参数（如分类、排序条件）
    foreach ($_GET as $key => $value) {
        if ($key !== $target_attr && !empty($value)) {
            echo "<input type='hidden' name='".esc_attr($key)."' value='".esc_attr($value)."'>";
        }
    }

    echo "<select name='{$target_attr}' onchange='this.form.submit()'>";
    echo "<option value=''>筛选{$attribute->name}</option>";
    foreach ($terms as $term) {
        $selected = (isset($_GET[$target_attr]) && urldecode($_GET[$target_attr]) === $term->name) ? 'selected' : '';
        // 对属性值URL编码，避免特殊字符传递异常
        $encoded_value = esc_attr(urlencode($term->name));
        echo "<option value='{$encoded_value}' {$selected}>".esc_html($term->name)."</option>";
    }
    echo "</select>";
    echo "</form>";
}

四、关键注意事项 #

• 字符编码适配：通过urldecode解码URL参数、urlencode编码传递值，确保特殊字符在URL和数据库查询中匹配一致
• 属性元键规则：WooCommerce自定义属性的元键统一为pa_+属性slug，不要写错格式
• 数据库编码检查：老站点需将wp_postmeta等相关表的编码改为UTF-8mb4，避免特殊字符乱码

内容的提问来源于stack exchange，提问作者Mr. Jo