wordpress外贸建站教程：给woocommerce产品添加优惠角标

最近给一个wordpress B2C网站做维护时，他们想给woocommerce产品添加优惠角标，比如打折产品封面主图上显示这样能够更明显一些，提醒用户有优惠，可能有助于成交。

其实这是一个woocommerce中本身就有的功能，大多数主题一般也会集成这个功能。但客户的网站是修改过的，而且前后经过了多人修改，主题本身的优惠角标功能已经无效了。安全起见我不准备修改他们的主题设置，也不想再安装插件。所以使用下面的代码给产品详情页添加了一个文字角标。

// 在产品图片左上角显示“HOT”（仅限打折产品）
add_action('woocommerce_before_shop_loop_item_title', 'add_hot_badge_left', 10);
add_action('woocommerce_before_single_product_summary', 'add_hot_badge_left', 10);

function add_hot_badge_left() {
    global $product;
    
    // 检查产品是否存在且正在打折
    if ( $product && $product->is_on_sale() ) {
        echo '<div class="custom-badge hot-badge">HOT</div>';
    }
}

// 样式调整，位置在左上角
add_action('wp_head', function() {
    echo '<style>
    .custom-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        padding: 12px 20px;
        color: #fff;
        background-color: #D6524E;
        font-weight: bold;
        font-size: 18px;
        z-index: 999;
        border-radius: 3px;
    }
    /* 确保图片容器是相对定位 */
    .products .product, 
    .single-product .product,
    .product .product-image-link,
    .product .woocommerce-product-gallery__wrapper {
        position: relative;
    }
    </style>';
});

上面的代码中，【HOT】文字可以修改为其它任意内容，但不要太长，尽量简短一些。CSS样式代码那里可以自行修改字体大小、颜色、padding内距等。代码可以添加到 wp code插件或主题的functions.php文件中。

添加代码后显示效果如上图所示。

@media (max-width: 710px) {
    .custom-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        padding: 4px 5px;
        font-size: 10px;

    }
}

如果前端的代码中你设置了角标比较大，那么它在手机端的显示可能不是太好，可以使用上面的CSS代码修改一下移动端的角标大小。代码可以添加到网站的自定义设置，Additional CSS/额外CSS里面。

总结

本文针对的仅仅是少数情况，大多数情况应该是用不到上面代码的。如果要使用也请先备份网站，先在测试环境尝试吧。