I am trying to find a function which will add ADDITIONAL button next to the standard "Add to cart" button in woo commerce product page.

1. I added a woocommerce folder into my childe theme in order to modify single-product => add-to-cart => simple.php
2. Inside simple.php I found the standard "Add to cart" button and after it is where I want to add my custom additional "checkout" button

I found this function:

function woo_redirect_to_checkout() {
    $checkout_url = WC()->cart->get_checkout_url();
    return $checkout_url;
}

Which works fine BUT it modify ALL "add to cart" buttons in the site and I am trying to add it ONLY to the new custom button that I am trying to add (The new checkout button) I managed to add a button which redirects to checkout page but doesn't Add the item to the cart prior to going to the checkout

Anyone knows how do I add a NEW button + this button needs to not only go to the checkout page but also trigger the "Add to cart" action at the same time

Thanks

I am trying to find a function which will add ADDITIONAL button next to the standard "Add to cart" button in woo commerce product page.

1. I added a woocommerce folder into my childe theme in order to modify single-product => add-to-cart => simple.php
2. Inside simple.php I found the standard "Add to cart" button and after it is where I want to add my custom additional "checkout" button

I found this function:

function woo_redirect_to_checkout() {
    $checkout_url = WC()->cart->get_checkout_url();
    return $checkout_url;
}

Which works fine BUT it modify ALL "add to cart" buttons in the site and I am trying to add it ONLY to the new custom button that I am trying to add (The new checkout button) I managed to add a button which redirects to checkout page but doesn't Add the item to the cart prior to going to the checkout

Anyone knows how do I add a NEW button + this button needs to not only go to the checkout page but also trigger the "Add to cart" action at the same time

Thanks

• woocommerce-offtopic

• Can you explain a little more why you need a 2nd checkout button (instead of just using the default one)? – Jami Gibbs Commented Jun 28, 2017 at 12:48
• This is what a request from the client... He wants another button which will redirect customers directly to the checkout page – gil hamer Commented Jun 28, 2017 at 13:26

2 Answers 2

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/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/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/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 (

Just came here to paste my code, which has helped me solve my client's problem of having two buttons, one for checkout and one for add to cart. I have used a different approach and it helps with Variable products as well.

function wpcoderpro_direct_checkout_button() {
global $product;
$id = $product->get_id();
if( $product->is_type( 'variable' ) ){
    echo '
<script>
jQuery(document).ready(function($){
  $(".redirect_to_checkout").click(function(){
  $("button.single_add_to_cart_button ").click();
  window.location.href="/checkout/";
  });
});
</script>
<div class="button alt redirect_to_checkout" style="cursor:pointer;">CHECKOUT</div>
';
}
elseif( $product->is_type( 'simple' ) ){
  echo '
<script>
jQuery(document).ready(function($){
$(".input-text.qty").change(function(){
  $(".redirect_to_checkout a").attr("href", "/checkout/?add-to-cart='. $id .'" + "&quantity= " + $(this).val());
});
});
</script>
<div class="button alt redirect_to_checkout" style="cursor:pointer;"><a href="/checkout/?add-to-cart='. $id .'">CHECKOUT</a></div>
';
}
}
add_action( 'woocommerce_after_add_to_cart_button', 'wpcoderpro_direct_checkout_button', 20 );

Please do note that I use a plugin for AJAX Add to cart for Variable products, and I do not use AJAX Add to cart on Simple Products.

The code goes to the function.php file of your child theme. Let me know if you need an explanation :)