Add to cart button showing for out of stock variable products in Woocommerce

Question

So I have a weird thing happening with my Woocommerce store.

Right now when a single product (no variants) is out of stock the 'Quantity' and 'Add to Cart' button disappear - which is what I want. It just shows the 'Out of Stock' label.

When I have a variable product (with say 2 variants) that has all variants out of stock, it's still showing the 'Quantity' and 'Add to Cart' buttons (grayed out).

How do I hide the Quantity + Add to Cart button in ALL cases regardless of whether it's a single or variable product when it is OUT OF STOCK?

Any help is much appreciated!

Answer 1

can you post a link to the site or a dev site so we can have a look. Alternatively implement the following code.

.[class for for button if product is out of stock]{
display: none;
}

Answer 2

Here is a plugin that will help you to hide the add to cart button particular to product : Woocommerce Hide Add To Cart Button

It helps to hide the add to cart button for ,

Hide Add to Cart button from product single page.
Hide Add to Cart button from category page.
Hide Add to Cart button from homepage and all other pages.

Also you can hide it via adding the below function in functions.php,

if (!function_exists('woocommerce_template_loop_add_to_cart')) {
    function woocommerce_template_loop_add_to_cart() {
        global $product;
        if ( ! $product->is_in_stock() || ! $product->is_purchasable() ) return;
        woocommerce_get_template('loop/add-to-cart.php');
    }
}

Answer 3

add_action( 'woocommerce_before_add_to_cart_button', 'get_selected_variation_stock' );
function get_selected_variation_stock() {
    global $product;

    if ($product->is_type( 'variable' ))
    {
        $stockArr = array();
        $available_variations = $product->get_available_variations();
        foreach ($available_variations as $key => $value)
        {
            $variation_id = $value['variation_id'];
            $attribute_pa_colour = $value['attributes']['attribute_pa_colour'];
            $variation_obj = new WC_Product_variation($variation_id);
            $stock = $variation_obj->get_stock_quantity();

            $stockArr[] = [
                "id"  => $variation_id,
                "qty" => $stock
            ];

        }

        ?>

        
            jQuery(document).ready(function(){

                var arr =  echo json_encode($stockArr); //this value can be wrap up into php tag mostly. Otherwise functionality not works.

                jQuery('input.variation_id').change( function(){
                    if( '' != jQuery('input.variation_id').val() ) {

                        var var_id = jQuery('input.variation_id').val();

                        const objectArray = Object.entries(arr);
                        objectArray.forEach(([key, value]) => {

                            var prod_id  = value.id;
                            var prod_qty = value.qty;

                            if (prod_id == var_id) {

                                if (prod_qty > 0) {
                                    jQuery(".single_add_to_cart_button.button").removeClass("disabledCartBtn");
                                    jQuery(".single_add_to_cart_button.button").html("Add to cart");
                                    jQuery(".single_add_to_cart_button.button").removeAttr("disabled");
                                }
                                else {
                                    jQuery(".single_add_to_cart_button.button").addClass("disabledCartBtn");
                                    jQuery(".single_add_to_cart_button.button").html("Out of stock");
                                    jQuery(".single_add_to_cart_button.button").attr("disabled", "disabled");
                                }

                            }

                        });

                    }
                });
            });
        
    <?php

}

}

Add this code into functions.php and you have to achieve your goal.