If you’ve made your way to this article, then you’re likely a retailer on WooCommerce looking to reduce checkout abandonment, drive conversions, and increase revenue – using a WooCommerce one page checkout design.
This article will teach you how to build your own WooCommerce single page checkout, and choose the best plugins to make it successful. We’ve broken it down to make it easy to follow along.
We’ll start by reviewing the default WooCommerce checkout page, and look at ways to customize it. Then we’ll take a look at the best extensions for creating a one page WooCommerce checkout page.
The default WooCommerce checkout page is simple. It meets basic ecommerce needs, and enables payment. Since it’s the final step in the sales process, many online store owners fail to give it the attention it deserves, preferring to spend time optimizing the marketplace pages, driving traffic, and shipping orders on time.
The truth is, default checkout pages are not intuitively designed to close a sale or improve conversions. They are designed to process payments after a customer is set to buy. As the checkout is where you capture revenue, you should optimize the checkout experience and reduce the checkout abandonment rate.
WooCommerce’s default checkout page includes all of the essential form fields for making a purchase, including:
The page also shows an order summary with product details, a subtotal, shipping fees, and a final total. There is a call to action that completes the order and processes the payment. This meets the bare minimum for processing an order, but to gain traction and drive revenue, you’ll need to make improvements.
The default page has limited customization options, since it focuses on the bare basics. To customize the checkout page further, you’ll need to download and install plugins or update your WooCommerce checkout with custom code. We cover how to do each of these a little further in this article.
By their design, plugins are easier to use than adding custom code, as they are pre-designed templates that can be easily downloaded, filled with your data, brand logo, and content, and get up and running quickly. Plugins also require little support as they are managed and updated by professionals. They require no coding experience as most use a UI with options to edit fields.
The drawback to plugins is that you are limited to what the plugin is designed to do and its performance capabilities. They require no coding experience, but you are also unable to customize with the same control as you can when coding. Coding requires experience, but offers greater flexibility for customization.
The easiest way to update your checkout is to use a pre-made checkout template theme. These are pre-built and can be customized and formatted to suit your needs and style. These templates come formatted for best practices and with unique styles. You can choose the one that is formatted well for your store and then customize the style to fit your brand more accurately.
These can easily be plugged into your page and filled with content. You can rearrange the format to suit your store. Reorder the shipping and billing fields, display a special message on the checkout page, and style the page to fit your unique brand.
WooCommerce lets you override the page template in the theme that you are using. Simply create a folder structure “woocommerce/checkout” in your theme folder. Copy the checkout page template from the WooCommerce plugin located at “woocommerce/templates/checkout/form-checkout.php” and place this in the new folder created. From here, you can make changes to the file and it will not be overwritten when you update WooCommerce.
This method is extremely easy to use for those with few coding skills, giving you the control you want over your checkout — without the complications of having to code.
Cascading Style Sheets (CSS) is a coding language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML, and XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
The CSS classes used may change according to the theme or plugin in use, but the default classes are typically available. These classes can be further customized using a CSS in a child theme or the customizer itself. To find all the classes available, you can use the browser inspector.
Action Hooks are a useful tool in WordPress that can be used to perform functions (actions) in specific places of a theme or plugin. Many themes and plugins use action hooks as an easy way of letting users modify the output of the project or to add their own custom code, further customizing the checkout.
Action hooks can be used to add and remove elements from a checkout page. There are 9 basic action hooks that can be used on the checkout page:
Depending on the theme you use, there are additional elements, allowing for more action hooks to be used:
All of these action hooks are used to add markup to the page, which enables customized style and performance of your checkout. For example, we can add a message to the billing details section for the customer using the “woocommerce_before_checkout_billing_form” hook:
The end result, once displayed on your page, will look like this:
Using CSS in this way gives you further control over the customization process, from formatting to style.
One of the best ways to improve checkout is to simplify it as much as possible. Having a one page checkout keeps the payment process simple for customers, containing all steps in a single page.
There are a few ways you can customize a WooCommerce single page checkout, but using the WooCommerce One Page Checkout plugin is the easiest and fastest. It not only offers a formatted one page checkout, but allows you to turn any of your ecommerce pages into a checkout page. This lets customers buy from checkout pages directly, enabling product selection and checkout forms to be on a single page.
Customers are able to add or remove products from their cart and complete payment without needing to leave the page or be redirected. Checkout fields can also be shown on a single product page or custom landing pages to create unique promotions and offers. While you can achieve this using customized coding, the WooCommerce One Page Checkout extension gives you all of these features included and ready to go:
Moving and reordering form fields is a more complicated customization when using code, as there is no example code provided as a template to work from. There are sample codes that can be found from other users who have found a way to customize the order and location of form fields.
The easiest way to customize checkout form fields is to use a plugin like the Checkout Field Editor plugin. This extension uses a simple UI that lets you move, edit, add, and remove checkout fields. This plugin lets you edit anything about the fields, including type, label, position, and more.
To edit a field, just change the desired value and save. To add a field, click Add Field, and to remove, check the field you wish to remove and click Disable/Remove. This will add, edit, or remove the form field while maintaining the rest of your theme and layout.
Having a native checkout that doesn’t redirect customers to another site makes payment simple for the user. Using a one-page checkout keeps all order form fields on a single page, ensuring the customer never has to be redirected to a new domain or landing page. There are a range of extensions for your WooCommerce store that allow you to create a one-page checkout, and customize that checkout to suit your needs.
Below are some of the best WooCommerce one page checkout plugins to help you create, optimize, and improve your single page checkout:
This plugin allows you to make any landing page a checkout page. Product selection can be displayed on the same page as the payment, making it easy to add or remove products without leaving checkout. Personalize payment pages to fit your brand and alter the form fields and layout to improve your checkout experience.
Best used for: Fast checkout
While not strictly a one-page checkout, Bolt’s on-page, modal checkout overlays on your ecommerce store so your customers aren’t redirected to another domain, saving them load times. A progress indicator guides customers through each step to completion, making the experience simple to follow and convenient for customers. It’s optimized to give customers an ideal payment experience that is 2x as fast as competitors.Best used for: Optimized checkout
This extension simplifies the ecommerce checkout process by letting customers skip the shopping cart page and head directly to checkout. This allows a customer to jump right from the product page to the checkout, skipping the “Add to Cart” process and expediting the payment experience.
Best used for: Fast checkout
When customers purchase digital goods online, there is no point in dilly-dallying around. They want to pay, download, and start using the service. This plugin lets you skip unnecessary details for digital goods, such as shipping and billing addresses. This template eliminates these steps, making checkout faster and simpler for customers downloading their product.
Best used for: Digital downloads
The WooCommerce Cart Notices plugin enables dynamic, actionable notifications to customers during the payment process. Use notices to encourage a customer to add another item to their order, create urgency to buy now (through a time-sensitive discount or exclusivity). These notices can be customized, including when they are activated, what they say, and how they are formatted and styled.
Best used for: Upselling / creating urgency to buy
Just as the name says, this plugin allows you to add and edit custom form fields to your WooCommerce checkout page such as billing, shipping, and additional form fields. Once installed, you can easily add, delete, edit, customize, and rearrange fields on the checkout page to format the order form for improved conversions.
Best used for: Optimized checkout
Jilt tracks abandoned shopping carts, collecting email addresses when possible and automating abandoned cart recovery emails. You can create and run multiple email campaigns, including a post-purchase summary, a follow up that upsells an additional product, and even just to send a thank you. It’s extremely easy to set up, requiring no complicated configuration. Simply install and run it.
Best used for: Recovering abandoned carts
This WooCommerce extension lets you upsell and cross-sell on the checkout page. Display products and enable them to be added to your item list with one click while customers are already in checkout. The format can be customized, allowing the order summary preview to be automatically updated according to the added products.
Best used for: Upselling and cross-selling
This plugin enables form field editing so that you can customize the format of the order form on your checkout page. Rename, rearrange, hide, and extend checkout fields in the shipping, billing, and additional sections. You can add more unique features and rules, such as forced shipping address, forcing account creation, and removing order notes.
Best used for: Optimized checkout
This plugin improves the post-checkout experience, ensuring that you give customers great customer service and accurate delivery. Customers can choose specified delivery dates on their checkout page, as well as select dates that they cannot accept a delivery. Allowing customers this option has been shown to reduce cart abandonment by up to 50%.
Best used for: Delivery information
Regardless of whether you plan on customizing further with CSS, a single page checkout template that is pre-made and preformatted is a good starting point. You can choose from themes that have formatting, functionality, and layouts that you like, and you can further personalize them to suit your brand.
Below is a list of template resources so you can find ideal templates that can be used on your ecommerce store in no time. Most of these are feature collections of templates and some articles that explain the pros and cons of each template.
This marketplace of checkout page templates comes directly from WooCommerce, so you can trust they will operate smoothly, and will be easy to set up on your WooCommerce checkout. Search one page checkout themes or any other template you are interested in. They also offer themes in categories such as free, new, and responsive, and you can search by the type of industry your ecommerce store is in for designs that will suit your store best.
The Envato Market is a marketplace for ecommerce store themes and templates. Easily search based on the type of ecommerce store you run, the industry you are in, or the integration capabilities you are looking for. You can even filter searches based on categories and tags to refine your search and find a theme that is perfect for your checkout. Add to cart right here, purchase the theme, and have it up and running in no time.
This article covers 25 of the best free WooCommerce compatible WordPress themes. They feature a description of the theme and an outline of what it does well and what the main features are. See a demo of the theme in use and connect to the download of the template.
Choose from a selection of the best WooCommerce themes available from Envato Market and Elements. Learn what sets these templates apart and which industry or product-type they are designed for. See which fits your store and customize further.
This article examines the benefits of 15 top WooCommerce themes, designed to optimize your ecommerce store for improved conversions. They offer a brief summary of the theme as well as key takeaways so you can easily compare what each theme offers.
WooCommerce Storefront is a free WordPress theme that is built for WooCommerce to offer deep integration. This fully compatible template offers full functionality and performance operating with WooCommerce checkout. It is designed to be intuitive and flexible, so the format and style can fit your store’s unique needs.
This collection of WordPress themes integrate seamlessly with WooCommerce, enabling a shopping cart, easy payment processing, a built-in review and rating system, wishlists, and more. Templates are labelled based on the type of industry or product they are best suited for. They also have a live demo option so you can see the template in use.
This article features a number of free WordPress themes compatible with WooCommerce, to give your customers a great checkout experience. Browse from a range of available templates, with a brief description and a list of major features so you know what makes each template stand out.
Artbees is an advanced website page builder that has simple to use UI for customization, global and in-page customization capabilities, control over your layout, and device-specific layouts. Choose from their marketplace, download the theme you want, and then personalize it for your site.
This “Complete WooCommerce Tutorial” has an entire section on the best themes for WooCommerce on WordPress, highlighting responsive, high-quality, and personalizable checkout pages so you don’t need to find them yourself.
QuadLayers summarizes 5 of the best themes for WooCommerce, giving you reasons for their selection. This article also gives a breakdown of what makes a good theme, helping you isolate the key features that matter and choose the right template for your store.
Colorlib covers a collection of fast, responsive themes for your WooCommerce store on WordPress, ensuring that customers can buy quickly and without hiccups. Learn what sets each template apart, why they’d recommend it, and get a demo of the theme in action.
Bolt offers a streamlined checkout experience that integrates seamlessly with your ecommerce store. Using Bolt means eliminating unnecessary form fields, clicks, and redirects, and a sleek design that helps customers save on checkout load times.
Trust in Bolt’s high-quality fraud detection and prevention system to identify fraud, secure the checkout for your users, and approve more valid transactions. We confidently offer 100% coverage of fraudulent chargebacks backed by a fraud system that identifies various checkout variables.