如何在WooCommerce产品图片上添加价格比较网站最低价标识logo

代码不生效的核心原因 #

• PHP中单引号包裹的字符串不会解析内部变量，$sku会被原样输出，不会替换为真实的产品SKU
• 输出的HTML存在语法错误，a标签和href属性连写为ahref，浏览器无法正常识别
• 选用的woocommerce_after_single_product_summary钩子位于产品摘要模块后方，不符合你要在产品图片区域展示徽章的需求

正确实现代码 #

将以下代码添加到子主题的functions.php文件末尾即可：

add_action( 'woocommerce_product_thumbnails', 'add_prisjakt_price_badge', 15 );
function add_prisjakt_price_badge() {
    global $product;
    // 校验产品对象有效性及SKU是否存在，避免报错
    if ( ! is_a( $product, 'WC_Product' ) || empty( $product->get_sku() ) ) {
        return;
    }
    $sku = esc_attr( $product->get_sku() );
    $redirect_url = 'https://instore.prisjakt.nu/cheapest_redirect.php?id=' . $sku . '&f=123456';
    $badge_img_url = 'https://instore.prisjakt.nu/cheapest.php?id=' . $sku . '&f=123456';
    // style属性实现徽章浮动覆盖在图片左上角，可自行调整位置参数
    echo '<a href="' . esc_url( $redirect_url ) . '" target="_blank" style="position:absolute;top:10px;left:10px;z-index:10;">
    <img src="' . esc_url( $badge_img_url ) . '" alt="比价优惠徽章" loading="lazy">
    </a>';
}

注意事项 #

• 所有需要显示徽章的产品必须提前填写SKU，无SKU的产品不会展示该徽章
• 若徽章位置不符合预期，可调整style属性内的top/left/right/bottom参数修改位置，也可以调整钩子的优先级数值（代码中的15，数值越小展示位置越靠前）
• 代码添加完成后，清除站点缓存和浏览器缓存再测试效果

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