logo-blue lock_outline

BOLT BLOG

Master Woocommerce One Page Checkout: Best Plugins, How To Customize, and More


Shopping cart icon and laptop screen

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 create your own WooCommerce single page checkout, and choose the best plugins to create a successful checkout. 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. Last, we’ll review the best extensions for creating a one page WooCommerce checkout page.

 

Understanding the standard WooCommerce checkout page

Default 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:

  • First and last name
  • Country
  • Address
  • Town / City
  • ZIP code
  • Phone number
  • Email address
  • Shipping address

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.

 

Customizing WooCommerce one checkout page

The default page has limited customization options, since it focuses on the bare basics. To customize the checkout page further, you will 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, content, and 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.

Customize using a checkout template

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.

File location screenshot with file location tree

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.

Customizing with CSS

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.

Browser inspector mode

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.

Customize WooCommerce checkout page using hooks and filters

Action Hooks are a useful tool in WordPress that are used to perform functions (actions) in specific places of a theme or plugin. Many themes and plugins use actions 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:

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_checkout_shipping
  • woocommerce_checkout_after_customer_details
  • woocommerce_checkout_before_order_review
  • woocommerce_checkout_order_review
  • woocommerce_checkout_after_order_review
  • Woocommerce_after_checkout_form

Depending on the theme you use, there are additional elements, allowing for more action hooks to be used:

  • woocommerce_checkout_before_terms_and_conditions
  • woocommerce_checkout_after_terms_and_conditions
  • woocommerce_before_checkout_billing_form
  • woocommerce_before_checkout_registration_form
  • woocommerce_after_checkout_registration_form
  • woocommerce_before_checkout_shipping_form
  • Woocommerce_after_checkout_shipping_form

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:

Customizing using action hooks

The end result, once displayed on your page, will look like this:

Customized note to customers in billing details section

Using CSS in this way gives you further control over the customization process, from formatting to style.

Customize to a WooCommerce one page checkout

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 to a single page.

There are a few ways you can customize to 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 make 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:

  • Product selection and checkout: Customers can add products to their order and complete payment without ever leaving the page.
  • Simple code and free setup: Their user interface makes personalizing checkout pages accessible and efficient.
  • Custom landing pages: Create unique landing pages for special events, promotions, or select customers and enable checkout directly from those pages.
  • Curated product pages: Create a page for a single featured product, a number of related products, or promotional products to help customers find exactly what they want.
  • Built-in and custom templates: This plugin comes with pre-made templates that fit various ecommerce applications. You can also create a custom one using their plugin.

Moving, adding, or removing checkout fields

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.

Choose checkout field in field editor

To edit a field, just change the desired value and save. To add a field, click Add Field, and to remove one, 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.

Edit checkout field in field editor

 

The 10 best WooCommerce one page checkout plugins

Having an isolated, self-contained 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, as well as 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:

1. WooCommerce One Page Checkout

WooCommerce one page checkout plugin dashboard

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

2. Bolt

Bolt single page checkout screen

While not strictly a one-page checkout, Bolt’s simplified checkout streamlines the Woocommerce checkout experience, with significantly higher checkout conversion rates than the standard checkout. Bolt’s checkout box 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. Bolt’s team continuously tests and improves the checkout design to maximize conversion rates and revenue.

Best used for: Optimized checkout

3. Direct Checkout for WooCommerce

Direct Checkout for WooCommerce plugin dashboard with checkout options

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

4. WooCommerce Checkout for Digital Downloads

WooCommerce Checkout for Digital Downloads plugin dashboard with checkout options

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

5. WooCommerce Cart Notices

WooCommerce Cart Notices plugin dashboard creating a new alert page

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

6. WooCommerce Checkout Field Editor (Manager) Pro

WooCommerce Checkout Field Editor Pro plugin dashboard

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

7. Jilt for WooCommerce

Jilt for WooCommerce plugin dashboard

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

8. WooCommerce Checkout Addons & Upsells

WooCommerce Checkout Addons and Upsells plugin dashboard

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

9. WooCommerce Checkout Manager

WooCommerce Checkout Manager plugin dashboard

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

10. Order Delivery Date for WooCommerce

Order Delivery Date for WooCommerce plugin dashboard

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

 

12 WooCommerce one page checkout templates

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 feature collections of templates and some articles that explain the pros and cons of each template.

1. WooCommerce Themes

This marketplace of checkout page templates comes direct from WooCommerce, so you can trust they will operate smoothly and 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.

2. Envato Market

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.

3. 35 Best Free Ecommerce WordPress Themes 2019

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.

4. 19+ Best WooCommerce Themes: To Make a Better Online Store

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.

5. The 15 Best WooCommerce WordPress Themes for 2019

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.

6. WooCommerce Storefront

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.

7. Free WooCommerce WordPress Themes & Templates 2019

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.

8. 25+ Best FREE WooCommerce WordPress Themes 2019

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.

9. Artbees Themes

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.

10. The Best WordPress Themes for Using With WooCommerce

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.

11. Best WordPress Themes for WooCommerce

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.

12. 52 Best Responsive WooCommerce WordPress Themes to Build Awesome eStore 2019

Colorlib covers a collection of fast, responsive themes for your WooCommerce store on WordPress, ensuring that customers can buy quickly and without hickups. Learn what sets each template apart, why they’d recommend it, and get a demo of the theme in action.

 

Bolt offers a single-page checkout that functions seamlessly with your ecommerce store, eliminates form fields required to make the process quick, and a sleek design that gives customers an appealing checkout and saves them 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.

Bolt Team November 19

If you enjoyed this post, share it.

Want to see a 5-minute demo?