WooCommerce产品标签插件：如何让标签在小部件区块中显示？

你当前使用的woocommerce_before_shop_loop_item_title和woocommerce_product_thumbnails钩子仅适配传统WooCommerce循环（商店页面）和产品详情页的缩略图区域，而WooCommerce区块（包括小部件内的产品区块）属于块编辑器独立体系，这套钩子覆盖不到，因此标签无法在这些区块中渲染。

下面是针对性解决方案：

通用区块钩子方案 #

使用woocommerce_blocks_product_grid_item_html钩子，它可以修改所有产品网格类区块（包含小部件区块）的HTML输出，直接插入你的标签代码：

add_filter( 'woocommerce_blocks_product_grid_item_html', 'add_custom_tag_to_blocks', 10, 3 );
function add_custom_tag_to_blocks( $html, $data, $product ) {
    // 替换为你的标签HTML结构
    $custom_tag = '<div class="your-custom-product-tag">自定义标签内容</div>';
    // 将标签插入到产品图片容器前
    $html = str_replace( '<div class="wc-block-grid__product-image">', $custom_tag . '<div class="wc-block-grid__product-image">', $html );
    return $html;
}

特定区块精准适配 #

如果只需给某类小部件区块添加标签，比如最新产品、特色产品，可以使用区块专属的渲染钩子：

• 最新产品区块：render_block_woocommerce/product-new
• 特色产品区块：render_block_woocommerce/product-featured
• 促销产品区块：render_block_woocommerce/product-on-sale

以最新产品区块为例：

add_filter( 'render_block_woocommerce/product-new', 'add_tag_to_new_products_block', 10, 2 );
function add_tag_to_new_products_block( $block_content, $block ) {
    $custom_tag = '<div class="your-custom-product-tag">新品专属标签</div>';
    $block_content = str_replace( '<div class="wc-block-grid__product-image">', $custom_tag . '<div class="wc-block-grid__product-image">', $block_content );
    return $block_content;
}

额外注意事项 #

• 调整标签的CSS样式，适配区块布局，避免出现排版错乱
• 不同版本的WooCommerce Blocks可能HTML结构略有差异，测试时需根据实际结构调整替换节点
• 若使用旧版插件，钩子名称可能存在变动，建议查阅对应版本的官方文档

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