WooCommerce – DIY One Page Checkout

To improve conversion on your WooCommerce website a one page checkout page is very useful. When you allow customers to skip the cart page and go directly to checkout this will make it easier for them to buy an item. This reduces the rate of potential customers dropping out during the buying process. A whopping one in ten people drop out because the checkout process is too long – Webcredible Poll. And that makes sense in this age of everything on demand, smartphones and Google doesn’t it. We do not like waiting. So let’s deal with this shall we? Let’s build a DIY One Page Checkout!

DIY One Page Checkout Prerequisites

There are paid plugins that help you with direct checkout, product button options and all on one checkout pages. There is for example WooCommerce Direct Checkout Pro. But this direct checkout plugin does not do all that is needed. You after all still need a checkout page that loads cart details, but not all cart view details.

There are also a couple of One Page Checkout plugins like WooCommerce One Page Checkout and One Page Shopping , but again they do not really offer what we need. The former offers custom one page checkouts while we want this to be for all products. The latter has a demo that currently is not working and support that is lacking.

There may be others that I have missed of course, but let’s go the DIY way and set all up ourselves shall we? Let’s build a DIY One Page Checkout setup.

To set up the whole one page checkout there are several things we have to take care of. To achieve better lead conversion and get your customers to buy using direct checkout you need the following:

Redirect to Checkout on clicking “add to cart”

Title change of “add to cart” to buy now or “process to checkout”

Add Cart or view cart details on checkout page

Checkout Cart Notice – Should not be loaded as it will be irrelevant

Direct Checkout

To get the add to cart button, not just add your product to the customer’s shopping cart, but send him directly to the cart you can add the following code to your theme’s functions.php

This code will make the “add to cart” button redirect to the checkout page. This way the view cart is bypassed.

Product “Add to Cart” Button Change

To change the button text from “add to cart” to “proceed to checkout” or “buy not” there are two action hooks you can use. One to replace the text on the product archive page or shop page and one action to replace the text on the single product page.

To change the “add to cart” text on the single product page add the following filter:

I may add an action or filter for this too at a later stage. But this CSS option does the trick and does not force you to add a checkout template to your-theme/woocommerce folder and tweak it. I prefer to avoid WooCommerce templates in child themes as you then depend on updates in WooCommerce AND the parent theme.

Hiding Cart Notice

It does not make sense to show the cart notice on the checkout page. The cart overview will be there already so no need to have this notice with a link to the cart. Especially if you have a cart icon with these options in the main navigation already. Use this CSS to hide this notice completely:

Summary

And there you have it. A DIY One Page Checkout all done with all the tweaks needed:

direct to checkout from product or shop page

proceed to checkout or buy now button text

checkout cart notice removed

checkout page with cart overview

As mentioned here and there, some solutions could perhaps be replaced with better ones. Certainly the CSS tweaks would be better done as actions or filters. However until I find better and easier options these will work wonderfully well for you and me!

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.

Hi,
thanks for mentioning our one page shopping;
do you still have issues with our demo? Can’t repeat any.
and regarding support – thanks for notifying issues, I’d be glad to hear what login were you using to contact us to track the problem.

If you’re missing any feature in our solution – let me know, we’re currently planning new features for the plugin.