phpwordpresswoocommercechange-passwordusermetadata

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>

Solution

  • The following will:

    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.