Creating The Simplest One-page WooCommerce Checkout

Creating the simplest one-page WooCommerce checkout

Over the years, we have built a lot of WooCommerce websites but never paid attention to the simplification of the checkout process. Just recently, we had a rude awakening, when one of our clients said that the checkout process was tedious because of the numerous forms to be filled. This has prompted this very crucial tutorial on how to create the simplest one-page WooCommerce checkout page.

We all know how important user experience is, and how it can either have you retain or lose your customers. Well, we are not in the business of having you lose customers, so, let’s dive straight into this.

Setting default shipping to customer billing address

On the checkout page, WooCommerce may require you to choose if you want to use your billing address as the shipping address or not. In case your billing address is different from shipping address, then this may be good for you.

Assuming that billing and shipping address is the same, then, why not have just one form? We implement this by making the shipping address same as billing address.

Go to Woocommerce > Settings > Shipping Tab > Shipping Options Tab

Select “Default to customer billing address” and save, as illustrated below:

Default to customer billing address - One-page WooCommerce checkout

Enabling one-page checkout

To enable one-page checkout, simply install WooCommerce Single Page Checkout plugin and activate it.

Then go to pages and find “checkout” page, edit it and replace the default WooCommerce checkout shortcode

with

After that, go to “Settings” > “Checkout Settings” and set both fields to “Two Column.”

Single Page Checkout Settings - One-page WooCommerce checkout

Removing optional and required fields

The billing details form has a whole lot of fields to be filled as seen below, email address being the last form.

There is also the additional information (order notes) form on the right which very few customers may find necessary to use.

Removing optional and required fields - One-page WooCommerce checkoutTo remove some of these fields, we use custom functions.

Custom functions can either be pasted in the child/parent theme’s functions.php or you can use a plugin to insert the custom code.

In this case, we will use “My Custom Functions” plugin to insert the codes.

Download/search for the plugin, install and activate it then go to “Settings” > “PHP inserter” and paste the codes below:

The specific fields removed by the code above have been explaind and some are just what they are, phone number, postcode etc.

The resulting checkout form

When the code above is used, the result is shown below:

The resulting checkout form - One-page WooCommerce checkout

Note: This is an excellent solution for stores selling services and products that do not need shipping. However, if you ship your products, then take out fields that are not necessary but leave those that are crucial in helping you ship your products to buyers.

Hopefully, this tutorial helps you to create the simplest one-page WooCommerce checkout page. This will not only impress your customers but also retain them.

Also learn how to redirect default WordPress registration to WooCommerce to avoid spam registrations.

Freelance Desk

Lance Desk, a world-class professional web development, and marketing firm. We pride ourselves in providing professional web design and web development, SEO, domain and web hosting, graphic design (Business cards
Print Design, Logo/Branding Design, & Brochure Design etc) to individuals and institutions across the globe.

Leave a Reply

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