求助：如何在单个WooCommerce商品页面图片顶部显示自定义徽章

开发者阿泽

2026-8-17

解决WooCommerce单个商品页面图片顶部添加自定义徽章的问题

问题原因

你之前的代码无效是因为**woocommerce_before_single_product_summary是Action钩子，不是Filter钩子**——Filter需要返回值，而Action是直接输出内容，用add_filter绑定函数自然不会生效。

修正后的代码

1. 添加PHP代码（放到主题的`functions.php`或自定义插件中）

add_action('woocommerce_before_single_product_summary', 'custom_badge_for_single_product_image', 5);
function custom_badge_for_single_product_image() {
    // 输出徽章HTML
    echo '<div class="custom-product-badge">100% authentic</div>';
}

第三个参数5：控制钩子执行优先级，数值越小越先执行，确保徽章在商品图片之前输出。

2. 添加CSS样式（放到主题自定义CSS或`style.css`中）

要让徽章定位在图片顶部，需要用CSS绝对定位：

.single-product .woocommerce-product-gallery {
    position: relative; /* 作为徽章的定位容器 */
}
.custom-product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #ff0000;
    color: #fff;
    padding: 5px 12px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 10; /* 确保徽章在图片上方 */
}