Add Additional “Checkout” button next to “Add to cart” button in woocommerce product page

Question

You dont need to modify your template files for this, instead you can use the WooCommerce hook woocommerce_after_add_to_cart_button. This hook will add content after the “Add to cart” button.

If the customer clicks on this button, the product should get added to the cart, and the customer should be send to the checkout page, right?!

Basically you can add products to the cart with a link like this:

http://example.com/cart/?add-to-cart=<product ID>

So, using the hook mentioned above, and keeping this URL in mind, we can add a second button with this snippet:

function add_content_after_addtocart() {

    // get the current post/product ID
    $current_product_id = get_the_ID();

    // get the product based on the ID
    $product = wc_get_product( $current_product_id );

    // get the "Checkout Page" URL
    $checkout_url = WC()->cart->get_checkout_url();

    // run only on simple products
    if( $product->is_type( 'simple' ) ){
        echo '<a href="'.$checkout_url.'?add-to-cart=".$current_product_id."" class="single_add_to_cart_button button alt">Checkout</a>';
    }
}
add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );

This will add a button after the normal Add to cart button on single product pages.
As you can see I also added a check to see if the current product is a simple product or not. If you want to use this with variation, it is more difficult.
With these products you need to generate an URL like:

http://example.com/cart/?add-to-cart=123&variation_id=456&attribute_pa_colour=black

Maybe you also need to check the default WooCommerce option Enable AJAX Add to cart (WooCommerce > Products > Display). I have not tested it with this setting.

Update to include the quantity

If you want to add a quantity you can also append a parameter to our button URL, like so:

http://example.com/cart/?add-to-cart=<product ID>&quantity=<number of quantity>

However, since a customer can change the quantity with the WooCommerce input-field, we need a way to get the current value of this field.

So we have multiple options here,

listen to an on-change event on the quantity field to update our URL,
or append the current value of the quantity field to the URL, only
if our custom button is clicked.

The following code uses the second approach, only when the button is clicked the parameter gets added.

Inside the if( $product->is_type( 'simple' ) ) function, before the echo, enter this script:

<script>
    jQuery(function($) {
    <?php /* if our custom button is clicked, append the string "&quantity=", and also the quantitiy number to the URL */ ?>

        // if our custom button is clicked
        $(".custom-checkout-btn").on("click", function() {

            // get the value of the "href" attribute 
            $(this).attr("href", function() {
                // return the "href" value + the string "&quantity=" + the current selected quantity number
                return this.href + '&quantity=' + $('input.qty').val();
            });

        });
    });
    </script>

I did not included stop and start PHP tags in the code above! So you need to end PHP before the (?>) and start it again after the script (

Related Posts: