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
    ));    
}

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

1 Comment

  1. 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