本文介绍在 WooCommerce 商品列表页（如商店首页、分类归档页）中，为目标商品（通过 ID 精确匹配）动态插入自定义徽章（如“Exclusive”）的完整实现方案，重点解决 woocommerce_before_shop_loop_item 钩子中 $product 对象不可用的问题。
本文介绍在 woocommerce 商品列表页（如商店首页、分类归档页）中，为目标商品（通过 id 精确匹配）动态插入自定义徽章（如“exclusive”）的完整实现方案，重点解决 `woocommerce_before_shop_loop_item` 钩子中 `$product` 对象不可用的问题。
在 WooCommerce 商品归档循环（archive loop）中，woocommerce_before_shop_loop_item 是一个常用钩子，用于在每个商品卡片渲染前插入内容（例如徽章、标签或提示）。但需注意：该钩子默认不向回调函数传递任何参数，因此直接声明形参 $product 会导致变量未定义或为空对象——这也是你遇到 Call to a member function get_id() on null 错误的根本原因。
正确的做法是使用 global $product 显式获取当前循环中的全局产品对象，并在操作前进行类型校验，确保其为有效的 WC_Product 实例：
function add_custom_badge_to_specific_product() {
global $product;
// 安全检查：确保 $product 存在且为 WC_Product 类型
if ( ! is_a( $product, 'WC_Product' ) ) {
return;
}
// 指定目标商品 ID（可替换为你的实际商品 ID）
$target_id = 123;
if ( $product->get_id() === $target_id ) {
// 输出 HTML 徽章（建议使用语义化、可样式化的 span 标签）
echo '<span class="product-badge product-badge-exclusive" aria-label="Exclusive product">Exclusive</span>';
}
}
add_action( 'woocommerce_before_shop_loop_item', 'add_custom_badge_to_specific_product', 10 );
? 关键说明与最佳实践：
- 执行时机：此钩子在
- 商品容器内、商品链接（）开始前触发，因此徽章会自然出现在商品图片/标题上方，紧邻销售徽章（Sale Badge），符合你的定位需求；
- CSS 样式建议：为 .product-badge-exclusive 添加如下基础样式，确保视觉突出且响应友好：
.product-badge-exclusive {
position: absolute;
top: 12px;
left: 12px;
background-color: #d32f2f;
color: white;
font-size: 12px;
font-weight: 700;
padding: 4px 8px;
border-radius: 3px;
z-index: 10;
text-transform: uppercase;
letter-spacing: 0.5px;
}
- 多商品支持扩展：若需为多个商品添加徽章，可将 $target_id 改为数组，并使用 in_array( $product->get_id(), $target_ids ) 判断；
- 性能与兼容性：该方案无需额外查询，仅依赖已加载的 $product 对象，轻量高效；兼容 WooCommerce 6.0+ 及主流主题（如 Storefront、Astra）；
- 避免 JS 替代方案：虽然原示例用了 <script> 输出，但<strong>强烈建议使用纯 HTML + CSS 实现徽章，以保障 SEO 可见性、无障碍访问（aria-label 已包含）及首屏渲染性能。</script>
最后，将上述 PHP 代码添加至子主题的 functions.php 文件中，或通过代码片段插件（如 Code Snippets）启用即可生效。修改后请清空对象缓存（如有），并刷新商品归档页验证效果。
