Variable Produkt & cartbutton

Hi @genusswerker,

I’ve performed some tests on one of my test sites and the default behavior when the variation is out of stock and backorders are not allowed is that the “Add to Cart” button is greyed out and unavailable as you can see here:

Link to image: https://snipboard.io/ro8qJc.jpg

Now, you can use a custom PHP snippet to completely hide the button when the variation is out of stock. Use this snippet as seen on this Stack Overflow thread:

//Hide Add to Cart button when variation is out of stock
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
}

I would recommend using a plugin like Code Snippets to add custom PHP code into your site without directly accessing the functions.php file.

If it doesn’t work as you expect, then I’d suggest hiring a developer or one of the customization experts listed at https://woocommerce.com/customizations/.

I hope this helps!

Hello Mirko,

thanks so lot for your answer. The code creates a critical error and cripples the page.

Hi @genusswerker,

Thanks for getting back.

The code may not work with all browsers as it includes Javascript, it’s working on my test site with only Storefront and WooCommerce though, and I’m checking it with the latest version of Chrome.

Since this is outside the scope of support on this forum, as suggested earlier you can consult a web developer or customization expert for a custom-coded solution: https://woocommerce.com/customizations/.

Thanks.