Display a custom div block for woocommerce out of stock product variations

Question

In Woocommerce, I'm trying to make a custom div container visible when a variation of variable product is out of stock, but available on backorder.

So by default it's hidden. But when a customer selects a variation that's out of stock, but available on backorder, it will show the div blocks I've written.

I've placed this div block inside the short description of the product, since that is the place where I want to have it visible when it is out of stock. Or at least, I want to have it above the variations form, under the product short description.

Since I have little to no knowledge on php and woocommerce hooks, I was wondering if someone knows how to do this.

This is the div container code I'm talking about.

<div class="mto-cont">
<div class="col-xs-6 made-to-order"><a href="#">Made to Order</a></div>
<div class="col-xs-6">Production time: <span style="color: #000;">2 - 4 weeks</span></div>

Answer 1

Updated - The following will add a custom html display when a product variation is on backorders:

add_filter( 'woocommerce_available_variation', 'custom_outofstock_variation_addition', 10, 3 );
function custom_outofstock_variation_addition( $data, $product, $variation ) {
    if( $variation->is_on_backorder() ){
        $data['availability_html'] .= '<div class="mto-cont">
        <div class="col-xs-6 made-to-order"><a href="#">Made to Order</a></div>
        <div class="col-xs-6">Production time: <span style="color: #000;">2 - 4 weeks</span></div>
        </div>';
    }
    return $data;
}

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