Remove fields
Disable validation
Change default fields
Add a field

Billing and Shipping Address Fields

Updated on June 25, 2022

There are two type of fields in WooCommerce – billing and shipping fields (sorry for being so obvious). Some of the fields are presented in both of these categories, like a first name field or a country field. Some – may be presented in one of the categories only, like phone or email.

And now read carefully:

We can make changes in the fields using hook woocommerce_default_address_fields – in this case the changes will affect everything – both edit billing and shipping fields pages in “My account” and the Checkout page as well.
woocommerce_shipping_fields – the same, but affects only shipping fields
woocommerce_billing_fields – the same, but affects only billing fields
woocommerce_checkout_fields – affects only the checkout page, nothing else, this hook is already described in details in a separate tutorial.

Remove Default Billing and Shipping Fields

As easy as:

add_filter( 'woocommerce_default_address_fields', 'misha_remove_fields' );
function misha_remove_fields( $fields ) {
	unset( $fields[ 'address_2' ] );
	unset( $fields[ 'state' ] );
	return $fields;
}

Fields IDs are:

first_name,
last_name,
company,
address_1,
address_2,
state,
city,
country,
postcode

But please note, that if you’re using woocommerce_shipping_fields or woocommerce_billing_fields filter hook, an appripriate prefix (billing_ or shipping_) must be added to a field ID, example:

add_filter( 'woocommerce_billing_fields', 'misha_remove_billing_fields' );
function misha_remove_billing_fields( $fields ) {
	unset( $fields[ 'billing_address_2' ] ); // or shipping_address_2 for woocommerce_shipping_fields hook
	unset( $fields[ 'billing_state' ] );
	return $fields;
}

Disable Field Validation

In this case you do not have to remove the whole field itself but just a certain property of it (required).

Example of making optional the shipping last name field:

add_filter( 'woocommerce_shipping_fields', 'misha_remove_fields' );
function misha_remove_fields( $fields ) {
	unset( $fields[ 'shipping_last_name' ][ 'required' ] );
	return $fields;
}

Here we go:

You can also use woocommerce_default_address_fields if you want to make the last name field optional for both billing and shipping field groups.

On the other hand, if you want to make a field required, just set the required property to true, like this:

$fields[ 'shipping_company' ][ 'required' ] = true;

How to Change the Default Address Fields?

In the previous example I already explained how to make any of the default fields optional or required. But required is not the only field parameter we can change. Here is the list:

label (string)
placeholder (string)
class (array)
priority (integer)

Any of these parameters can be changed. As an example let’s try to make changes in both billing and shipping first name fields:

add_filter( 'woocommerce_default_address_fields', 'misha_change_fname_field' );
function misha_change_fname_field( $fields ) {
	
	$fields[ 'first_name' ][ 'label' ] = 'Name';
	$fields[ 'first_name' ][ 'placeholder' ] = 'What is your name, friend?';
	return $fields;
	
}

Here is the result:

Change First name address field label and placeholder

More examples you can find in my tutorial about WooCommerce checkout fields. Yes, we work with woocommerce_checkout_fields action hook there but it is very similar.

Create Your Custom Address Field

Creating an address field is so much easier than creating fields for the Edit Account page or for the Checkout page.

You do not even have to use woocommerce_form_field() function!

No, really, it is just all about working with an array:

add_filter( 'woocommerce_default_address_fields', 'misha_add_field' );
function misha_add_field( $fields ) {
	
	$fields[ 'fav_color' ]   = array(
		'label'        => 'Favorite color',
		'required'     => true,
		'class'        => array( 'form-row-wide', 'my-custom-class' ),
		'priority'     => 20,
		'placeholder'  => 'Is it black or orange or maybe green?',
	);
	
	return $fields;
}

Keep in mind some things:

If you are going to use woocommerce_shipping_fields or woocommerce_billing_fields hooks, do not forget about field prefix shipping_ or billing_ on line 4. I think the things will work out even without prefixes here, but let’s do everything correctly.

$fields[ 'billing_fav_color' ] = array(

You could guess that it is also a meta key how this field will be stored in the database in wp_usermeta table.

A couple words about CSS classes as well:

form-row-wide – fullwidth field,
form-row-first – 2-columns field, the first column,
form-row-last – 2-columns field, the second column;

You can play with the priority parameter by yourself, for example I set 20 which placed my field under First name and Last name fields:

Create your custom address field in WooCommerce

The cool thing is that it will appear and will be fully functional on the WooCommerce checkout page as well!

How to add the field into WordPress /wp-admin/ Edit Profile pages?

Okay, our field is now displayed on Edit Address pages in “My Account” and in the Checkout page. But what about WordPress admin? It would be cool, if the field will appear also in edit profile pages, don’t you think so? Here is what I mean:

The good news is that you do not have to use show_user_profile and edit_user_profile hooks! 🎉

There is a special hook for that:

add_filter( 'woocommerce_customer_meta_fields', 'misha_admin_address_field' );
function misha_admin_address_field( $admin_fields ) {
	
	$admin_fields[ 'billing' ][ 'fields' ][ 'billing_fav_color' ] = array(
		'label' => 'Fav color',
		'description' => 'Some field description will go here',
	);
	// or $admin_fields[ 'shipping' ][ 'fields' ][ 'shipping_fav_color' ]
	// or both
	return $admin_fields;
	
}

Only two parameters available here – label and description and actually we do not need anything else. Just make sure, that field name (line 5) matches.

If you want to add your field on edit order pages in WordPress admin as well, read here how.

# WooCommerce, Checkout Fields, Shipping

Misha Rudrastyh

Hey guys and welcome to my website. For more than 15 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X

Comments — 11

Max

May 23, 2020

Hi Misha, thanks, worked very fine for me & helped a lot. I added a VAT field in the “my account -> billig address area” via the functions.php of my impreza template. The new field also appears on the checkout page now & entered data is stored in my sql database.
However, I observe that two things do not work properly:
1) in the “my account”-“address” overview page, the new custom VAT field is not shown
2) the VAT-Field is not prefilled with the number entered the last time (both in my account area as well as on the checkout page.

Could you please help me with these two questions? ;)

