• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Essential Premium WooCommerce Plugins - WP Desk
  • Plugins
  • Bundle
  • Support
  • Blog
  • My Account
  • 0

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

Bartosz Gajewski

How to Customize WooCommerce Checkout Page with a FREE plugin?

Updated: December 29, 2022 / Plugin Tutorials

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

  1. WooCommerce Checkout Page by default
  2. Customize the WooCommerce checkout page with a plugin
    • Download the free plugin
    • Reorder checkout fields
    • Add custom fields to the checkout page
    • Remove (Hide) checkout fields
    • Required or Optional fields
    • Customize checkout notes
    • Show custom messages on the checkout page
  3. 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:

The default WooCommerce Checkout Page
Default WooCommerce checkout form. I will show you how to edit WooCommerce checkout page.

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.

Flexible Checkout Fields WooCommerce

Customize checkout page WooCommerce. Edit, remove, or add custom fields for the WooCommerce Checkout Page. Edit WooCommerce Checkout Page easily!

Customize checkout page or Go to WordPress.org
WP Desk
80,000+ Active Installations
Last Updated: 2023-03-13
Works with WooCommerce 7.1 - 7.5.x

Watch this short video to see what this plugin can do in its free version:

Over 80,000 stores use this plugin worldwide daily! People appreciate this plugin (with average ratings of 4.6 out of 5 stars):

Review of Flexible Checkout Fields

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:

Flexible Checkout Fields in WooCommerce - edit WooCommerce checkout page
This is how your WooCommerce checkout plugin looks like

Customize the checkout fields - change their position

👉🏽 This is one of the first things you can do with Flexible Checkout Fields.

how to change woocommerce checkout page
How to customize WooCommerce checkout - drag and drop checkout custom fields

Look at the final effect🎉:

Before & After: Name Fields - custom field order for the WooCommerce checkout page
WooCommerce checkout page customization - final result

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:

Add a checkbox field to the WooCommerce checkout page
You can add a new field (like a checkbox) for the WooCommerce checkout page customization

👉🏽 You can choose from the following field types:

  • Text
  • Textarea
  • Number
  • E-mail
  • Phone
  • URL
  • Checkbox
  • Color
  • Headline
  • Paragraph
  • Image
  • HTML
💡Of course, you can use a lot of settings for the field and customize its styling.

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.

change woocommerce checkout page
Checkout for WooCommerce - custom checkout fields

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:

WooCommerce Custom Checkout for selling Digital Goods - A plugin for order form customization
Custom checkout page WooCommerce

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:

Required field in the WooCommerce checkout form - settings
Custom WooCommerce checkout page - required field

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!

💡Read more on how to remove required fields from the WooCommerce Checkout & how to set any field as required or optional.

Customize checkout notes

By default, there is an order notes field on the WooCommerce checkout forms. It is a simple text field.

Order Notes for WC checkout
Checkout for WooCommerce with a note from the customer

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.

woocommerce checkout plugin to edit checkout page
WooCommerce checkout plugin - sections you can edit in the checkout

You can put any custom field you want in there.

customize checkout page woocommerce
Change WooCommerce checkout page by adding extra fields

The plugin will show it before and/or after the standard order notes.

Look at the example:

Checkout Notes for WooCommerce order form - Example
Custom WooCommerce checkout page - final result

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:

woocommerce checkout page customization
Custom checkout page WooCommerce - add any message to the checkout

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.

💡This feature requires the PRO version of the plugin. See all features of our checkout page customization PRO plugin for WooCommerce!

Go to Settings and enable the Before Customer Details custom section.

woocommerce custom checkout page plugins settings
These settings will help you in WC checkout page customization

Then, go to the Before Customer Details tab and add a field. Click Save Changes and you're ready!

custom checkout fields
WooCommerce checkout plugin - Flexible Checkout Fields

Now you have a message on the WooCommerce checkout form.

💡Read more about how to add text or a message to your WooCommerce checkout page.

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!

Flexible Checkout Fields PRO WooCommerce £59

Customize checkout page WooCommerce. Edit, remove, or add custom fields for the WooCommerce Checkout Page. Edit WooCommerce Checkout Page easily!

Customize checkout page or View Details
WP Desk
80,000+ Active Installations
Last Updated: 2023-03-15
Works with WooCommerce 7.1 - 7.5.x

Related to WooCommerce custom checkout form

  • Add a message field to WC checkout

    add woocommerce checkout message
    WooCommerce checkout message. Find out how to add a note field to the checkout page with Flexible Checkout Fields.

  • All about WooCommerce custom fields

    custom fields woocommerce
    WooCommerce custom fields guide. Find out how to add and configure WooCommerce checkout fields. A real treasure trove of knowledge.

Tweet

4 minutes read76293 views

Bartosz Gajewski

Content Specialist in WP Desk. He tries to increase the number of plugin users with useful content. Privately an enthusiast of mountains and European cinema.

Powered by WP Desk

WP Desk brings you great WooCommerce plugins. We strive to save your time and money by speeding up your processes. Use our plugins to build a better store. Awesome support included in the package.

Premium WooCommerce Plugins →

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

WP Desk › Checkout › How to Customize WooCommerce Checkout Page with a FREE plugin?

Footer

WP Desk - WooCommerce Plugins

At WP Desk we create great WooCommerce plugins with awesome support. Save time and money with our e-commerce solutions. See how we can help you improve your e-store →

Secured by Comodo

WP Desk

  • About us
  • Giving Back
  • Blog
  • Contact us

Products

  • Premium Plugins
  • Get Support
  • WooCommerce Invoices
  • Email Marketing
  • Octolize

Legal

  • Terms & Conditions
  • Refund Policy
  • Support Policy
  • Privacy Policy

© 2023 WP Desk