With this snippet, you’ll learn how to add a custom WooCommerce checkbox checkout field. You may need to collect additional data, such as a birth date, if it is a gift, or require certain acknowledgements from the shopper before placing the order. This field is not an additional billing or shipping field, but an extra custom WooCommerce checkbox checkout field similar to the order notes or email signup checkbox and will usually appear after the billing and shipping fields or before the payment buttons. We can use the WooCommerce checkout page visual hooks guide as a placement guide.
With this in mind, let’s get down to business and add a custom WooCommerce checkout field
Step 1. Add a new field to the WooCommerce checkout
First, you will need to create a field that will appear on the checkout page. This field will contain the HTML form field and collect the data. We will place this field before the place order button. The field name will be is_gift and will be a checkbox and will be used in all snippets below.
/*
* Snippet: How to add a custom WooCommerce checkbox checkout field 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?736
* Tested with WooCommerce 8.8.2
*/
add_action( 'woocommerce_review_order_before_submit', 'wcsuccess_add_custom_checkout_field' );
function wcsuccess_add_custom_checkout_field( $checkout ) {
woocommerce_form_field( 'is_gift', array( // CSS ID
'type' => 'checkbox',
'class' => array('form-row mycheckbox'), // CSS Class
'label_class' => array('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox'),
'input_class' => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),
'required' => false, // Mandatory or Optional
'label' => 'This order contains gifts', // Label and Link
));
}Step 2. Save the field to the order
This snippet will allow you to save the custom field to the order. This custom field can then be shown on the order page, email invoice, and thank you page.
When saving the field you will notice that the custom meta field is being saved with an underscore (_) prefix as _is_gift. The underscore prefix tells WordPress to make this field private, so it will not be visible as a custom field on the order edit screen. To make it public, simply save the field without the underscore prefix.
/**
* Snippet: How to add a custom WooCommerce checkbox checkout field 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?736
* Tested with WooCommerce 8.8.2
* "Save Custom Checkbox Field to WooCommerce Order"
*/
add_action( 'woocommerce_checkout_update_order_meta', 'wcsuccess_save_new_checkout_field' );
function wcsuccess_save_new_checkout_field( $order_id ) {
// only process if the checkbox is not empty
if ( ! empty( $_POST['is_gift'] ) ) {
$value = isset($_POST['is_gift']) ? 'yes' : 'no';
update_post_meta( $order_id, '_is_gift', sanitize_text_field( $value ) );
}
}Step 3. Displaying the field on the thank you page, order edit screen and order email
The final step allows you to display the field on the thank you page, order edit screen and order email. We need to add 3 custom functions for each location.
/**
* Snippet: How to add a custom WooCommerce checkbox checkout field 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?736
* Tested with WooCommerce 8.8.2
* "Display Custom Checkbox Field on WooCommerce Order thank you page, order edit screen and order email"
*/
// Add field to the thank you page
add_action( 'woocommerce_thankyou', 'wcsuccess_show_new_checkout_field_thankyou' );
function wcsuccess_show_new_checkout_field_thankyou( $order_id ) {
if ( get_post_meta( $order_id, '_is_gift', true ) ) echo '<p><strong>Order contains gifts:</strong> ' . get_post_meta( $order_id, '_is_gift', true ) . '</p>';
}
// Add the field to the order edit screen
add_action( 'woocommerce_admin_order_data_after_billing_address', 'wcsuccess_show_new_checkout_field_order' );
function wcsuccess_show_new_checkout_field_order( $order ) {
$order_id = $order->get_id();
if ( get_post_meta( $order_id, '_is_gift', true ) ) echo '<p><strong>Order contains gifts:</strong> ' . get_post_meta( $order_id, '_is_gift', true ) . '</p>';
}
// Add to the order email
add_action( 'woocommerce_email_after_order_table', 'wcsuccess_show_new_checkout_field_emails', 20, 4 );
function wcsuccess_show_new_checkout_field_emails( $order, $sent_to_admin, $plain_text, $email ) {
if ( get_post_meta( $order->get_id(), '_is_gift', true ) ) echo '<p><strong>Order contains gifts:</strong> ' . get_post_meta( $order->get_id(), '_is_gift', true ) . '</p>';
}Where do you add these snippets?
You can add these snippets to the child theme functions.php file or to a PHP code snippets plugins. Do not add the snippets to the functions.php file or any other file of your main theme as any customisation will be lost during an update of the theme and it runs the risk of creating an error and breaking your website. As always, take care when editing files and adding functions and make sure never to define the same function twice on your website. Every function name should be unique.
I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.
Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science. I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.
Google Scholar ID: https://scholar.google.com.au/citations?user=0KvpwNEAAAAJ&hl=en
ORCID: https://orcid.org/0000-0001-8113-1296
Stay In Touch
