给网站woocommerce产品添加多属性筛选功能 代码实现

今天分享一个在WordPress外贸建站中遇到的“硬骨头”：为首页打造一个强大的WooCommerce产品筛选器。

一开始以为这是个简单需求，毕竟产品页的筛选插件一抓一大把。但实际一做才发现是个“坑”：这些插件和主题功能几乎全都限定只能在产品存档页或详情页工作，根本无法在首页使用。我们试了一圈，结果都不理想。

这段经历让我明白，对于在WordPress网站非标准页面实现复杂的交互功能，尤其是针对WooCommerce，自定义代码开发往往是唯一可靠且灵活的路径。

代码参考

可能因为这是一个非常规的用户需求，所以没有这样的插件，但我们可以自己写一个插件，或者是代码，这里就把功能实现的代码给大家分享出来，大家可自行参考使用，但你直接拿去用肯定是不行的，要根据你自己的网站做相应的修改，这个就自己去研究吧。

// 注册自定义筛选表单功能和短代码 [product_search_form] 
function custom_product_search_form() {  
    // 获取产品分类  
    $categories = get_terms(array(  
        'taxonomy' => 'product_cat',  
        'hide_empty' => true,  
    ));  

    // 获取品牌  
    $brands = get_terms(array(  
        'taxonomy' => 'product_brands',  
        'hide_empty' => true,  
    ));  

    // 获取 Year 属性  
    $years = get_terms(array(  
        'taxonomy' => 'pa_years',  
        'hide_empty' => false,  
    ));  

    // 获取 Working Hour (H) 属性  
    $working_hours = get_terms(array(  
        'taxonomy' => 'pa_working-hour',  
        'hide_empty' => false,  
    ));  

    ob_start(); // 开启输出缓冲区  
    ?>  

    <form method="GET" action="<?php echo esc_url(home_url('/')); ?>" target="_blank" style="display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;">  
        <input type="hidden" name="post_type" value="product">  
        <input type="hidden" name="s" value=""> <!-- 用于存放搜索关键字 -->  

        <div class="filter-field">  
            <label for="equipment" style="color: #ffffff; font-weight: bold;">EQUIPMENT</label>  
            <select name="equipment" id="equipment" style="background-color: #ffffff20; color: #ffffff95; height: 40px; border: none; box-sizing: border-box; padding: 5px;">   
                <option value="">All Equipment</option>  
                <?php foreach ($categories as $category) : ?>  
                    <option value="<?php echo esc_attr($category->term_id); ?>">  
                        <?php echo esc_html($category->name); ?>  
                    </option>  
                <?php endforeach; ?>  
            </select>  
        </div>  

        <div class="filter-field">  
            <label for="brand" style="color: #ffffff; font-weight: bold;">BRAND</label>  
            <select name="brand" id="brand" style="background-color: #ffffff20; color: #ffffff95; height: 40px; border: none; box-sizing: border-box; padding: 5px;">  
                <option value="">All</option>  
                <?php foreach ($brands as $brand) : ?>  
                    <option value="<?php echo esc_attr($brand->term_id); ?>">  
                        <?php echo esc_html($brand->name); ?>  
                    </option>  
                <?php endforeach; ?>  
            </select>  
        </div>  

        <div class="filter-field">  
            <label for="years" style="color: #ffffff; font-weight: bold;">YEARS</label>  
            <select name="years" id="years" style="background-color: #ffffff20; color: #ffffff95; height: 40px; border: none; box-sizing: border-box; padding: 5px;">  
                <option value="">All</option>  
                <?php foreach ($years as $year) : ?>  
                    <option value="<?php echo esc_attr($year->term_id); ?>">  
                        <?php echo esc_html($year->name); ?>  
                    </option>  
                <?php endforeach; ?>  
            </select>  
        </div>  

        <div class="filter-field">  
            <label for="working_hour" style="color: #ffffff; font-weight: bold;">WORKING HOUR(H)</label>  
            <select name="working_hour" id="working_hour" style="background-color: #ffffff20; color: #ffffff95; height: 40px; border: none; box-sizing: border-box; padding: 5px;">  
                <option value="">All</option>  
                <?php foreach ($working_hours as $hour) : ?>  
                    <option value="<?php echo esc_attr($hour->term_id); ?>">  
                        <?php echo esc_html($hour->name); ?>  
                    </option>  
                <?php endforeach; ?>  
            </select>  
        </div>  

        <button type="submit" style="background-color: #E04D0A; color: #ffffff; font-weight: bold; height: 40px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 5px 10px;">SEARCH EQUIPMENT</button>  
    </form>  

    <style>  
        .filter-field {  
            flex: 1; /* 使每个筛选框占据相同的空间 */  
            min-width: 150px; /* 最小宽度，可以根据需求调整 */  
        }  

        select {  
            width: 100%; /* 使下拉框全宽 */  
            padding: 5px; /* 设置内边距为5px */  
            border: none; /* 去掉边框 */  
            border-radius: 4px; /* 边角圆滑 */  
            height: 40px; /* 设置固定高度 */  
            box-sizing: border-box; /* 包含内边距和边框的高度计算 */  
        }  

        button {  
            padding: 5px 10px; /* 设置按钮的内边距 */  
            border: none; /* 去掉边框 */  
            border-radius: 4px; /* 边角圆滑 */  
            cursor: pointer; /* 鼠标指针效果 */  
            height: 40px; /* 设置固定高度 */  
            display: flex; /* 使按钮文本垂直居中 */  
            align-items: center; /* 垂直居中 */  
            justify-content: center; /* 水平居中 */  
        }  
    </style>  

    <?php  
    return ob_get_clean(); // 返回缓冲区内容并清空  
}  

// 注册短代码  
add_shortcode('product_search_form', 'custom_product_search_form');  

add_action('pre_get_posts', 'custom_product_search');  

function custom_product_search($query) {  
    if (!is_admin() && $query->is_main_query() && is_search() && isset($_GET['post_type']) && $_GET['post_type'] == 'product') {  
        // 获取表单数据  
        $equipment = isset($_GET['equipment']) ? $_GET['equipment'] : '';  
        $brand = isset($_GET['brand']) ? $_GET['brand'] : '';  
        $years = isset($_GET['years']) ? $_GET['years'] : '';  
        $working_hour = isset($_GET['working_hour']) ? $_GET['working_hour'] : '';  

        // 设置查询参数  
        $query->set('post_type', 'product'); // 限制为产品类型  

        $tax_query = array('relation' => 'AND'); // 添加relation参数以正确组合税务查询  

        if ($equipment) {  
            $tax_query[] = array(  
                'taxonomy' => 'product_cat',  
                'field' => 'term_id',  
                'terms' => $equipment,  
            );  
        }  

        if ($brand) {  
            $tax_query[] = array(  
                'taxonomy' => 'product_brands',   
                'field' => 'term_id',  
                'terms' => $brand,  
            );  
        }  

        if ($years) {  
            $tax_query[] = array(  
                'taxonomy' => 'pa_years',  
                'field' => 'term_id',  
                'terms' => $years,  
            );  
        }  

        if ($working_hour) {  
            $tax_query[] = array(  
                'taxonomy' => 'pa_working-hour',  
                'field' => 'term_id',  
                'terms' => $working_hour,  
            );  
        }  

        if (count($tax_query) > 1) { // 只有在有条件的时候才设置 tax_query  
            $query->set('tax_query', $tax_query);  
        }  
    }  
}

上面的代码应用成功后，我们可以通过[product_search_form]这个短代码在任意页面调用，如需修改样式，可以自行调整里面的CSS。