WooCommerce Blocks产品交互钩子咨询：woocommerce_after_shop_loop_item无效

云上老周

2026-7-8

WooCommerce Blocks 产品交互可用钩子说明

传统的WooCommerce PHP循环钩子（比如woocommerce_after_shop_loop_item）不会在WooCommerce Blocks中触发，因为Blocks是基于React的前端组件，不运行经典模板的PHP循环逻辑。下面是几种可用的交互钩子类型：

一、JavaScript 前端钩子

WooCommerce Blocks提供了基于wp.hooks的前端过滤器和动作，用于修改产品渲染或交互逻辑：

woocommerce_blocks_product_list_item_html：过滤产品列表项的最终HTML，可在产品项前后插入自定义内容
woocommerce_blocks_product_grid_item_html：针对网格布局的产品项HTML做定制
woocommerce_blocks_product_data：修改产品列表中每个产品的前端渲染数据

示例代码（需放在主题的functions.php或自定义插件的JS文件中）：

wp.hooks.addFilter(
    'woocommerce_blocks_product_list_item_html',
    'my-custom-code/modify-product-item',
    function( html, product, args ) {
        // 在产品项末尾追加自定义内容
        return html + '<div class="custom-product-tag">新品上架</div>';
    }
);

二、PHP REST API 钩子

Blocks通过REST API获取产品数据，所以可以用以下钩子修改后端返回的产品信息：

woocommerce_rest_prepare_product_object：修改单个产品的REST响应数据，添加自定义字段或调整现有字段
woocommerce_rest_product_query：修改产品列表的查询条件，比如过滤特定分类、调整排序规则

示例代码（放在主题functions.php或自定义插件中）：

add_filter( 'woocommerce_rest_prepare_product_object', 'custom_add_product_rest_field', 10, 3 );
function custom_add_product_rest_field( $response, $product, $request ) {
    // 给产品REST响应添加自定义字段
    $response->data['custom_notice'] = get_post_meta( $product->get_id(), 'product_custom_notice', true );
    return $response;
}