Makers Byte
Published in

Makers Byte

How to add custom check boxes fields above the terms and conditions in WooCommerce checkout?

A snippet of code for adding custom checkboxes field above the terms and conditions in WooCommerce checkout.

Suppose you built an e-commerce site using Woocommerce and you would like to add two more check where the terms and conditions checkbox is present (The image shows the location).

To add check boxes, here is the snippet of code:

1. The 1st hooked function displays the 2 additional checkout fields:

add_action('woocommerce_checkout_before_terms_and_conditions', 'checkout_additional_checkboxes');
function checkout_additional_checkboxes( ){
$checkbox1_text = __( "My first checkbox text", "woocommerce" );
$checkbox2_text = __( "My Second checkbox text", "woocommerce" );
<p class="form-row custom-checkboxes">
<label class="woocommerce-form__label checkbox custom-one">
<input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="custom_one" > <span><?php echo $checkbox1_text; ?></span> <span class="required">*</span>
<label class="woocommerce-form__label checkbox custom-two">
<input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="custom_two" > <span><?php echo $checkbox2_text; ?></span> <span class="required">*</span>

2. The 2nd hooked function will check that both check boxes are “selected” to allow checkout, displaying a custom error notice if not:

add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');function my_custom_checkout_field_process() {
// Check if set, if its not set add an error.
if ( ! $_POST['custom_one'] )
wc_add_notice( __( 'You must accept "My first checkbox".' ), 'error' );
if ( ! $_POST['custom_two'] )
wc_add_notice( __( 'You must accept "My second checkbox".' ), 'error' );

Where to add this snippet?
You can place PHP snippets at the bottom of your theme in functions.php file. Adding above code will result in 2 checkboxes that displays like the image shown below:

Note: Altering and playing with the above code, you can also add different types of field like input boxes.

If you enjoyed this post…it would mean a lot to me if you could click on the “claps” icon…up to 50 claps allowed — Thank You!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store