Change the Default WooCommerce Checkout Page - rearrange fields, hide some of them or add custom fields

WooCommerce Checkout Page is simple by default. It works for most of the cases. However, you may need to rearrange fields, hide some of them or add custom fields. In this article, I'll show you how to make it.

WooCommerce Checkout Page by default

Let's start at the beginning. This is how the default checkout page looks like:

You have all the fields you may need for standard physical products.

However, you don't need the address fields if you sell digital products. You'd like to hide them. If you sell B2B, you need a VAT number of your clients. There should be a VAT number field in the checkout.

There are different cases where you need something more than the default WooCommerce checkout page.

Standard WooCommerce doesn't let you personalize checkout page. You need a plugin.

The best plugin for checkout pages is the Flexible Checkout Fields.

Over 50,000 stores use this plugin worldwide on a daily basis! People appreciate this plugin:

You can find many more positive reviews like the one above! However, you don't have to take my word for it. You can download this plugin for free and check it out yourself!

Once you install and activate the plugin, you can go to its settings. Select WooCommerce → Checkout Fields in your WordPress menu:

This is the screen we will use in this guide.

Change your fields' order

This is one of the simplest things you can do in Flexible Checkout Fields.

Look at the final effect:

Customize checkout notes

By default, there is an order notes field on the WooCommerce checkout page. 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.

Required fields

You may 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 their VAT EU numbers.

All you have to do is to mark a 'Required Field' checkbox in the field's settings:

You can also unmark this checkbox. This way you can change fields to non-required. Even the standard, default WooCommerce ones!

Shipping and billing address

You can hide shipping address if you need to. Also, you can hide all unnecessary fields to create checkout for digital goods.

Look:

Unmark this checkbox if you want to hide the field. You can hide the default WooCommerce fields!

This way you can left only:

• First name field
• Last name field
• And email address field

on the checkout page.

Sounds incredible? Check it out:

Show messages on WooCommerce checkout page

Sometimes there is a delay on processing orders (e.g. during Holidays). You may want to show some message to your customers then. It can be a simple text message like this:

Flexible Checkout Fields plugin lets you add any field in there. It doesn't have to be a text. It may be a checkbox, select box or even a datepicker. Put there any of Flexible Checkout Fields' custom fields.

Go to Settings and enable Before Customer Details custom section.

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

Now you have a message on the WooCommerce checkout page.

Summary

In this simple guide, I showed you how to personalize your WooCommerce checkout page. How do you like my article? Let me know in the comments section below!

Also, you just have to check out our WooCommerce Checkout Complete Guide →