如何修改Woocommerce缺货预订（backorder）提示文本的颜色？

嘿，我完全懂你的烦恼——缺货预订的提示和有货时的绿色文本撞色，顾客很容易直接忽略对吧？你已经搞定了提示文本的内容修改，接下来咱们把颜色也调整到位，给你两种实用方案：

方案一：直接用CSS快速修改（最简单） #

WooCommerce默认会给缺货预订的提示文本加上.backorder_notification类，咱们直接针对这个类写CSS就能改颜色：

/* 调整缺货预订提示的颜色，这里用红色示例，你可以换成任意色值 */
.stock.backorder_notification {
    color: #ff6b6b;
    /* 可选：再加个加粗让提示更醒目 */
    font-weight: 600;
}

怎么添加这段CSS？
你可以直接在WordPress后台的「外观」→「自定义」→「额外CSS」里粘贴这段代码，保存后刷新页面就能看到效果啦。

方案二：修改函数添加自定义类（更灵活） #

如果默认的类不够用，或者你想给这个提示文本设置更独特的样式，咱们可以修改你现有的函数，给文本包裹一个自定义类的标签：

function so_42345940_backorder_message( $text, $product ){
    if ( $product->managing_stock() && $product->is_on_backorder( 1 ) ) {
        // 给提示文本加上自定义类的span标签
        $text = '<span class="custom-backorder-alert">' . __( 'Text here', 'your-textdomain' ) . '</span>';
    }
    return $text;
}
add_filter( 'woocommerce_get_availability_text', 'so_42345940_backorder_message', 10, 2 );

然后再添加对应的CSS样式（同样加到「额外CSS」里）：

.custom-backorder-alert {
    color: #ff9f43; /* 橙色示例 */
    font-style: italic; /* 可选：斜体样式 */
}

小提醒 #

如果你是用子主题的话，函数代码建议加到子主题的functions.php文件里，别直接修改主题的核心文件，不然主题更新后代码会丢失哦~

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