Popular Categories

How to add custom check boxes fields 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>
        <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>
        </label>
    </p>
    <?php
}

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: By altering and playing with the above code, you can also add different types of field like input boxes.

Was this helpful?
Did I missed something? Do you have a question? Get in touch.