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

add_filter('add_to_cart_redirect', 'theme_prefix_add_to_cart_redirect');
function theme_prefix_add_to_cart_redirect() {
 global $woocommerce;
 $checkout_url = $woocommerce->cart->get_checkout_url();
 return $checkout_url;
}

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:

add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' ); // 2.1 +
function woo_custom_cart_button_text() {
 return __( 'Proceed to Checkout', 'woocommerce' );
}

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

add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' ); // 2.1 +
function woo_archive_custom_cart_button_text() {
 return __( 'Proceed to Checkout', 'woocommerce' );
}

Cart Content Display on Checkout

To load the cart view or cart contents at the top of the checkout page before the billing forms you can just add the shortcode for the cart before the checkout shortcode on the checkout page.

[woocommerce _ cart]
[woocommerce _ checkout]

NB Spacing added to avoid real display

This will then show the full cart on the checkout page. A lot easier than dealing with this using custom code. There may be a good action or filter for it, but I have not found one as of yet.

Abridged Cart View on Checkout

The issue with the cart loading as we are doing with the shortcode  is that the coupon code option will then be shown twice. To hide this in the cart display table use this CSS:

.woocommerce-checkout div.coupon {display:none;}


.woocommerce-checkout td > input.button {display:none;}

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:

.woocommerce-checkout .woocommerce-message {display: none !important;}

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!

Disclaimer: All tested with Total Theme Child Theme