Here is how you can add a required checkbox field in the WooCommerce checkout page that forces a user to checkbox the request before they can proceed to payment, similar to the terms and condition checkbox.

Add Checkbox Woocommerce Checkout Page

WooCommerce Form Field

Add the code in your functions.php

add_action( 'woocommerce_review_order_before_submit', 'bt_add_checkout_checkbox', 10 );
/**
 * Add WooCommerce Checkbox checkout
 */
function bt_add_checkout_checkbox() {
   
    woocommerce_form_field( 'checkout-checkbox', 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'      => true, // Mandatory or Optional
       'label'         => 'Ok I agree with <a href="/checkout-checkbox" target="_blank" rel="noopener">Checkout Checkbox Page</a>', // Label and Link
    ));    
}

add_action( 'woocommerce_checkout_process', 'bt_add_checkout_checkbox_warning' );
/**
 * Alert if checkbox not checked
 */ 
function bt_add_checkout_checkbox_warning() {
    if ( ! (int) isset( $_POST['checkout-checkbox'] ) ) {
        wc_add_notice( __( 'Please acknowledge the Checkbox' ), 'error' );
    }
}

So change the CSS ID (checkout-checkbox)  to what you want, optional to add a secondary CSS Class and change your text Label and Link

CSS

.woocommerce-invalid #checkout-checkbox {
    outline: 2px solid red;
    outline-offset: 2px;
}

Add a bit of CSS to get the failed validation style of red box around the checkbox, use the same CSS ID.

 

Ref

14 Comments

  1. jacek on December 2, 2020 at 6:46 pm

    Hi, i have added your snippet to my page but unfortunately even when it is checked the error appears that it is unchecked. even if somebody want to buy my product on product page with apple pay without going to checkout page.

  2. ame bin salam on November 26, 2020 at 10:17 pm

    hi, I want to add a description before the checkbox and after that the check box. how can I do it. can any help me

  3. Paco on November 5, 2020 at 5:31 am

    🇫🇷 Thank you very much for that, really very useful (͡⚈‿⚈͡).

  4. Menachem Engel on October 26, 2020 at 11:22 am

    Hi. This is so perfect for what I need on my site. Thank you so much! Any way to get this on the cart page instead of checkout and a customer wont be able to proceed to checkout unless they check the box? Thank you!

  5. Bertrand on October 16, 2020 at 10:05 am

    Hi,

    This code is really helping, thanks a lot!
    However, the required mode only works for Woocommerce bank transfer payment.

    Paypal & Stripe keep skipping the required mode for this checkbox.
    I have been looking around but do not know how to resolve this, any idea?

    thanks in advance

  6. Naomi on September 4, 2020 at 11:49 am

    Hi,
    thanks for the code, but as well as Damian, “required” is not working.

  7. Damian on September 2, 2020 at 2:07 pm

    Hi,
    Looks good, but this code is not working for me. It passes even when user will leave them not checked :/

    • Neil Gowran on September 4, 2020 at 9:42 pm

      Have updated the code snippet

      • Damian on September 4, 2020 at 10:08 pm

        Great! Work as expected :)
        Thank you again!

        I let myself extend your code and add an option to save this checkbox in WooCommerce order status for case when I have more chceckboxes (required or not) and want to know which one was selected:

        /* Save checkbox information in order details admin area meta */
        add_action(‘woocommerce_checkout_update_order_meta’, ‘checkout_order_meta’);
        function checkout_order_meta( $order_id ) {
        if ($_POST[‘checkout-checkbox’]) update_post_meta( $order_id, ‘checkout-checkbox’, esc_attr($_POST[‘checkout-checkbox’]));
        }

        /* Display field value on the order edition page */
        add_action( ‘woocommerce_admin_order_data_after_billing_address’, ‘select_checkout_field_display_admin_order_meta’, 10, 2 );
        function select_checkout_field_display_admin_order_meta($order){

        echo ‘‘.__(‘Checkbox no. 1′).’‘.__(‘ (user selected value): ‘) . get_post_meta( $order->id, ‘checkout-checkbox’, true ) . ”;

        }

        It work’s, but If you have any comment on that it would be great. I’m just a beginner.

        • Neil Gowran on September 4, 2020 at 11:51 pm

          Nice one, will have to check it out

  8. khan on August 19, 2020 at 4:55 pm

    how to add a required checkbox but only when a specific product is in checkout?

    • David on October 5, 2020 at 9:04 pm

      The same question for me… Someone knows hot to do?

  9. Damiaan van Vliet on May 18, 2020 at 6:55 am

    Great, thanks for sharing the code. Could be useful on a future project.

Leave a Comment