WooCommerce：如何在订单「添加产品」下拉框中为产品名称加图片

针对你提到的admin-ajax.php?term=MyTestQuery&action=woocommerce_json_search_products_and_variations请求，有两种常用方式自定义响应，解决产品名称相似无图片的问题：

1. 使用过滤器修改现有搜索结果 #

WooCommerce提供了woocommerce_json_search_found_products过滤器，可直接修改返回的产品数组，给每个结果添加图片信息：

add_filter( 'woocommerce_json_search_found_products', 'custom_add_product_image_to_search_results', 10, 2 );
function custom_add_product_image_to_search_results( $products, $term ) {
    foreach ( $products as &$product ) {
        $product_obj = wc_get_product( $product['id'] );
        if ( !$product_obj ) continue;
        
        // 获取产品缩略图URL
        $image_url = $product_obj->get_image_url( 'thumbnail' );
        // 把图片嵌入显示标签（适配select2渲染）
        $product['label'] = sprintf(
            '<img src="%s" alt="%s" style="width:40px; height:auto; margin-right:8px;" />%s',
            esc_url( $image_url ),
            esc_attr( $product['label'] ),
            $product['label']
        );
    }
    return $products;
}

这段代码会遍历搜索到的产品，获取缩略图并将其插入到结果的显示标签中，多数情况下WooCommerce使用的select2下拉组件会自动渲染HTML内容，直接显示图片。

2. 完全接管AJAX请求处理 #

如果需要更深度的自定义（比如调整搜索规则、返回字段），可以直接替换默认的AJAX处理逻辑：

add_action( 'wp_ajax_woocommerce_json_search_products_and_variations', 'custom_overwrite_product_search_ajax', 9 );
function custom_overwrite_product_search_ajax() {
    // 移除默认处理函数
    remove_action( 'wp_ajax_woocommerce_json_search_products_and_variations', 'woocommerce_json_search_products_and_variations' );
    
    // 获取搜索关键词
    $term = isset( $_GET['term'] ) ? wc_clean( $_GET['term'] ) : '';
    
    // 自定义产品查询
    $products = wc_get_products( array(
        's' => $term,
        'limit' => 20,
        'post_type' => array( 'product', 'product_variation' ),
        'status' => 'publish'
    ) );
    
    $results = array();
    foreach ( $products as $product ) {
        $image_url = $product->get_image_url( 'thumbnail' );
        $results[] = array(
            'id' => $product->get_id(),
            'label' => sprintf(
                '<img src="%s" alt="%s" style="width:40px;" />%s',
                esc_url( $image_url ),
                esc_attr( $product->get_name() ),
                $product->get_name()
            ),
            'value' => $product->get_name()
        );
    }
    
    wp_send_json( $results );
    wp_die();
}

注意事项 #

• 确保图片尺寸合适，避免下拉框布局混乱，推荐使用WooCommerce默认的thumbnail尺寸。
• 所有输出的URL和文本都要经过转义（如esc_url、esc_attr），防止XSS安全风险。
• 若前端下拉组件不支持HTML渲染，可能需要修改对应的JS代码，监听下拉项渲染事件手动插入图片。

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