显示用于 woocommerce 缺货产品变体的自定义 div 块

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.

Answer 2

Depending on your software and what you want to do, there are 2 ways:

1. Hide the div with CSS/JS (like change the display property).

2. Since youre are talking about a PHP framework, you can just not display the DIVs under certain conditions.

I hope you were not asking for how to solve your problem in a detailed way in one of those both ways, since there are billions of billions of explanations and tutorials out there because hiding a html-element under certain conditions is one of the most basic stuff you can learn on the world wide web by just using google for 2 seconds ;)

If you have a detailed question because you what you have coded does not work for some reason, then provide the code and describe what you have tried to do and what is not working.