如何让WooCommerce商品缩略图上显示‘新品’文本而非图上方？

嘿，这个问题我熟！要把ACF标记的「新品」标签叠加到商品缩略图上，核心是用CSS定位配合WooCommerce的模板/钩子来实现，我给你一步步拆解：

第一步：确认你的ACF字段设置 #

首先，假设你已经在ACF里创建了用来标记新品的字段——比如一个布尔型字段（字段名示例：is_new_product），勾选后就标记商品为新品；如果是文本字段（比如字段值直接填「新品」），后面的判断逻辑稍微调整就行。

第二步：插入新品标签的代码 #

你有两种方式添加标签的HTML结构，选适合你的就行：

方式一：用WooCommerce钩子（推荐，不用改模板） #

在你的主题（最好是子主题）的functions.php文件末尾添加这段代码：

add_action('woocommerce_before_shop_loop_item_title', 'render_new_product_badge', 5);
function render_new_product_badge() {
    global $product;
    // 替换成你自己的ACF字段名
    $is_new = get_field('is_new_product', $product->get_id());
    
    // 如果是文本字段，就改成 if ($is_new === '新品')
    if ($is_new) {
        echo '<span class="new-badge">新品</span>';
    }
}

这里把钩子优先级设为5，确保标签能插入到缩略图容器的范围内，方便后续定位。

方式二：直接修改WooCommerce模板 #

如果你的主题已经自定义了WooCommerce模板，找到主题目录下的woocommerce/content-product.php，找到包裹商品缩略图的容器（通常类名是woocommerce-loop-product__thumbnail），在容器内部插入这段代码：

<?php
global $product;
$is_new = get_field('is_new_product', $product->get_id());
if ($is_new) {
?>
    <span class="new-badge">新品</span>
<?php } ?>

注意：修改模板请用子主题，避免主题更新后代码丢失！

第三步：添加CSS实现叠加效果 #

最后在主题的自定义CSS面板（或者子主题的style.css）里添加样式，让标签定位到图片上：

/* 给缩略图容器设置相对定位，作为标签的定位基准 */
.woocommerce-loop-product__thumbnail {
    position: relative;
    overflow: hidden; /* 防止标签超出容器范围 */
}

/* 新品标签的样式，可根据你的网店风格调整 */
.new-badge {
    position: absolute;
    top: 8px; /* 距离图片顶部的距离 */
    left: 8px; /* 距离图片左侧的距离 */
    background-color: #e74c3c; /* 背景色，自己改 */
    color: #ffffff;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 2px;
    z-index: 10; /* 确保标签在图片上方显示 */
}

如果你的缩略图容器类名不是woocommerce-loop-product__thumbnail，用浏览器开发者工具查看后替换成对应的类名即可。

额外注意点 #

• 如果你的ACF字段是文本类型，记得把PHP里的判断条件改成if ($is_new === '新品')（匹配你设置的文本值）。
• 可以自由调整CSS里的top、left、颜色、字体大小等参数，适配你的网店设计。

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