How to Edit Billing Details WooCommerce Checkout Page

There are several ways you can edit billing details in WooCommerce. In this tutorial, I want to highlight the way you can edit billing details to remove the fields or remove the requirement.

Table of Contents

In the previous post, I shared how to disable Zip/Postal Code field on checkout page or how to remove the Zip/Postal code validation.

How to Edit billing Details WooCommerce ( Remove Fields, Disable Validation, Add Custom Placeholders & Add Custom Form Labels)

Today, I want to show you how to edit billing details and remove the fields that you don’t want to be shown to your customers.

WooCommerce Edit Billing Details Using Free Plugin

There are more than a dozen plugins both free and premium plugins that you can use to edit the WooCommerce billing details.

Each of these plugins have unique features and interface design. The best Free plugin to edit billing details in WooCommerce is Checkout Field Editor (Checkout Manager) for WooCommerce.

This plugin allows you to edit core Billing, Shipping and Additional fields on WooCommerce checkout.

In the edit form you can add custom field options such as: Name, Type, Label, Placeholder, Class, Label Class, validation rules etc. (availability of these options may change based on the field types).

WooCommerce Edit Billing Details Using Code Snippet

You can also edit billing details on WooCommerce checkout page by adding a code snippet to the functions.php file of your theme.

Remove WooCommerce Checkout Billing Fields

First, you can remove the billing fields that you don’t like using the code snippet below:

 

/**
 * Edit Billing Details to Remove Fields You Dont Want 
 **/
function njengah_remove_checkout_fields( $fields ) {

    // Billing fields
    unset( $fields['billing']['billing_company'] );
    unset( $fields['billing']['billing_email'] );
    unset( $fields['billing']['billing_phone'] );
    unset( $fields['billing']['billing_state'] );
    unset( $fields['billing']['billing_first_name'] );
    unset( $fields['billing']['billing_last_name'] );
    unset( $fields['billing']['billing_address_1'] );
    unset( $fields['billing']['billing_address_2'] );
    unset( $fields['billing']['billing_city'] );
    unset( $fields['billing']['billing_postcode'] );
	
	return $fields;
	
} 

	add_filter( 'woocommerce_checkout_fields', 'njengah_remove_checkout_fields' );

You can remove all the fields and add custom fields or you can remove from the code snippet below those that you want to keep.

This is the fastest way to remove billing fields from WooCommerce checkout page without using a plugin.

For example, if we only wanted to show the first name, last name and email only on the billing details, we would change the code to be as in the code snippet below:

 

function njengah_remove_checkout_fields_keep_email_name( $fields ) {

    // Billing fields
    unset( $fields['billing']['billing_company'] );
    unset( $fields['billing']['billing_phone'] );
    unset( $fields['billing']['billing_state'] );
    unset( $fields['billing']['billing_address_1'] );
    unset( $fields['billing']['billing_address_2'] );
    unset( $fields['billing']['billing_city'] );
    unset( $fields['billing']['billing_postcode'] );
	
	return $fields;
	
} 

	add_filter( 'woocommerce_checkout_fields', 'njengah_remove_checkout_fields_keep_email_name' );

Remove WooCommerce Checkout Billing Fields and Shipping Fields

You can also extend this logic to remove the shipping fields too as well as the billing fields. The complete code that would remove the billing fields and the shipping fields is as follows:

 

    function njengah_remove_checkout_fields_billing_shipping( $fields ) {
   
		// Billing fields
		unset( $fields['billing']['billing_company'] );
		unset( $fields['billing']['billing_email'] );
		unset( $fields['billing']['billing_phone'] );
		unset( $fields['billing']['billing_state'] );
		unset( $fields['billing']['billing_first_name'] );
		unset( $fields['billing']['billing_last_name'] );
		unset( $fields['billing']['billing_address_1'] );
		unset( $fields['billing']['billing_address_2'] );
		unset( $fields['billing']['billing_city'] );
		unset( $fields['billing']['billing_postcode'] );

		// Shipping fields
		unset( $fields['shipping']['shipping_company'] );
		unset( $fields['shipping']['shipping_phone'] );
		unset( $fields['shipping']['shipping_state'] );
		unset( $fields['shipping']['shipping_first_name'] );
		unset( $fields['shipping']['shipping_last_name'] );
		unset( $fields['shipping']['shipping_address_1'] );
		unset( $fields['shipping']['shipping_address_2'] );
		unset( $fields['shipping']['shipping_city'] );
		unset( $fields['shipping']['shipping_postcode'] );

    return $fields;
  } 
