Posted on 17 Comments

Proceed to checkout

We all love a good conversion tip, right?

On WooCommerce’s cart page, the checkout button is all the way at the bottom.  Now think about that for a second with me.

Imagine you’re at the store. You’ve put all the items you’d like to buy into your cart, you’ve walked up to the checkout lane, stood in line, put all the items up on the checkout stand, and just before you start to swipe your card and pay…

the cashier tells you to go back over all the items before you checkout.

Seems a bit odd, doesn’t it?

Well (visually speaking) that’s exactly what WooCommerce does by default.  How? By placing the Proceed To Checkout button all the way at the bottom of the cart page.  Here, I’ll show you an example.  Carefully watch your brain as you scroll down to the bottom of this image.

You looked at all the items didn’t you 🙂

Now, imagine your customer.  Firstly, the Proceed to Checkout button SHOULD be front and center and easy for the customer to see!  Unfortunately, the customer (just like you did) had to scroll through ALL the items, ALL the details, and ALL the way down the page past ALL the cart information before they ever got to the actual button that allows them to move on to the checkout page.

Not cool.

So… Let’s FIX IT!

Let’s add this gist to the child functions.php file and I’ll show you what it does in a second.

https://gist.github.com/BurlesonBrad/639d4a632e3fbba8e77e

Now, we’re going to hook in before the cart page’s “parts” start to appear.  That way the proceed to checkout button will be at the top of the page.  Now, what this gist won’t do is change the class on the button.  So, if you want, you can definitely change the class in the code to correctly reflect whatever you want on your theme – to the left, to the right, bigger, ….whatever else.

proceed to checkout button
having the word ‘cart’ is completely optional and up to your individual theme

The point though, is that we want to get the user past the Cart Page as quickly as possible.  It’s not meant to be a place to double check all your items, go back through all the details of your cart, and delay the checkout process. Get the Proceed to Checkout button at the top of your page and….

Let’s get your users to the checkout page as soon as possible!

***Update***

Someone mentioned moving the “Proceed to Checkout” Button to different places: uh…ok. SURE!!

Let’s bump it right up against the Update Cart Button: Here’s what it’ll look like, and the link to the code is right below the image. Enjoy!

 

Proceed to Checkout Next to Update Cart
Proceed to Checkout Next to Update Cart on Desktop
Proceed to checkout on mobile
Proceed to checkout on mobile

And, here’s the code to add to your child functions.php that will let you put the Proceed to Checkout Button right there next to the Update Cart Button:

https://gist.github.com/BurlesonBrad/70c102727f5c8dcd5abb

ENJOY!

17 thoughts on “Proceed to checkout

  1. Not a bad idea. But what about upsells or if the customer wanted to edit the contents of their cart? Or continue shopping? How about the promo box? If they miss that– you’ll have customers calling you? Maybe you have both?

    1. hmm…. ok, Good Point Joe 🙂
      So… where do ‘ya wanna put it?

    2. I wonder if it could / should go between the Apply Coupon button and the Update Cart button. That way it’s a bit further down the page so as to visually capture more of the cart page’s features, yet still not at the very very bottom.

  2. Good idea. I think you could have it at the top like you have it and at the bottom? I think amazon does this. I see a lot of sites using the pop-up of the cart. Continue shopping or checkout. Any increase with conversions or less abandonment? I know much depends on the type of product your selling.

  3. Totally agree with this Brad. I think amazon does this best by putting the checkout button to the right side of the cart details. I would build on that by making the checkout button stick on scroll, so no matter how long your shopping cart is, you still have instant access to checkout.

  4. Works quite nicely, Brad. Only thing I would caution is to change the name of the function “move_proceed_button” if you decide to place the button in both the locations.

  5. Wonderful advice as usual.

  6. hello Brad,
    i am pretty new and need to know exact steps how to do that. where should i place that code exactly??

    thank you

    1. Florenc, you would want to add that code to a “functionality plugin” like this one: https://wordpress.org/plugins/my-custom-functions/

  7. Brad – thank you, this is exactly what I was rooting around in Google looking for! One question: on my site, the “proceed to checkout” button is not top aligned with the “update cart” button. It’s only a bit off, but since they are so close together it’s obvious. Any ideas? Should I ask my template forum for custom CSS?

    Unfortunately, my site is still a dummy site and you have to log in to see it, so I can’t send a link (though I’m happy to take a screenshot.)

    1. Rebecca, I would say that a slight theme adjustment would clear up any spacing issue, but that’s just my initial thought. Like you pointed out, without seeing the site, it’d be hard to actually ‘see’ what’s going on.

      When you get it up and running, feel free to post back and I’ll happily take a look at it for you!

      1. Brad – if I sent you the credentials so you can log in (don’t worry, I’ll change the password when you’re finished) would you mind taking a look now? I don’t expect you to make the fix yourself in my code – but logging in would at least allow you to look at the page I’m talking about. If so, let me know if there’s a private email/response I can use to send you my login/password.

        I’d really rather get this fixed before launching the site, since it looks unprofessional (and we already have customers who will probably immediately start using the site.)

      2. Brad – I went ahead and launched the dummy site, because I needed people to be able to look at it anyway. Here is a link to the cart page so you can see what I’m talking about: http://66.147.244.177/~lavendl6/cart

        It would be great if the “proceed to checkout” button could be aligned with the “update” cart button. It would also be great if the “update cart” button could move back over so it’s centered underneath the column of numbers it’s referring to.

        Again, I realize that this is probably custom CSS or code that is related to my theme, but since questions in that forum sometimes don’t get a response, it would be great if you had a minute to take a look.

        Regardless, thanks again!

        1. table.cart td.actions .input-text, table.cart td.actions .button, table.cart td.actions .checkout-button {
          margin-bottom: 0.53em;
          }

          Rebecca, if you’ll add that snippet of CSS (however fits your setup) then it’ll remove that padding and make the buttons line up.

  8. Hi Brad

    Can You please take a look to the message I wrote You in GitHub?

    https://gist.github.com/BurlesonBrad/70c102727f5c8dcd5abb

    Thanks a lot!

  9. Hi, I couldn’t find any help on the web but this blog seemed to be the closest to helping me out.

    my proceed to checkout button is overlapping the cart totals?

    http://i68.tinypic.com/z8saa.png

  10. Wow it’s really nice, not a bad idea at all.
    the sooner customers see the checkout button, the higher the chance to complete purchase

Leave a Reply

Your email address will not be published. Required fields are marked *