2

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>

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
sebas6691
  • 41
  • 6

2 Answers2

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.

enter image description here

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • Thanks! The code only works when it's out of stock, not on backorder. Could you help with that? – sebas6691 Dec 30 '18 at 09:29
  • @sebas6691 Just changed the code for backorders before your comment. So try it again… – LoicTheAztec Dec 30 '18 at 09:30
  • Jup works now! Would it be possible with those hooks to place the container between the product short description and the variation selection form or do I need to CSS that? – sebas6691 Dec 30 '18 at 09:39
  • @sebas6691 Not for product variations as it's live ajax loaded content that can only be located between the attribute dropdowns and the add to cart button. – LoicTheAztec Dec 30 '18 at 12:46
  • Thank you for your answer. I fixed it with some CSS. – sebas6691 Dec 31 '18 at 07:55
0

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.

mhombach
  • 196
  • 11
  • Hi Spyro, Thank you for your answer. However, I'm talking about Woocommerce and was actually hoping for a piece of code consisting of woocommerce hooks which I could place in the functions.php – sebas6691 Dec 29 '18 at 16:44
  • Allright, good you edited your question title so it's more clear to others now :) Wasn't clear to me that you meant BEFORE compilation (aka. in your php code) or just some conditional toggle on the site via JS ;) – mhombach Dec 30 '18 at 17:48
  • Jup, newby mistake. Sorry about that. :) – sebas6691 Dec 31 '18 at 07:56