Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Add custom fields to WooCommerce Reset Password form and save data

How I can add custom fields into WooCommerce reset password form?

Because on the register client I need to get email verify and setup they own account password, and also I want to let them set up their first name and last name in the form.

For example, I want to add those fields to the form:

    <p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
        <label for="account_first_name"><?php esc_html_e( 'First name', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="account_first_name" id="account_first_name" autocomplete="given-name" value="" />
    </p>
    <p class="woocommerce-form-row woocommerce-form-row--last form-row form-row-last">
        <label for="account_last_name"><?php esc_html_e( 'Last name', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="account_last_name" id="account_last_name" autocomplete="family-name" value="" />
    </p>
Tags:

2

Answers


  1. 0

    Did you try using woocommerce_resetpassword_form hook? You should be able to add custom fields using the above-mentioned hook. You might also have to handle the form data on submission.

    for example:

    add_action( 'woocommerce_resetpassword_form', function() {
    ?>
    <p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
        <label for="account_first_name"><?php esc_html_e( 'First name', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="account_first_name" id="account_first_name" autocomplete="given-name" value="" />
    </p>
    <p class="woocommerce-form-row woocommerce-form-row--last form-row form-row-last">
        <label for="account_last_name"><?php esc_html_e( 'Last name', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="account_last_name" id="account_last_name" autocomplete="family-name" value="" />
    </p>
    <?php
} );
    Login or Signup to reply.
  2. 0

    The following will:

    • Display your 2 custom form fields in WooCommerce PassWord Reset form,
    • Validate those 2 required fields,
    • Save/update your 2 custom form fields values as user metadata.

    The complete code:

    // Display additional fields
add_action( 'woocommerce_resetpassword_form', 'add_fields_to_wc_reset_password_form');
function add_fields_to_wc_reset_password_form() {
    global $current_user;
    ?>
    <p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
        <label for="first_name"><?php esc_html_e( 'First name', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="first_name" id="first_name" value="<?php echo $current_user->fisrt_name; ?>" />
    </p>
    <p class="woocommerce-form-row woocommerce-form-row--last form-row form-row-last">
        <label for="last_name"><?php esc_html_e( 'Last name', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="last_name" id="last_name" autocomplete="family-name" value="<?php echo $current_user->last_name; ?>" />
    </p>
    <?php
}

// Required fields validation
add_filter( 'validate_password_reset', 'validate_fields_from_wc_reset_password_form', 10, 2 );
function validate_fields_from_wc_reset_password_form( $errors, $user ) {
    if ( isset($_POST['first_name']) && empty($_POST['first_name']) ) {
        $errors->add( 'first_name_error', __( '<strong>Error</strong>: "First name" is a required field.', 'woocommerce' ) );
    }
    if ( isset($_POST['last_name']) && empty($_POST['last_name']) ) {
        $errors->add( 'last_name_error', __( '<strong>Error</strong>: "Last name" is a required field.', 'woocommerce' ) );
    }
    return $errors;
}

// Save/update user metadata from fields values
add_action( 'woocommerce_customer_reset_password', 'save_fields_values_from_wc_reset_password_form' );
function save_fields_values_from_wc_reset_password_form( $user ) {
    if ( isset($_POST['first_name']) && ! empty($_POST['first_name']) && $_POST['first_name'] !== $user->fisrt_name ) {
        update_user_meta( $user->ID, 'first_name', sanitize_text_field($_POST['first_name']) );
    }
    if ( isset($_POST['last_name']) && ! empty($_POST['last_name']) && $_POST['last_name'] !== $user->last_name ) {
        update_user_meta( $user->ID, 'last_name', sanitize_text_field($_POST['last_name']) );
    }
}

    Code goes in functions.php file of your child theme (or in a plugin). It should work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search