Tutorials for web designers and developers
Tutorials for Developers_

How to hide Add to cart button for specific variations WooCommerce?

To hide the variation of woocommerce variable product, I first changed the status of variation to “On backorder” and saved the product.

Secondly, I added the following code to hide the add to cart button when product variation with “on backorder” status is selected.

jQuery(function($){
$("form.variations_form.cart").on('DOMSubtreeModified', function(){
if($(".single-product p.stock.available-on-backorder").length){
        $("button.single_add_to_cart_button.button").hide();
        console.log('added');
    }
    else {
        $("button.single_add_to_cart_button.button").show();
        console.log('removed'); 
    }
});
    
});

Final Result

https://youtu.be/J6bd0X4FnwM
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email

Leave a Reply

Your email address will not be published.