• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Essential Premium WooCommerce Plugins - WP Desk
  • Plugins
  • 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.

Szymon Barczak

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

Updated: June 08, 2022 / Plugin Tutorials

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.

How to edit WooCommerce checkout page with a plugin

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.

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

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
70,000+ Active Installations
Last Updated: 2022-08-10
Works with WooCommerce 6.5 - 6.8.x

Over 70,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 the 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.

 

change fields order

Drag & Drop to change the field 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 in WooCommerce checkout sections

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 →

Tweet

3 minutes read71025 views

Reader Interactions

Comments

  1. danny says

    2020-03-29 at 10:24

    hi, my url https://shopzclub.com i am using woocommerce theme, and i just succeeded integrating Paypal to my website. then, i got these problems; 1) the Paypal button appeared on ‘cart’ page, which not appropriate. it supposed to appear on ‘Checkout’ page (which i haven’t constructed yet). So, how to hide the paypal button on ‘cart’ page? And can i use Flexible checkout field plugin to construct the checkout page. If not, how to do it? Sorry.. i am not good in coding and technical 2) if I decided to skip the checkout page, how to hide the ‘checkout’ button and ‘proceed to checkout button’ in minicart and main cart page? Currently, the paypal button did appear, but it is out of position. how to fix it? Really sorry, i don’t know where to get help… got to post it here.. hopefully anyone can help. thanks again.

    • Marta Pawlonka says

      2020-05-19 at 10:41

      Hello Danny. The best way to receive help with your problem will be asking on WooCommerce’s support: https://wordpress.org/support/plugin/woocommerce/

  2. Andre Sinclair says

    2020-12-15 at 18:34

    Do you know if this plugin can setup the checkout like the NordVPN checkout. I really like how clean it is and how the payment options are on the left. In my current checkout my AmazonPay button is 10 miles away from the other options and it’s just not very clean. Please checkout the NordVPN checkout page and let me know if I can arrange my checkout like that with this plugin. Thank you.

    • Tomasz Drzewiecki says

      2020-12-22 at 16:15

      Hello Andre.
      The FCF plugin is used to edit form fields but not to edit the entire Checkout page. With its help it is possible to add or remove fields. But it will not change the website design. The appearance of the page (division into columns etc.) depends on the template settings.

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 →

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 › 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
  • Octolize

Legal

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

© 2022 WP Desk