Billing and Shipping Address Fields

WooCommerce has 4 different filter hooks which allow to manage the address fields, let’s figure out when and how to use each of them.

I tried to google this before creating a tutorial and found so much weird information about billing and shipping fields in WooCommerce. Let’s shed some light on this now! 👍

There are two type of fields in WooCommerce – billing and shipping fields. Some of the fields are presented in both of these categories, like a first name field or a country field.

And now read carefully:

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' ] );
	return $fields;
 
}

Fields IDs are:

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

How to make an optional last name field

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:

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'] = 'Your mom calls you';
 
	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 5. 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:

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:

Add custom address field into edit user profile pages in WordPress admin

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.

Related tutorials (it seems like you do not need any WooCommerce fields editor plugins, do you?)

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 10 yrs of experience.

Need some custom developer help? Let me know

Follow Misha

Need some help with WooCommerce?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Leave a comment

php js HTML CSS Code