Misha

May 25, 2020

Hi Max,

First of all – may I ask you what filter hook did you use? 🙃

May 28, 2020

// VAT ID Field for My-account & Checkout page
add_filter( 'woocommerce_default_address_fields', 'max_add_field' );
 
function max_add_field( $fields ) {
 
	$fields['billing_ustid']   = array(
		'label'        => 'Umsatzsteuernummer',
		'required'     => true,
		'class'        => array( 'form-row-wide', 'my-custom-class' ),
		'priority'     => 20,
	);
 
	return $fields;
 }

// load saved VAT ID of customer in myaccount/ checkout page (similar to saved address data)
add_filter( 'woocommerce_my_account_my_address_formatted_address', 'custom_my_account_my_address_formatted_address', 10, 3 );
function custom_my_account_my_address_formatted_address( $fields, $customer_id, $type ) {

	if ( $type == 'billing' ) {
		$fields['billing_ustid'] = get_user_meta( $customer_id, 'billing_ustid', true );
	}

	return $fields;
}

// Display VAT Number in order edit screen

add_action( 'woocommerce_admin_order_data_after_billing_address', 'wpdesk_vat_number_display_admin_order_meta', 10, 1 );

function wpdesk_vat_number_display_admin_order_meta( $order ) {
    echo '<strong>' . __( 'billing_ustid', 'woocommerce' ) . ':</strong> ' . get_post_meta( $order->id, 'billing_ustid', true ) . '';
}

Misha May 29, 2020

1) You can use woocommerce_my_account_my_address_formatted_address hook for this purpose.
2) Here is an example how to make it prefilled.

Sven Jun 20, 2020
Hello,

Thanks for your excellent information.
Just wanted to let you know that I think it is important to include in the post that it is not possible to remove shipping_country field from Shipping in My Account Edit, because Save_address function has the following code:
```
if ( ! isset( $_POST[ $load_address . '_country' ] ) ) {
	return;
}
```
Resulting the Customer would not be able to edit its shipping address or information.

Best regards!
Cees Jun 14, 2021

Finally! “woocommerce_customer_meta_fields” is the hook I was searching for! Thank you so much….

Cheers,

Cees

Frank Alvarez Sep 10, 2021

You are a savior! Thank you so much for sharing your knowledge.

Bosko Jul 14, 2022

Greeting,

I have a problem that I don’t know how to solve, if anyone can help.
When entering an address in the field on the checkout page, it refreshes the entry “too quickly”, as soon as you stop typing after maybe 1 second or less, the address field is refreshed, and then you have to select it again and continue typing, which is a little irritating especially on mobile devices. Could I slow down the refresh time somewhere, to give more time for the customer to enter the correct address?

- Misha Jul 20, 2022
  Hey, first things first we need to remove .address-field class from a field wrapper. Or better change it .address-field-custom for example.
```
add_filter( 'woocommerce_default_address_fields', function( $fields ) {
	$fields[ 'city' ][ 'class' ][1] = 'address-field-custom';
	return $fields;
} );
```
  Please note, that woocommerce_checkout_fields won’t help us with removing the class, only woocommerce_default_address_fields. And of course you may need to do it not only for the City field but for all the other address fields as well.
  
  Our next thing to do is to alter queue_update_checkout() method, which is in checkout.js file.
```
$( document.body ).on( "keydown", ".address-field-custom input", function( e ) {

	const code = e.keyCode || e.which || 0;
	// do nothing if TAB is pressed
	if ( 9 === code ) {
		return true;
	}
	// checkout refresh in 5 seconds
	setTimeout( function() {
		$( document.body ).trigger( 'update_checkout' );
	}, 5000 );

} );
```
jarred May 28, 2025

Awesome Post,

Is there a way to make sure this information apears on the thank you page, and emailed confirmations?

Conradi Feb 6, 2026

Great post Misha!

I copied your code for adding a custom field exactly and used “billing_fav_color” to add the custom field in the front-end billing section. Works great! The same applies to the admin side.

However, I encountered something: the admin side does not show the value from the front site, and vice versa. When I looked in the database, I saw that they generate different meta keys: “billing_billing_fav_color” and “billing_fav_color”.
It’s easy to fix, of course, but what am I doing wrong…?