The checkout page is one of the important pages of an eCommerce website. The checkout page is where the sales happen, so the appearance of your WooCommerce checkout page is essential. While the default page works just fine, you might be looking to add more content to the checkout page. You might also require customer information or just experiment with different styles to improve conversion.
There are more than a few ways to edit the checkout page but let us take a look at the easiest ways to do it in this article.
Storefront Theme
This method works best if you are either just starting with your eCommerce website or have already built it with the Storefront theme. Storefront is the official theme by WooCommerce for eCommerce websites.
Since Storefront is developed by the same core team working on WooCommerce, it is an easy solution in terms of integration with WooCommerce, and plugins made for WooCommerce offer a quick setup and hassle-free website maintenance which is particularly important for eCommerce stores.
How to Edit the WooCommerce Checkout Page with Storefront
Whether you are in the process of setting up your eCommerce store with Storefront or trying to edit the checkout page, follow the steps below to get it done quickly.
From your WordPress dashboard, go to Appearance > Customize. The Storefront theme gives a live preview as you customize, so click on the Checkout button to open the checkout page. Here you get a list of features you can edit in the left sidebar.
These features allow you to edit all the parts of your website since we are looking to edit the WooCommerce checkout page in particular, we are looking at just that. You can also edit other parts of your website as you wish here.
For example, I have chosen to add a custom widget and the editor offers a list of positions where you can insert it.
Suppose we add a widget below the Header, let us see how it reflects in the live preview on the front end of the website.
After adding any element of your choice to the page, click on Publish to set your website live.
As you can see, adding new elements as blocks to the checkout page is quite straightforward using the Storefront theme for WooCommerce.
Let’s take another example of adding a different type of element to the checkout page for an added visual example.
For this example, Let us edit the typography. Here you can change the colors of the Heading, Text, Accent, and Hero Heading and Hero Text. Here is the checkout page with default colors before making any changes.
Change the color of the Heading by clicking on it and changing it from the default color to red.
Next, let’s change the text color from the default gray to purple. We have to add here that while it is not the most aesthetically logical choice. It is just to show you an example.
The color changes are reflected in the live preview and the text is now a glaring purple.
In this way, you can add additional fields and content such as text, widgets, buttons, menus, and even images to your checkout page as you wish. Remember to publish your website after making the changes as the live preview. is just that, a preview and does not save your changes.
With Plugins
Another way to edit the WooCommerce checkout page is through plugins and there are a good bunch of plugins in the store to do the job. Let’s take a look at some plugins that we think are among the best for editing your checkout page.
WooCommerce Plugin – Checkout Field Editor
There are a lot of plugins in the WordPress plugin store to edit the WooCommerce checkout page. It can’t get better than the official solution offered by WooCommerce so let’s start with that.
Since we are listing the easiest way, let us start with this plugin which again, is developed by WooCommerce meaning it comes with the advantage of “airtight integration” as WooCommerce claims. This is particularly valid when it comes to using the tools provided by WooCommerce for WooCommerce.
The plugin is efficient and has the necessary features like adding and removing several kinds of input fields like texts, radio buttons, dropboxes, and checkboxes to add to the checkout section. You can also add pricing options to the input fields that automatically change the cart value accordingly.
The plugin is available at an annual subscription of $49.
Checkout Field Editor and Manager for WooCommerce by Acowebs
The Checkout Field Editor and Manager for WooCommerce lets you add, hide and modify the content on the default WooCommerce checkout page. The plugin uses a drag and drop builder for easy customization. Besides these functions, you can also reorder the fields, and add order details fields. You also have the option to view the information customer had given during checkout in the order email.
You can add text, paragraphs, email, password fields, radio buttons, and headers with the plugin.
The plugin is free with the premium version starting from the $39 annual plan.
Checkout Field Editor (Checkout Manager) for WooCommerce
Checkout Field Editor (Checkout Manager) for WooCommerce by ThemeHigh is another plugin to edit the WooCommerce Checkout fields. It offers 20 different types of input fields you can add to your checkout page.
Besides adding, editing, and hiding default fields, you can also add custom CSS to change the style of your checkout page further.
The plugin supports multiple languages by default. The pro version offers 24 types of input fields, and more positions to place the fields among other features.
The paid plans for this plugin start from a $49 annual plan.
Fluid Checkout for WooCommerce
Fluid Checkout offers a simplified checkout process for returning customers for better conversion rates. Add coupon code fields, and single or multi-step checkout options to reduce unnecessary steps in the purchase process.
The plugin boasts having a Shopify-like checkout experience as one of its unique features. It is mobile-friendly and has the option to easily add trust symbols and adapt to any theme for a fluid setup experience.
It offers field editing features and goes beyond that by saving the information of returning customers so they don’t need to repeatedly enter them. Customers can also log in without leaving the checkout page. This is a bonus that removes another unnecessary step for customers in the checkout section.
The plugin is free, with the paid plans starting from €79/year.
Custom Fields WooCommerce Checkout Page
This plugin makes it to the list because of its simplicity. It covers all the basics so you can edit the checkout page of your WooCommerce store as you want. Add and remove fields as you wish from the default page with 12 types of fields offered by the plugin.
You can also reorder the fields and reset them to default in a single click if the changes aren’t working for you.
The plugin has a premium version that offers 17 types of fields and more positions to place them. The plans start from $38/year for a single site.
I hope this article helps you find a way to edit your WooCommerce store’s checkout page easily. If you have any questions or suggestions, let us know in the comments.
Further Reading
