WooCommerce shipping and billing address section is the most important section in the checkout. It works well by default. Sometimes you need something more. You can't change the way it works and looks or... can you? I'll teach you in this article how to customize these sections the way you want!
WooCommerce Shipping and Billing Address Section
Your customers have to provide their billing details while placing an order. There is an option to set a different shipping address. A customer needs to mark a checkbox on the checkout page.
It works very well by default. For most cases, there is no need to change that page. I guess you're here because you need something more :)
You can personalize the checkout page the way you want:
- set some fields as not required
- disable any fields (eg. for digital goods)
- change the order of fields
- and add your own custom fields.
You need a simple plugin: Flexible Checkout Fields to do so. Over 70,000 WooCommerce stores use it daily.
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.orgOnce you install it, you can configure the WooCommerce shipping and billing address sections. Go to WooCommerce → Checkout Fields. You can switch between them using the tabs on the top of the screen (Billing and Shipping):
As you see, you can easily Add New Field or Edit Section. You have such options as:
- Enable Field
- Required Field
- Label
- Validation
There are many more features under the Appearance, Display On and Advanced tabs. You can check them out by yourself. If you want to read more about them, then continue with this article.
Checkout Fields Configuration
Let's look at the configuration options.
Required Fields
Some fields on the Shipping and Billing Address sections are required. You can easily change that. Look:
As you see, these fields are optional. You can also create new custom fields and set them as required:
How? Simply mark or unmark Required Field option:
Read more about WooCommerce Checkout Required Fields
Validation
You can use default WooCommerce validation or your custom one.
Validation is very useful:
If you want to add validation to your shipping and billing address sections, use our WooCommerce Checkout Validation Guide →
Display On
You can configure where to display a field in there. By default, the plugin displays the field in all the locations:
- Thank You Page
- My Account Page - address section
- My Account Page - orders section
- in Emails
You can change it. Check out our guide about WooCommerce My Account Custom Fields →
Appearance
Change the way your fields from WooCommerce shipping and billing sections look like.
Set your own custom class for a field:
This way you can change any field from this:
Into this (or anything you want):
Read more in our guide about Styling Custom Fields with CSS →
Conditional Logic
You can implement conditional logic to shipping and billing address sections. Want an example? Look:
A customer needs to mark I want an invoice checkbox. After this action, new fields pop up.
There are a lot of scenarios where you can use the conditional logic. You can set up conditional logic for fields...
...the products/category...
...or selected shipping method.
As you see, you need to go to Advanced tab. You'll find all the options in there.
Learn more about WooCommerce Checkout Conditional Fields →
Other settings
Flexible Checkout Fields plugin lets you add custom fields to other sections such as:
- Order Notes
- Customer Details
- or Registration Form
Make a use of it! Read our article on Customizing Checkout Page →
WooCommerce Checkout Fields Editor
As you see, Flexible Checkout Fields plugin is very powerful. For us (the developers) this plugin is the best on the market :)
But don't just take our word for it, over 70,000 WooCommerce stores worldwide use it on a daily basis.
We often add new features or fix bugs in this plugin. People really appreciate it!
This plugin also utilizes the WordPress look & feel and is very easy to use due to the clean interface.
People appreciate what we have created:
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!
Download Flexible Checkout Fields →
Customize Shipping and Billing Address section in WooCommerce emails
In order to customize the shipping and billing section in Woo email templates, you will need a third party plugin called YayMail. You can download it for free and design the emails in a drag and drop email builder.
The premium version of this WooCommerce email customizer supports Flexible Checkout Fields. It helps show your added custom fields in the order email templates and localize the section as you like it.
Built-in design options to help you beautify the email including:
- Billing title
- Shipping title
- Font family
- Background/box border/text color
Summary
In this short article, I've shown you the simplicity of customizing WooCommerce shipping and billing address sections. How do you like it? Let me know in the comments section below.
Once you're here, you may need a guide through the WooCommerce checkout configuration. We have already created an awesome guide about WooCommerce Checkout Settings →
