The WooCommerce Checkout Page is simple by default for there is no built-in option to customize the form in the WooCommerce plugin. So, how to edit & customize the WooCommerce checkout page to speed it up and increase your sales thanks to your custom order form?
Have you ever wanted to optimize the WooCommerce checkout as you've noticed some customers quit before buying?! Do you lack the checkout page customization option for WooCommerce BUT you don't know what to do next or if you do need to hire an expensive programmer?
👉🏽 Today, I will show you the FREE plugin to change the WooCommerce checkout form, rearrange fields, hide some of them, and add custom fields! In this article, you'll learn to customize the WooCommerce checkout page for even better store management!
Table of contents
- WooCommerce Checkout Page by default
- Customize the WooCommerce checkout page with a plugin
- More features for further customization
WooCommerce Checkout Page by default
Let's start at the beginning. This is what the default checkout page looks like:
You have all the fields you may need for standard physical products.
However, you may not need all the checkout fields, for example, the address fields when you sell digital products. So, you'd like to hide them.
If you sell B2B, you need a VAT number field for your clients. So how to add the VAT number field & customize the WC checkout page?
Customize the WC checkout page with a plugin
Of course, there are more cases where you need a solution for the WooCommerce checkout page customization!
Standard WooCommerce doesn't let you personalize the checkout page. So, you need to add custom code or a checkout editor plugin for WooCommerce.
👉🏽 The best plugin to personalize the standard checkout form is Flexible Checkout Fields.
Watch this short video to see what this plugin can do in its free version:
Over 90,000 stores use this plugin worldwide daily! People appreciate this plugin (with average ratings of 4.6 out of 5 stars):
You can find a lot of positive reviews like the one above! However, you don't have to take my word for it. Download this plugin for free and check it out yourself! You will get the powerful solution to customize the WooCommerce checkout form for there are a lot of plugin features!
Download the free plugin to customize the Checkout
Once you install and activate the plugin, you can go to its settings. Select WooCommerce → Checkout Fields in your WordPress menu:
Customize the checkout fields - change their position
👉🏽 This is one of the first things you can do with Flexible Checkout Fields.
Look at the final effect🎉:
Add custom fields to the WooCommerce checkout page
You may also add new fields to customize the checkout form, for example, when you need more information for your WooCommerce order processing or invoicing purposes.
👉🏽 Adding a new field to the checkout is quite simple:
👉🏽 You can choose from the following field types:
Remove (hide) WooCommerce checkout fields
Let's say you don't need all fields in the Billing details or the Ship to a different address section.
You can hide some of these billing or shipping fields if you need to. For example, when you want to create a custom WooCommerce checkout form for selling digital goods. Faster WooCommerce checkout means more orders received!
👉🏽 Look, this is how you can do it:
Let's disable one default WooCommerce checkout field from the Billing details.
Unmark this checkbox if you want to hide the field. So, you can hide the default WooCommerce fields!
👉🏽 With the plugin, you can change the WooCommerce checkout form page to show only the fields you want, for example:
- First name
- Last name
- Email address
Sounds incredible? Check it out:
Required/ Optional fields in WooCommerce checkout sections
You may also want to require a user to make an action on the field(s). E.g. if you sell B2B only, you would like to require customers to provide the VAT EU number for accounting purposes.
👉🏽 To make a WooCommerce checkout field required, all you have to do is to mark a 'Required Field' checkbox in the field's settings:
It's so easy! This is how you do it:
You can also unmark this checkbox. This way you can change fields to optional (non-required). That will work also for the default WooCommerce checkout fields!
Customize checkout notes
By default, there is an order notes field on the WooCommerce checkout forms. It is a simple text field.
You can add many different custom fields to the checkout notes.
👉🏽 Just go to the Flexible Checkout Fields plugin's Settings. You can enable different custom sections there.
Enable Before and/or After Order Notes.
You can put any custom field you want in there.
The plugin will show it before and/or after the standard order notes.
Look at the example:
Also, you can use CSS styling to change these fields' look.
Show custom messages at the checkout
Sometimes there is a delay in processing orders (e.g. during Holidays). You may want to show a text or a custom message to your customers directly on the checkout page. It can be a simple text message like this:
The Flexible Checkout Fields plugin lets you add any field there. It doesn't have to be a text. It may be a checkbox, a select box, or even a date picker. Put there any of Flexible Checkout Fields' custom fields.
Go to Settings and enable the Before Customer Details custom section.
Then, go to the Before Customer Details tab and add a field. Click Save Changes and you're ready!
Now you have a message on the WooCommerce checkout form.
More plugin features for checkout customization
In this short guide, I showed you how to edit and customize your WooCommerce checkout form. Use the free plugin for WooCommerce to create the custom checkout order form & thus speed up the checkout process and get more orders!
How do you like my article? Let me know in the comments section below!
Also, you may read more about WC checkout in our WooCommerce Checkout Complete Guide →
And if you need the PRO version of the plugin to handle conditions for checkout fields, add extra fees to the checkout, use more custom field types, and get PRO support, visit the Flexible Checkout Fields product page. If you have any questions contact us!