Add a second checkbox in WooCommerce registration form

Question

How could I add a second checkbox in the registration form for WooCommerce users?

On the 'my account' page of WooCommerce it gives you the option to log in or register (that's where I need help).

I already have a checkbox established to accept the privacy policy (just below the user, e-mail and password boxes).

This is the hook that I have achieved thanks to this article

add_action( 'woocommerce_register_form', function () {
  
  woocommerce_form_field( 'politica_privacidad_registro', array(
      'type'          => 'checkbox',
      'class'         => array('form-row rgpd'),
      '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,
      'label'         => 'He leído y acepto la política de privacidad',
      )); 
}, 10);

add_filter( 'woocommerce_registration_errors', function ( $errores, $usuario, $email ) {
    if ( ! (int) isset( $_POST['politica_privacidad_registro'] ) ) {
        $errores->add( 'politica_privacidad_registro_error', 'Tienes que aceptar nuestra política de privacidad' );
    }
return $errores;
}, 10, 3);

But I need another checkbox so that they accept another necessary requirement on the web (age verification). That mandatory age verification checkbox to register, of course, would be accompanied by a small phrase.

I have tried with some hook in the functions.php, but it happens that if you accept the privacy checkbox you could already register even if you do not accept the second mandatory checkbox.

This is the code that best suited what I needed to this post

// To add the form
function add_age_verification() {
    ?>

    <p class="form-row form-row-first">
    <label for="reg_age_verification" class="woocommerce-form__label woocommerce-form__label-for-checkbox"><?php _e( 'age verification', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox" name="age_verification" id="reg_age_verification" value="<?php if ( ! empty( $_POST['age_verification'] ) ) esc_attr_e( $_POST['age_verification'] ); ?>" />
    </p>

    <div class="clear"></div>

    <?php
}
  // to validate the form
function validate_age_verification( $errors, $username, $email ) {
    if ( isset( $_POST['age_verification'] ) && empty( $_POST['age_verification'] ) ) {
        $errors->add( 'age_verification_error', __( '<strong>Error</strong>: First name is required!', 'woocommerce' ) );
    }
    return $errors;
}

 // to save the form into user meta age_verification
function age_verification_save( $customer_id ) {
    if ( isset( $_POST['age_verification'] ) ) {
        update_user_meta( $customer_id, 'age_verification', sanitize_text_field( $_POST['age_verification'] ) );
   }
}

add_action( 'woocommerce_register_form', 'add_age_verification' );
add_filter( 'woocommerce_registration_errors', 'validate_age_verification', 10, 3 );
add_action( 'woocommerce_created_customer', 'age_verification_save' );

Aside from the incompatibility of hooks, also this second checkbox with the tests that I have carried out appears the phrase in a line and the check box below. It must all go together on one line.

How could I do it and have both hooks work without creating incompatibilities?

Answer 1

Your code contains some minor mistakes

• woocommerce_created_customer missing from the privacy policy
• reg_age_verification & age_verification are used interchangeably
• Regarding the display of the fields, this can be done by adding/modifying CSS selectors: form-row-first, form-row-last & form-row-wide. Furthermore, it is a matter of CSS adjustments, depending on the theme you use

So you get:

// Add fields to register page
function action_woocommerce_register_form() {
    // First checkbox
    woocommerce_form_field( 'politica_privacidad_registro', array(
        'type'          => 'checkbox',
        'class'         => array( 'woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide' ),
        '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,
        'label'         => __( 'He leído y acepto la política de privacidad', 'woocommerce' ),
    ));
    
    // Second checkbox
    woocommerce_form_field( 'age_verification', array(
        'type'          => 'checkbox',
        'class'         => array( 'woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide' ),
        '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,
        'label'         => __( 'Age verification', 'woocommerce'),
    ));
}
add_action( 'woocommerce_register_form', 'action_woocommerce_register_form' );

// Validation
function filter_woocommerce_registration_errors( $errors, $username, $email ) {
    // Privacy NOT isset
    if ( ! (int) isset( $_POST['politica_privacidad_registro'] ) ) {
        $errors->add( 'politica_privacidad_registro_error', __( 'Tienes que aceptar nuestra política de privacidad.', 'woocommerce' ) );
    }
    
    // Age NOT isset
    if ( ! (int) isset( $_POST['age_verification'] ) ) {
        $errors->add( 'age_verification_error', __( 'Age is required.', 'woocommerce' ) );
    }
    
    return $errors;
}
add_filter( 'woocommerce_registration_errors', 'filter_woocommerce_registration_errors', 10, 3 );  

// Save fields
function action_woocommerce_created_customer( $customer_id, $new_customer_data, $password_generated ) {
    // Privacy isset
    if ( isset( $_POST['politica_privacidad_registro'] ) ) {
        update_user_meta( $customer_id, 'politica_privacidad_registro', sanitize_text_field( $_POST['politica_privacidad_registro'] ) );
    }
    
    // Age isset
    if ( isset( $_POST['age_verification'] ) ) {
        update_user_meta( $customer_id, 'age_verification', sanitize_text_field( $_POST['age_verification'] ) );
    }
}
add_action( 'woocommerce_created_customer', 'action_woocommerce_created_customer', 10 , 3 );