add_filter( 'woocommerce_checkout_fields', 'njengah_remove_checkout_fields_billing_shipping' );

Remove WooCommerce Checkout Billing Fields, Shipping Fields and Order Notes

You can also remove the order note field that is in located below the billing section and shipping section using the same logic but adding the order_comments removal option as in the combined code snippet below:

 

    function njengah_remove_checkout_fields_billing_shipping_order( $fields ) {
   
		// Billing fields
		unset( $fields['billing']['billing_company'] );
		unset( $fields['billing']['billing_email'] );
		unset( $fields['billing']['billing_phone'] );
		unset( $fields['billing']['billing_state'] );
		unset( $fields['billing']['billing_first_name'] );
		unset( $fields['billing']['billing_last_name'] );
		unset( $fields['billing']['billing_address_1'] );
		unset( $fields['billing']['billing_address_2'] );
		unset( $fields['billing']['billing_city'] );
		unset( $fields['billing']['billing_postcode'] );

		// Shipping fields
		unset( $fields['shipping']['shipping_company'] );
		unset( $fields['shipping']['shipping_phone'] );
		unset( $fields['shipping']['shipping_state'] );
		unset( $fields['shipping']['shipping_first_name'] );
		unset( $fields['shipping']['shipping_last_name'] );
		unset( $fields['shipping']['shipping_address_1'] );
		unset( $fields['shipping']['shipping_address_2'] );
		unset( $fields['shipping']['shipping_city'] );
		unset( $fields['shipping']['shipping_postcode'] );

                // Order fields
                unset( $fields['order']['order_comments'] );

    return $fields;
  } 
add_filter( 'woocommerce_checkout_fields', 'njengah_remove_checkout_fields_billing_shipping_order' );

WooCommerce Edit Billing Details Requirement or Validation

When one of the billing fields is not filled, WooCommerce generates an error like the most common error – Billing Postcode is Not a Valid Postcode / ZIP.

This occurs since by default there is a validation feature on the WooCommerce billing checkout fields.

To resolve this issue and avoid these errors from showing up when the field is left empty, you need to remove the billing details validation.

The code snippet below will remove the validation from the Billing phone field, this code should be added to the functions.php file of your active theme.

	/**
	 *  Example to Remove Billing Field Validation
	 **/ 
 
		add_filter( 'woocommerce_billing_fields', 'njengah_remove_phone_field_validation');

		function njengah_remove_phone_field_validation( $fields ) {
		
			$fields['billing_phone']['required'] = false;
			
			return $fields;
		}

You can extend this logic to more fields like the name, email and so on. You simply need to replace the following line of code with the field ids of the field you want to remove the validation from.

$fields['billing_phone']['required'] = false;

WooCommerce Edit Billing Details Placeholders and Labels

Another way to edit WooCommerce billing details is to change the default WooCommerce checkout page form labels and place holders. You can achieve this using the code snippet below:

  add_filter('woocommerce_checkout_fields', 'njengah_edit_checkout_placeholders_labels');
  
		function njengah_edit_checkout_placeholders_labels($fields){
		
			 $fields['billing']['billing_company']['placeholder'] = 'Custom Placeholder';
			 $fields['billing']['billing_company']['label'] = 'Custom Label';
		 
		 return $fields;
		 }

Conclusion

In this tutorial, we have highlight the various ways you can edit WooCommerce billing details to customize WooCommerce checkout page to fit your needs. Its important to remember that these codes snippet work the same way plugins work that edit the billing details, shipping details and the order notes.

It is also advisable you always add these code snippet to a child theme of the active theme. If you don’t have a child theme, you can learn on how to create a child theme using this post – create Storefront child theme.

There are several ways of customizing WooCommerce but most common is to hide the features that you do not like, I shared a comprehensive guide on how to hide most features on your WooCommerce store, Ultimate WooCommerce Hide Guide. This can be a great place to get you started with WooCommerce customization.

If you are using the WooCommerce default theme – Storefront theme, you can learn from the 80+ Storefront customization Tips on how to make your WooCommerce store have a professional look and feel .

Finally, I am always available to help you with any WooCommerce issue or fix any errors on your site if you require to hire WordPress expert or WooCommerce developer.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.