No .outofstock css class for out-of-stock variations

[Anonymous 1444]

Anonymous 1444

February 17, 2017 at 4:23 am

If a product is out of stock, we hide the .variations_button button and show a waitlist form instead. You can see this in link 1) which I’ll send in a private followup. This is achieved with a simple CSS rule like:
.outofstock .variations_button {
display: none;
}

But this only works if all variations of a product are sold out. If just one variation is sold, then there is no .outofstock class. So the rule above does not match. See link 2) for an example of this.

I digged trough the HTML/CSS with Firefox DevTools but could not find another css class which I could use. I would like to hide the following:

<div class="variations_button">
<div class="quantity buttons_added"><input value="-" class="minus" type="button">
<input step="1" min="1" max="0" name="quantity" value="1" title="Menge" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
<input value="+" class="plus" type="button"></div>
<button type="submit" class="kad_add_to_cart headerfont kad-btn kad-btn-primary single_add_to_cart_button disabled wc-variation-is-unavailable">In den Warenkorb</button>
<input name="add-to-cart" value="3392" type="hidden">
<input name="product_id" value="3392" type="hidden">
<input name="variation_id" class="variation_id" value="5361" type="hidden">
</div>

Inside this, that is, inside the button there is wc-variation-is-unavailable. But this is inside the whole element I would like to hide.

But it be possible to add some css class to a out-of-stock variation? Either at form.variations_form, div.single_variation_wrap_kad.single_variation_wrap or the div.variations_button.