Senior Full Stack Developer
February 2018
« Jun    


Adding custom fields to WooCommerce checkout


WooCommerce checkout consists of basic checkout fields for billing, shipping and order notes but what if we need to add additional fields in the checkout ??

New fields in the WooCommerce checkout can be added using the hooks/filters provided by the WooCommerce plugin.

Required Filter

In WooCommerce checkout billing and shipping fields are passed through “woocommerce_checkout_fields” filter so we can hook our function to add/remove/edit these fields.


Lets suppose we want to add a shipping phone number in the WooCommerce checkout. Add the following code into your theme functions.php

Go to your checkout page and you will shipping phone number there.

Under the hook Woocomemrce take care of saving and displaying the value of your newly created field so you don’t need to worry about this.

Now that we have added our shipping phone number it is time to show this under the order screen. Add the following code into your functions.php

With the above code added you can see your shipping phone number on the order screen.

Adding Custom Fields

“woocommerce_checkout_fields” filter is good if you want to add Billing and Shipping fields but when you need to add custom fields outside billing and shipping fields then you need to adopt different approach.

Lets suppose you want to add extra field after the order notes in the checkout. Add the following code into your functions.php file

The above code will add a custom field under order notes.

Now that our custom field is added, add the following code to save it into the datbase

Our newly created field is now saved into the database with other fields.

Comments 0
There are currently no comments.