WooCommerce：替换Backorder商品的Sales徽章为Out Of Stock徽章

针对你遇到的预售商品同时显示Sales和Out Of Stock徽章重叠的问题，给你两种解决思路：

方法一：从PHP层面重构徽章逻辑（彻底解决） #

替换你现有的代码，用以下代码实现仅在非预售的促销商品显示Sales徽章，预售商品显示Out Of Stock徽章：

// 移除WooCommerce默认的Sales徽章钩子（覆盖列表页和详情页）
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

// 添加自定义徽章判断逻辑
add_action( 'woocommerce_before_shop_loop_item_title', 'custom_product_status_badge', 3 );
add_action( 'woocommerce_before_single_product_summary', 'custom_product_status_badge', 3 );

function custom_product_status_badge() {
    global $product;

    // 预售状态：显示Out Of Stock徽章
    if ( $product->is_on_backorder( 1 ) ) {
        echo '<span class="out-of-stock-badge" data-shape="type-3">' . esc_html__( 'Out Of Stock', 'woocommerce' ) . '</span>';
    } 
    // 非预售且促销状态：显示默认Sales徽章
    elseif ( $product->is_on_sale() ) {
        echo '<span class="onsale">' . esc_html__( 'Sale!', 'woocommerce' ) . '</span>';
    }
}

这段代码先移除了WooCommerce自带的Sales徽章输出逻辑，然后自定义判断：只有非预售的促销商品才显示Sales徽章，预售商品只显示你需要的Out Of Stock标签，从根源避免重叠。

方法二：CSS层面隐藏预售商品的Sales徽章（快速解决） #

如果不想修改PHP代码，直接给主题的自定义CSS添加以下样式，通过CSS隐藏预售商品的Sales徽章：

/* 隐藏处于预售状态商品的Sales徽章 */
.product.onbackorder .onsale {
    display: none !important;
}

WooCommerce会自动给预售商品添加.onbackorder类，这段代码能精准定位并隐藏对应的Sales徽章（默认类为.onsale），让你的Out Of Stock徽章正常显示。

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