WooCommerce库存状态：用图标替代文字显示的代码修改求助

云上老周

2026-5-13

替换WooCommerce库存状态文字为自定义图标

没问题，我帮你把代码修改好，直接用你准备的三个图标替换文字。另外我还调整了代码的逻辑顺序，避免出现状态覆盖的问题，下面是完整的修改后的代码：

add_filter( 'woocommerce_get_availability', 'display_custom_icons_for_availability', 10, 2);
function display_custom_icons_for_availability( $availability, $product ) {
    // 先处理缺货状态
    if ( ! $product->is_in_stock() ) {
        // 替换成你的红色缺货图标路径
        $availability['availability'] = '<img src="你的红色图标完整URL" alt="缺货" class="stock-status-icon">';
    }
    // 处理库存剩余≤20的情况（仅当商品有货时）
    elseif ( $product->is_in_stock() && $product->get_stock_quantity() <= 20 ) {
        // 替换成你的橙色库存紧张图标路径
        $availability['availability'] = '<img src="你的橙色图标完整URL" alt="库存紧张" class="stock-status-icon">';
    }
    // 最后处理库存充足的情况
    elseif ( $product->is_in_stock() ) {
        // 替换成你的绿色库存充足图标路径
        $availability['availability'] = '<img src="你的绿色图标完整URL" alt="库存充足" class="stock-status-icon">';
    }

    return $availability;
}

几个重要的注意事项：

图标路径替换：把代码里的你的红色图标完整URL这类文字换成你实际的图标文件路径。如果图标放在你的WordPress主题的images文件夹里，可以用WordPress内置函数来获取路径，比如绿色图标可以写成：get_stylesheet_directory_uri() . '/images/green-stock-icon.png'，这样更灵活，不会因为域名变化失效。
调整图标样式：代码里给图标加了stock-status-icon类，你可以在主题的CSS文件里添加样式来调整图标大小、对齐方式，比如：
```
.stock-status-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 5px;
}
```
优先级调整：我把过滤器的优先级从1改成了10，这是WooCommerce过滤器的常规优先级，避免和其他插件或主题的代码冲突。