0

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

  • Can you explain a little more why you need a 2nd checkout button (instead of just using the default one)? – Jami Gibbs Jun 28 '17 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 Jun 28 '17 at 13:26
3

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 (

  • Thanks @LWS-Mo It works fine and I understand that using variation is much more complex because the price is set according to what the user is choosing. Thanks a lot! – gil hamer Jun 28 '17 at 15:08
  • Anyway I can include the quantity too? right now it only works with single product. Thanks – gil hamer Jun 28 '17 at 16:45
  • @gilhamer I edited the answer and added some jQuery code to add the quantity. As this is not so easy, as we need to get the current entered value of the quantity input field, we need to use JS. – LWS-Mo Jun 30 '17 at 12:00

protected by Community Jan 21 at 10:29

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.