为WooCommerce库存状态添加颜色的实现方法

步骤1：给库存状态元素添加专属CSS类 #

通过WooCommerce的过滤器，在输出库存状态时，根据状态值添加对应的CSS类。将以下代码添加到主题的functions.php文件或者自定义插件中：

add_filter( 'woocommerce_stock_status_html', 'add_custom_stock_status_class', 10, 2 );
function add_custom_stock_status_class( $html, $product ) {
    // 获取产品的库存状态（包括自定义状态）
    $stock_status = $product->get_stock_status();
    
    // 重新构建带专属类的库存状态HTML
    $stock_text = $product->get_stock_status_text();
    $html = '<p class="stock stock-' . esc_attr( $stock_status ) . '">' . esc_html( $stock_text ) . '</p>';
    
    return $html;
}

这段代码会给每个库存状态的<p>标签添加类似stock-instock、stock-outofstock，或是你自定义的stock-preorder（假设自定义状态slug为preorder）这类专属类。

步骤2：添加自定义CSS样式 #

针对不同的库存状态类设置对应颜色，将以下CSS添加到主题的自定义CSS面板（外观 → 自定义 → 额外CSS）或者主题的style.css文件中：

/* 默认库存状态颜色 */
.stock-instock {
    color: #2ecc71; /* 绿色 */
}

.stock-outofstock {
    color: #e74c3c; /* 红色 */
}

/* 自定义库存状态颜色（替换为你的状态slug） */
.stock-preorder {
    color: #f39c12; /* 橙色 */
}

.stock-coming_soon {
    color: #9b59b6; /* 紫色 */
}

只需将stock-preorder中的preorder替换成你实际添加的自定义库存状态slug，再调整颜色值即可适配自己的需求。

补充说明 #

如果产品列表页（商店页、分类页）的库存状态样式未生效，可能是主题用了不同的输出结构。可以检查主题的库存状态渲染逻辑，或是调整CSS选择器来适配主题的元素层级；也可以通过woocommerce_after_shop_loop_item_title钩子重新输出带类的库存状态。

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