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.
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.
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.
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.
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!
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!
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: