如何在WooCommerce产品滑块中分别显示左右位置的折扣与促销徽章？

问题分析 #

你之前使用的woocommerce_sale_flash钩子是直接替换默认促销徽章，所以会覆盖原有徽章；另外首页产品滑块可能未调用该钩子，导致不生效。要实现同时显示左右两个徽章，需要新增独立的折扣百分比徽章，再通过CSS定位位置。

代码实现 #

1. 添加折扣百分比徽章的钩子 #

使用woocommerce_before_shop_loop_item_title钩子新增折扣徽章，该钩子在产品图片与标题之间触发，对商店页面和产品滑块均生效：

add_action('woocommerce_before_shop_loop_item_title', 'add_discount_percentage_badge', 5);
function add_discount_percentage_badge() {
    global $product;
    
    // 仅在产品促销时显示徽章
    if (!$product->is_on_sale()) return;
    
    // 计算折扣百分比
    $regular_price = (float)$product->get_regular_price();
    $sale_price = (float)$product->get_sale_price();
    
    if ($regular_price > 0) {
        $percentage = round((($regular_price - $sale_price) / $regular_price) * 100);
        echo '<span class="discount-percentage-badge">' . $percentage . '%</span>';
    }
}

2. CSS定位徽章位置 #

通过CSS分别设置默认促销徽章和折扣百分比徽章的左右位置（注意：.product-slider需替换为你主题中产品滑块的实际容器类名）：

/* 确保徽章基于产品图片容器定位 */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.product-slider .product-item .product-image-container {
    position: relative;
}

/* 默认促销徽章固定在左侧 */
.woocommerce ul.products li.product .onsale,
.product-slider .product-item .onsale {
    left: 10px;
    right: auto;
    top: 10px;
}

/* 折扣百分比徽章固定在右侧 */
.discount-percentage-badge {
    position: absolute;
    right: 10px;
    top: 10px;
    background: #e74c3c;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

额外说明 #

• 钩子优先级设为5，确保与默认促销徽章（通常优先级10）不冲突；
• 代码中增加了促销判断，仅促销产品会显示折扣徽章；
• 之前使用的woocommerce_sale_flash替换代码可以删除，默认促销徽章会保留显示。

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