WooCommerce 使用图标自定义产品可用性文本

Question

我想在 Woocommerce 中编辑“库存文本”，我在互联网上找到了多个答案，但由于某些原因，它不适用于库存产品。它确实适用于缺货或缺货的产品。我不明白有什么不同以及为什么库存的渲染方式与其他两个不同。

代码：

add_filter( 'woocommerce_get_availability', 'change_in_stock_text', 1, 2);

function change_in_stock_text( $availability, $_product ) {
    
    // product not in stock and not applicable for backorder
    if ( ! $_product->is_in_stock() && !$_product->is_on_backorder()) {
        $availability['availability'] = __('<i class="far fa-times-circle fa-lg"></i> Niet op voorraad', 'astra');
    }
    //product not in stock, but backorder is ok -> dropshipping
    elseif( $_product->managing_stock() && $_product->is_on_backorder() ){
        $availability['availability'] = __('<span style="color: orange;"><i class="far fa-check-circle fa-lg"></i> Op nabestelling</span>', 'astra');
    }
    //product is in stock (nothing special)
    elseif( $_product->is_in_stock()){
        $availability['availability'] = __('<i class="far fa-check-circle fa-lg"></i> Op voorraad', 'astra');
    }

    return $availability;
}

输出截图：https://imgur.com/a/7PWiz62

感谢所有帮助和提示！

Answer 1

要解决与您的主题相关的问题，请尝试以下操作：

add_filter( 'woocommerce_get_availability', 'customize_product_availability', 10, 2);
function customize_product_availability( $availability, $product ) {
    // product not in stock and not applicable for backorder
    if ( ! $product->is_in_stock() && ! $product->is_on_backorder()) {
        $text = __('Niet op voorraad', 'astra');
        $icon = 'times-circle';
        $color = 'color:#e2401c;';
    }
    //product not in stock, but backorder is ok -> dropshipping
    elseif( $product->managing_stock() && $product->is_on_backorder() ){
        $text = __('Op nabestelling', 'astra');
        $icon = 'check-circle';
        $color = 'color:orange;';
    }
    //product is in stock (nothing special)
    elseif( $product->is_in_stock() ){
        $text = __('Op voorraad', 'astra');
        $icon = 'check-circle';
        $color = 'color:#0f834d;';
    }

    $availability['availability'] = '<span style="'.$color.'"><i class="fa far fa-'.$icon.' fa-lg"></i> '.$text.'</span>';

    return $availability;
}

代码进入活动子主题（或活动主题）的 functions.php 文件。应该有效

对于没有对产品可用性进行自定义的其他主题，更改图标 例如“有货”产品使用以下 CSS 规则：

.stock.in-stock:before {
    content: "\f058" !important;
}

其中 \f058 是“check-circle”FontAwesome 字体图标的 the font code。

css 选择器 用于：

“缺货” 产品是 .stock.out-of-stock:before,
“可延期交货” 产品是 .stock.available-on-backorder:before。

全部Available FontAwesome font Icons

WooCommerce 使用图标自定义产品可用性文本

WooCommerce customizing product availability text with icons

php

wordpress

icons

font-awesome

woocommerce