WooCommerce Checkout Page Fields

Last Updated : April 20, 2020

WooCommerce Checkout Page Fields

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.

WooCommerce Checkout Page 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

Share post with others

8 thoughts on “WooCommerce Checkout Page Fields”

  1. Hi,
    I build a form at Custom Product Options. At “Label” I put some text “PoE Switch:”
    Enable Price is marked and Price Options are “Different Price for each options” and Pricing Type is “Fixed”.
    Use price as fee is also marked and Allow Multiple Selections isn`t marked.
    At “Options” i put three options. At first row I put the same text into “Label” and “Value” and the Price field
    is empty.
    At second row the text is different to the first row, but also the same at “Label” and “Value. Price field shows 100.
    The third row also with another price. (You can see i tat the attached images).

    If a purchaser choose one of the options only the Label text (between Element ID and Help text) is shown on the bill.
    What can i do, to show the choosed label text of one of the three options?
    Thanks for helping

  2. Hello,

    I also have a flatsome theme and I want to unchecked the button ship to a different address…
    How to do this. Do I have to put some code to my child theme or there is an other way?

    Best Regards,

  3. Hi, I am using a multi-step checkout (3 steps). Could you please tell me if there is a possibility to move the billing to the place order step of checkout (review order) after removing it from the first step and how to do it?

  4. hi i have a flatsome theme and i want to checkout option in product page. i want another button with button of Add to cart. there will be to buttons on product page one for Add to cart and other is checkout. how can i add checkout option in product page. check the link of product page there is just ine button with name of Add to Card i want second button of checkout. please help me Stay Bless and Stay Safe. Thanks a lot


Leave a Comment