How to Create Checkbox Field In WooCommerce Checkout Page

by Owais Alam  September 5, 2017

Adding custom fields to the WooCommerce checkout page is a serious challenge. In many cases, this requires careful consideration it has serious implication for customers. In many cases, store owners use these additional fields to collect further data about the customers.

In this tutorial, I will highlight how you could add a custom field to the checkout field.

In this tutorial, remember that you would need to register the checkbox using a unique id woocommerce_after_order_notes. Once done, this custom field could be used after the order notes (as the name implies).

Add the Checkbox

Here is the function for adding the checkbox:

Here is the hook for adding the checkbox:

Save the Custom Data

Note that the field is set to required. Thus, if a user leaves this field empty, an error message should be generated. Since the error notification function add_error() has been depreciated, I will use wc_add_notive():

At this point, the custom field (checkbox has been added to the WooCommerce checkout page.

custom checkbox field

Remember that the information provided by the buyer through the custom field needs to be saved along with other data from the checkout page. Here is how the data from the checkbox will be saved with the other data:

Conclusion

In this tutorial, I have discussed the important issue of adding a custom field to the WooCommerce checkout page. To demonstrate the issue, I added a checkbox to the checkout page and then added validation and data saving portions.

If you need helped with the implementation of the idea on your WooCommerce store, do let me know through the comments section.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at owais.alam@cloudways.com

Stay Connected:

You Might Also Like...