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:
- 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 fieldswoocommerce_billing_fields– the same, but affects only billing fieldswoocommerce_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' ] ); 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 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'] = 'Your mom calls you'; return $fields; }
Here is the result:
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:
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:
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.
