本文介绍如何通过单一函数为 WooCommerce 商品列表页和单商品页统一添加“NEW”徽章，并支持按产品分类（如 sale）智能排除，避免重复钩子与逻辑冗余。
本文介绍如何通过单一函数为 woocommerce 商品列表页和单商品页统一添加“new”徽章，并支持按产品分类（如 `sale`）智能排除，避免重复钩子与逻辑冗余。
在 WooCommerce 主题开发或定制中，为新品添加视觉标识（如 “N E W” 徽章）是提升用户感知的常用手段。为兼顾复用性与可维护性，推荐使用一个函数 + 多个钩子的方式，而非为不同页面单独编写逻辑。
✅ 统一处理多页面徽章显示
核心思路是：将徽章渲染逻辑封装为独立函数，再分别挂载到两个关键钩子上：
-
woocommerce_before_shop_loop_item_title：用于商品列表页（如分类页、搜索页）的图片上方； -
woocommerce_single_product_summary：用于单商品页，默认优先级为10，设为9可确保徽章出现在标题前（紧邻主图下方）。
function new_badge_shop_page() {
global $product;
// 【关键】排除指定分类：支持多个分类 slug，如 'sale'、'clearance' 等
if ( has_term( array( 'sale', 'clearance', 'outlet' ), 'product_cat', $product->get_id() ) ) {
return;
}
$newness_days = 270; // 新品有效期：270 天（约 9 个月）
$created = strtotime( $product->get_date_created() );
// 判断是否在新品时效范围内
if ( time() - ( 60 * 60 * 24 * $newness_days ) < $created ) {
echo '<span class="itsnew">' . esc_html__( 'N E W', 'woocommerce' ) . '</span>';
}
}
add_action( 'woocommerce_before_shop_loop_item_title', 'new_badge_shop_page', 3 );
add_action( 'woocommerce_single_product_summary', 'new_badge_shop_page', 9 );⚠️ 注意事项：
has_term()必须传入$product->get_id()作为第三个参数（尤其在循环外或非标准上下文中），否则可能因全局$post不准确导致判断失败；esc_html__()确保翻译安全与 XSS 防护，强烈建议保留；- 若需兼容古腾堡「产品区块」（Products Block），该方案同样生效，因其底层仍调用相同循环钩子。
? 样式建议（CSS）
为使徽章美观贴合图片左上角，可添加如下 CSS（放入主题 style.css 或自定义 CSS 区域）：
.itsnew {
position: absolute;
top: 12px;
left: 12px;
background: #ff6b6b;
color: white;
font-size: 12px;
font-weight: 700;
padding: 4px 10px;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
z-index: 10;
}
/* 列表页商品图容器需相对定位 */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce div.product .images {
position: relative;
}? 排查提示
- 若徽章未显示，请检查：① 产品创建时间是否满足
270天内；② 分类 slug 拼写是否完全一致（区分大小写与连字符）；③ 当前页面是否确实触发了对应钩子（如某些主题重写了single-product.php）； - 如需排除“子分类”，
has_term()默认支持继承，无需额外设置； - 若需动态配置天数或排除分类，建议改用
get_option()封装为可管理选项。
通过以上方式，您即可用一份简洁、健壮、易扩展的代码，实现跨页面新品徽章的统一控制与精细化分类过滤。
