Add to cart and redirect to checkout for variable products in WooCommerce

Question

I got help in this answer thread that allow to add an additional add-to-cart button that redirects to checkout. It works fine for simple products.

But how to make it work for variable products as well?

I've been trying myself, but no matter what I do, I break the site. I simply do not understand how to make this work with/ for variable products.

Here's the lightly changed code that works for simple products and which takes the quantity field into consideration:

add_action( 'woocommerce_after_add_to_cart_button', 'add_custom_addtocart_and_checkout' );
function add_custom_addtocart_and_checkout() {
    global $product;

    $addtocart_url = wc_get_checkout_url().'?add-to-cart='.$product->get_id();
    $button_class  = 'single_add_to_cart_button button alt custom-checkout-btn';
    $button_text   = __("Buy & Checkout", "woocommerce");

    if( $product->is_type( 'simple' )) :
    ?>
    <script>
    jQuery(function($) {
        var url    = '<?php echo $addtocart_url; ?>',
            qty    = 'input.qty',
            button = 'a.custom-checkout-btn';

        // On input/change quantity event
        $(qty).on('input change', function() {
            $(button).attr('href', url + '&quantity=' + $(this).val() );
        });
    });
    </script>
    <?php
    echo '<a href="'.$addtocart_url.'" class="'.$button_class.'">'.$button_text.'</a>';
    endif;
}

Does anyone know how to get this working for variable products too?

Answer 1

Update 3

The following code will handle simple and variable products adding an additional Add to cart button that redirects to cart (with synchronized quantity).

The code works for simple and variable products as well.

add_action( 'woocommerce_after_add_to_cart_button', 'add_custom_addtocart_and_checkout' );
function add_custom_addtocart_and_checkout() {
    global $product;

    $addtocart_url = wc_get_checkout_url().'?add-to-cart='.$product->get_id();
    $button_class  = 'single_add_to_cart_button button alt custom-checkout-btn';
    $button_text   = __("Buy & Checkout", "woocommerce");

    if( $product->is_type( 'simple' )) :
    ?>
    <script>
    jQuery(function($) {
        var url    = '<?php echo $addtocart_url; ?>',
            qty    = 'input.qty',
            button = 'a.custom-checkout-btn';

        // On input/change quantity event
        $(qty).on('input change', function() {
            $(button).attr('href', url + '&quantity=' + $(this).val() );
        });
    });
    </script>
    <?php

    elseif( $product->is_type( 'variable' ) ) : 

    $addtocart_url = wc_get_checkout_url().'?add-to-cart=';
    ?>
    <script>
    jQuery(function($) {
        var url    = '<?php echo $addtocart_url; ?>',
            vid    = 'input[name="variation_id"]',
            pid    = 'input[name="product_id"]',
            qty    = 'input.qty',
            button = 'a.custom-checkout-btn';

        // Once DOM is loaded
        setTimeout( function(){
            if( $(vid).val() != '' ){
                $(button).attr('href', url + $(vid).val() + '&quantity=' + $(qty).val() );
            }
        }, 300 );

        // On input/change quantity event
        $(qty).on('input change', function() {
            if( $(vid).val() != '' ){
                $(button).attr('href', url + $(vid).val() + '&quantity=' + $(this).val() );
            }
        });

        // On select attribute field change event
        $('.variations_form').on('change blur', 'table.variations select', function() {
            if( $(vid).val() != '' ){
                $(button).attr('href', url + $(vid).val() + '&quantity=' + $(qty).val() );
            }
        });
    });
    </script>
    <?php
    endif;
    echo '<a href="'.$addtocart_url.'" class="'.$button_class.'">'.$button_text.'</a>';
}

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