In this post I’ll show you how to handle WooCommerce checkout page fields customization. The Checkout page is an eCommerce term that refers to pages shown to a customer during the step-by-step checkout process.
WooCommerce Checkout Customization – Shipping or Billing Form Fields
The shipping address is where you want products to be shipped, while the billing address is where you live or Where your bills are to be delivered.
The eCommerce shipping is a service through which seller ships their products to buyers. A shipping form collects the shipping details of a customer. It must contain all required shipping fields.
Add WooCommerce Custom Shipping Field
WooCommerce is a very flexible eCommerce system. We can easily customize the checkout page, it provides all the necessary hooks. Below are the three steps to add a custom field to WooCommerce checkout shipping form.
- Add the required field array() data and hook it to woocommerce_checkout_fields
- Field validation to check it must contain value
- Store the Field value in database
- Display field value on the admin order edit page
To add a custom field to WooCommerce billing form, just replace shipping word with the billing in all places within the below code.
Add the following code to functions.php file
Remove WooCommerce Checkout Shipping or Billing Fields
Removing any checkout field is too easy. You just need to pass that field within unset() function. The unset() function is a PHP function that is used to delete a specified variable. In WooCommerce it is used to remove array elements e.g unset( $fields[“billing_country”] );
Add the following code to functions.php file to remove billing for fields.
Add the following code to functions.php file to remove Order Notes from checkout field in WooCommerce.
Add the following code to functions.php file to remove billing, shipping, accounts and Order Notes from checkout page in WooCommerce.
Re-Order WooCommerce Checkout Billing or Shipping Fields
Sometime you want to reorder any WooCommerce checkout page fields. In order to do this you have to use the priority array value with relevant form array value e.g $fields[‘billing’][‘billing_first_name’][‘priority’] = 10;
To reorder of fields, the priority value must be changed. Higher priority fields are shown in the end. e.g priority value of 30 will be displayed after 20.
Add the following code to functions.php file.
To reorder field to WooCommerce shipping form fields, just replace billing word with the shipping in all places within the above code.
Best WooCommerce Customization Practices
Flatsome Theme Customization
Custom WooCommerce Plugin Development
WooCommerce Checkout Manager