在WooCommerce中显示图标而不是文本显示库存状况

Question

我试图显示图标而不是文本，作为WooCommerce中的可用性。我的代码显示文本，但我喜欢将其改为图标。

我有三个图标：红色，橙色和绿色（代表缺货），剩余一半（存货）和存货充足。

这是我需要帮助更改的代码：

add_filter( 'woocommerce_get_availability', 'dispay_custom_icons_for_availability', 1, 2);
function dispay_custom_icons_for_availability( $availability, $product ) {
   global $product;

   // available
    if ( $product->is_in_stock() ) {
        $availability['availability'] = __('GREEN ICON HERE', 'woocommerce');
    }

    // middle stock
    if ( $product->is_in_stock() && $product->get_stock_quantity() <= 20 ) {
        $availability['availability'] = sprintf( __('ORANGE ICON HERE', 'woocommerce'), $product->get_stock_quantity());
 }


   // out of stock
    if ( ! $product->is_in_stock() ) {
        $availability['availability'] = __('RED ICON HERE', 'woocommerce');
    }

    return $availability;
}

感谢所有帮助。

Answer 1

根据WooCommerce中嵌入的Fontawesome图标尝试以下操作：

add_filter( 'woocommerce_get_availability', 'dispay_custom_icons_for_availability', 1, 2);
function dispay_custom_icons_for_availability( $availability, $product ) {
   global $product;

   // available
    if ( $product->is_in_stock() ) {
        $availability['availability'] = '<i class="fa fa-lg fa-smile" style="color:green;"></i>';
        $availability['class'] = 'in_stock';
    }

    // middle stock
    if ( $product->is_in_stock() && $product->get_stock_quantity() <= 20 ) {
        $availability['availability'] = '<i class="fa fa-lg fa-meh" style="color:orange;"></i>';
        $availability['class'] = 'low_stock';
 }


   // out of stock
    if ( ! $product->is_in_stock() ) {
        $availability['availability'] = '<i class="fa fa-lg fa-frown" style="color:red;"></i>';
        $availability['class'] = 'out_of_stock';
    }

    return $availability;
}

代码进入活动子主题（或活动主题）的functions.php文件中。经过测试和工作。

您将获得以下图标之一