在 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 文件。测试和工作。

您将获得以下图标之一

在 WooCommerce 中显示图标而不是文本以显示库存可用性

Show Icons instead of Text for Stock Availability in WooCommerce

php

wordpress

stock

font-awesome

woocommerce