如何为 WooCommerce 产品图片统一添加“NEW”徽章并排除特定分类-php教程-PHP中文网

如何为 WooCommerce 产品图片统一添加“NEW”徽章并排除特定分类

本文介绍如何通过单一函数在商品列表页和单产品页自动显示“new”徽章，并支持按产品分类（如 sale）灵活排除，避免重复代码，提升可维护性。

本文介绍如何通过单一函数在商品列表页和单产品页自动显示“new”徽章，并支持按产品分类（如 sale）灵活排除，避免重复代码，提升可维护性。

在 WooCommerce 主题或子主题的 functions.php 文件中，推荐使用一个函数 + 多个钩子的方式实现徽章的跨页面统一管理。这样不仅逻辑清晰、便于后期维护（如调整天数、文案或样式），还能避免因钩子冲突或条件判断冗余导致的显示异常。

✅ 推荐实现方案

以下代码将“NEW”徽章同时注入商品列表页（如首页、分类页）和单产品页顶部标题区域，并智能跳过指定分类（例如 sale、clearance 等）下的产品：

function new_badge_shop_page() {
    global $product;

    // 【关键】排除特定分类：支持多个分类 slug，区分大小写，需确保分类存在
    if ( has_term( array( 'sale', 'clearance', 'demo' ), 'product_cat', $product->get_id() ) ) {
        return;
    }

    $newness_days = 270; // 新品有效期：270 天（约 9 个月）
    $created      = strtotime( $product->get_date_created() );

    // 判断是否在新品有效期内（创建时间 > 当前时间 - 270 天）
    if ( time() - ( 60 * 60 * 24 * $newness_days ) ' . esc_html__( 'N E W', 'woocommerce' ) . '';
    }
}
// 注入商品列表页（如 shop 页面、分类归档页）
add_action( 'woocommerce_before_shop_loop_item_title', 'new_badge_shop_page', 3 );
// 注入单产品页（位于产品标题下方、价格上方，默认优先级 9）
add_action( 'woocommerce_single_product_summary', 'new_badge_shop_page', 9 );

⚠️ 注意事项与最佳实践

分类检查必须传 $product->get_id()：has_term() 在循环外调用时需显式传入产品 ID，否则可能因全局 $post 不准确而失效（你原代码中遗漏此参数，是未生效的主因）。
分类 slug 需准确匹配：请前往「产品 → 分类目录」确认目标分类的 slug（如 sale 而非 Sale 或 On Sale），大小写敏感。
钩子位置说明：
- woocommerce_before_shop_loop_item_title：适用于所有循环中的商品卡片，徽章将显示在缩略图上方；
- woocommerce_single_product_summary：默认插入在 h1.product_title 之后、.price 之前，视觉上紧贴标题——若需调整位置，可改用 woocommerce_before_single_product_summary（更靠上）或 woocommerce_product_thumbnails（缩略图区域）等钩子。

前端样式建议（CSS 示例）：

.itsnew {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ff6b6b;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
}
/* 确保徽章在图片上正常显示 */
.woocommerce ul.products li.product,
.woocommerce div.product {
    position: relative;
}