WooCommerce后台新建订单添加商品模态框搜索结果如何加缩略图

开发者阿泽

2026-8-28

WooCommerce后台新建订单添加商品模态框默认效果

实现方法

直接用WooCommerce官方提供的公开过滤器就能实现，不需要改核心代码，兼容3.0及以上所有版本。
默认的商品搜索接口会自动剥离返回值里的HTML标签，所以首先要放开这个限制，再给每个搜索结果拼接上对应商品的缩略图，调整好样式不打乱原有布局就行。

把下面代码放到当前主题的functions.php文件，或者自定义功能插件里即可生效：

// 仅针对后台订单页的商品搜索请求，放开HTML标签剥离限制
add_filter('woocommerce_json_search_products_strip_tags', function($strip_tags){
    if (is_admin() && isset($_REQUEST['action']) && $_REQUEST['action'] === 'woocommerce_json_search_products') {
        return false;
    }
    return $strip_tags;
});

// 给搜索返回的商品项前追加对应缩略图
add_filter('woocommerce_json_search_found_products', function($products, $search_term, $search_limit){
    // 只在订单添加商品的搜索场景生效，不影响其他位置的商品搜索
    if (!is_admin() || !isset($_REQUEST['action']) || $_REQUEST['action'] !== 'woocommerce_json_search_products') {
        return $products;
    }

    foreach ($products as $product_id => $product_name) {
        $product = wc_get_product($product_id);
        if (!$product) continue;
        // 用32px尺寸缩略图，加基础样式对齐文字，避免破坏原有布局
        $thumbnail = $product->get_image('thumbnail', [
            'style' => 'width:32px;height:32px;object-fit:cover;margin-right:8px;vertical-align:middle;border-radius:2px;'
        ]);
        $products[$product_id] = $thumbnail . wp_kses_post($product_name);
    }

    return $products;
}, 10, 3);