• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Essential Premium WooCommerce Plugins - WP Desk

  • Premium Plugins
  • Support
  • Blog
  • My Account
  • 0

Join more than 10,000 others

WooCommerce tips & tricks, WP Desk news - right to your inbox.

Updated: May 15, 2019 / Checkout

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

Szymon Barczak

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:

WooCommerce Checkout Page

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.

Flexible Checkout Fields WooCommerce

Edit, add new or hide unnecessary fields from the checkout form. It's all about conversions and better user experience.

Download for free or Go to WordPress.org
WP Desk
20,000+ Active Installations
Last Updated: 2019-11-05
Works with WooCommerce 3.4.0 - 3.8.x

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

Review of Flexible Checkout Fields

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:

Flexible Checkout Fields in 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.

Fields' order

Look at the final effect:

Before & After: Name Fields

Customize checkout notes

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

Order Notes

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.

Flexible Checkout Fields: Settings (Order Notes)

You can put any custom field you want in there.

Before Order Notes - settings

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

Look at the example:

Checkout Notes 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:

Required field 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:

Street Address: disable field

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:

WooCommerce Checkout Page for Digital Goods

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:

WooCommerce Message at the Checkout

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.

Before Customer Details

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

Some message - fields settings

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 →

Read more: Simple Guide to Configure Custom Fields in WooCommerce Checkout →

Tweet

Szymon Barczak

Content Management Specialist at WP Desk. Concentrates his efforts on growing our plugin user base. In his free time he is interested in psychology and retro games.

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 →

Join more than 10,000 others

WooCommerce tips & tricks, WP Desk news - right to your inbox.

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

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
  • FAQ
  • Docs
  • Get Support

Legal

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

© 2019 WP Desk