WooCommerce自定义搜索表单：如何添加产品属性筛选并实现查询

需求：制作一个包含产品属性选择项的自定义搜索表单，用户输入文本并选择产品属性值后，仅展示指定产品分类下的结果。已有基础代码，但不知道如何将产品属性术语（$terms）整合到表单中。

现有代码：

function custom_search( $form ) {

$terms = get_terms('pa_attributes');

$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/'  ) ) . '">
    <div>
        <label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
        <input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'Search within a category', 'woocommerce' ) . '" />
        <input type="hidden" name="post_type" value="product">
        <input type="hidden" name="taxonomy" value="product_cat">

        <!-- here: my_product_category is chosen -->
        <input type="hidden" name="term" value="my_product_category">

 <!-- HOW TO INCLUDE $terms ? -->


        <input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" />
        <input type="hidden" name="post_type" value="product" />
    </div>
</form>';

return $form;
}

解决方案 #

要把产品属性术语加入表单，需要两步：在表单中添加属性选择控件，然后修改搜索查询以应用属性筛选条件。

1. 修改表单函数，添加属性下拉选择框

首先优化get_terms的调用参数确保能获取所有属性术语，然后在表单中插入下拉选择框：

function custom_search( $form ) {
    // 获取产品属性术语，hide_empty=false确保显示所有术语
    $terms = get_terms( array(
        'taxonomy' => 'pa_attributes',
        'hide_empty' => false,
    ) );

    // 开始构建表单
    $form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/'  ) ) . '">
        <div>
            <label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
            <input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'Search within a category', 'woocommerce' ) . '" />
            
            <!-- 指定产品分类 -->
            <input type="hidden" name="post_type" value="product">
            <input type="hidden" name="taxonomy" value="product_cat">
            <input type="hidden" name="term" value="my_product_category">

            <!-- 产品属性选择下拉框 -->
            <select name="pa_attributes" id="pa_attributes">
                <option value="">' . __( 'Select Attribute', 'woocommerce' ) . '</option>';
                // 循环生成属性选项，保留选中状态
                foreach ( $terms as $term ) {
                    $selected = ( isset( $_GET['pa_attributes'] ) && $_GET['pa_attributes'] == $term->slug ) ? 'selected' : '';
                    $form .= '<option value="' . esc_attr( $term->slug ) . '" ' . $selected . '>' . esc_html( $term->name ) . '</option>';
                }
    $form .= '
            </select>

            <input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" />
        </div>
    </form>';

    return $form;
}
// 替换默认搜索表单
add_filter( 'get_search_form', 'custom_search' );

2. 添加查询修改钩子，应用属性筛选

默认WordPress搜索不会处理产品属性参数，需要用pre_get_posts钩子修改查询：

function custom_product_search_filter( $query ) {
    // 仅处理前台的产品搜索主查询
    if ( ! is_admin() && $query->is_search && $query->is_main_query() && isset( $query->query_vars['post_type'] ) && $query->query_vars['post_type'] == 'product' ) {
        // 如果用户选择了属性值，添加筛选条件
        if ( isset( $_GET['pa_attributes'] ) && ! empty( $_GET['pa_attributes'] ) ) {
            $tax_query = $query->get( 'tax_query' ) ?: array();
            $tax_query[] = array(
                'taxonomy' => 'pa_attributes',
                'field'    => 'slug',
                'terms'    => sanitize_text_field( $_GET['pa_attributes'] ),
            );
            $query->set( 'tax_query', $tax_query );
        }
    }
}
add_action( 'pre_get_posts', 'custom_product_search_filter' );

说明 #

• pa_attributes是产品属性的taxonomy名称，需与实际使用的属性slug保持一致；
• 下拉框的name属性必须和属性taxonomy名称一致，确保查询能正确识别；
• 代码保留了搜索后的选中状态，提升用户体验；
• pre_get_posts钩子仅修改前台主产品搜索查询，避免干扰后台或其他页面逻辑。

内容的提问来源于stack exchange，提问作者kabr