Show Icons instead of Text for Stock Availability in WooCommerce

Question

I am trying to show icons instead of text as the availability in WooCommerce. The code I have shows text, but I like it to be icons instead.

I have three icons: Red, Orange and Green for Out of stock, Half stock left and fully stocked.

Here's the code I need help changing:

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;
}

All help is appreciated.

Answer 1

Try the following, based on Fontawesome icons that are embedded in 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'] = '<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;
}

Code goes in functions.php file of your active child theme (or active theme). Tested and work.

You will get one of the following icons