How To Add A Checkbox To Woocommerce Checkout Page

In this tutorial I’m going to show you how to add a checkbox to the woocommerce checkout page. By default, Woocommerce comes with the ability to add a checkbox confirming that you agree to the terms and conditions. But what if you need something else to be confirmed

before the buyer commits to the payment? Such as confirming they have selected the correct size variations or understand that there is a manufacturing or handling time.

While I personally don’t use checkboxes, mainly because I feel that they present a barrier to completing a purchase, I also understand there are circumstances and situations where they will be needed.

/*
* Snippet Add A Checkbox To Woocommerce Checkout Page
* how-to Read at https://wcsuccessacademy.com/?p=368
* source code https://wcsuccessacademy.com/?p=368
* author John Cook
* tested with WooCommerce 3.3.3
*/
add_action('woocommerce_review_order_before_submit', 'add_my_checkout_tickbox', 9);

function add_my_checkout_tickbox() {
  //you can change the message here just ensure that the formatting is maintained
  echo '<p class="form-row terms"><input id="deliverycheck" class="input-checkbox" name="deliverycheck" type="checkbox" /> <label class="checkbox" for="deliverycheck">';
  _e('Please confirm you understand there is a 10 day handling time on this order prior to dispatch', 'textdomain');
  echo '</label></p>';
  
}

// tick the box to acknowledge handling time response if not checked

add_action('woocommerce_checkout_process', 'not_ticked_box');

function not_ticked_box() {
  if ( ! (int) isset( $_POST['deliverycheck'] ) ) {
    // You can edit the message below between the two ' ' for when there is an error eg box not ticked
    wc_add_notice( __( 'Please acknowledge the handling time' ), 'error' );
  }
}

This is how it should look

Where to place the code

Place the code for how to add a checkbox to the Woocommerce checkout page in the theme functions.php file of your child theme, or a functions plugin. Add the code to the end of the file before the closing ?> (if your file has it).

Let me know if it works

Did this work for you? Please let me know in the comments if the code snippet works for you.

5 3 votes

Article Rating

John Cook

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