WooCommerce customizing product availability text with icons

In Woocommerce I want to edit the “in-stock text”, I found multiple answers on the internet, but for some reason, it doesn’t work for products that are in stock. It does work for products that are out of stock or are on backorder. I cannot understand what is different and why the in-stock is rendering differently than the other two.

Code:

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

screenshots of the output: https://imgur.com/a/7PWiz62

All help and tips are appreciated!

Answer

To solve this issue related to your theme, try the following:

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

Code goes in functions.php file of the active child theme (or active theme). It should works

---

For other themes that doesn’t have customizations on product availability, to change the icon for example for “In stock” products use the following CSS rule:

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

Where f058 is the font code for “check-circle” FontAwesome font Icon.

The css selector to be used for:

• “Out of Stock” product is .stock.out-of-stock:before,
• “Available on backorder” product is .stock.available-on-backorder:before.

All Available FontAwesome font Icons