Hide Add to cart block when a variable product is out of stock in Woocommerce

1
votes

In Woocommerce, I am using Woocommerce Waitlist plugin that shows a "Join Waitlist" button, near the "Add to Cart" button when product is out of stock. On my variable subscriptions, I have tried to hide the "Add to cart" button block when the product is out of stock, without success.

We are using the Vantage theme and Woocommerce subscriptions, if it can help.

How to hide the "Add to Cart" block when variable product is out of stock in Woocommerce?

2
phpjquerycsswordpresswoocommerce
Can you post the code of the template where the button is added?What theme are you using? – Nicola Peluchetti
This might get you started stackoverflow.com/questions/44916965/… – SoConfused
@OhSoConfused - Thanks, but this is for items with 0 cost, not out-of-stock items. – Arvy S.

2 Answers

5
votes

Updated - To detect "out of stock" selected variation and hide add to cart button block, the way is to use jQuery:

add_action( 'wp_footer', 'single_add_to_cart_event_text_replacement' );
function single_add_to_cart_event_text_replacement() {
    global $product;

    // Only single variable products
    if( ! ( is_product() && $product->is_type('variable') ) )
        return;
    ?>
        <script type="text/javascript">
        jQuery(function($){
            var vs = 'table.variations select',         vi = 'input.variation_id',
            atc = 'woocommerce-variation-add-to-cart',  atcd = atc+'-disabled',
            atc = '.'+atc;

            // 1. On start (With a mandatory light delay)
            setTimeout(function(){
                if ( 0 < $(vi).val() && $(atc).hasClass(atcd) ) {
                    $(atc).hide();
                }
            }, 250);

            // 2. On variation change
            $('.variations_form').on( 'blur', vs, function(){
                if( 0 < $(vi).val() && $(atc).hasClass(atcd) ){
                    $(atc).hide();
                } else {
                    $(atc).show();
                }
            });
        })
        </script>
    <?php
}

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

The CSS way (not convenient)

As the <div> container get a tag class woocommerce-variation-add-to-cart-disabled that grey out the add to cart button you could use a CSS rule to hide the entire block the button and the quantity field:

.woocommerce-variation-add-to-cart-disabled { display:none !important; }

But When no variations are selected it will also hide add to cart, so it's not convenient.

0
votes

Note: I don't know where your waitlist plugin adds its buttons, so if it adds them to the cart form then they will get hidden too, so this won't work.

Two Points:

1: Set Allow back-orders? on each product to Do not allow. This will stop Woocommerce from displaying the add to cart button. You do have to do this for each individual product, but it can be done using Bulk Edit.

2: Hide the add to cart form using CSS. Something like this will target all products which are not in stock:

.type-product:not(.instock) form.cart {
    display: none;
}

Hope that help to you