How to add custom fields to WooCommerce registration form

Question

I have seen similar questions but couldn't find a solution for me.

I am trying to add custom fields to WooCommerce registration form, specifically first and last name field. I have managed to create these fields but the information entered does not pass over to the Account Details page when the user has logged in. Other tutorials have mentioned validating the fields but I am not sure is it relevant to me or not. I am working on a Wordpress child theme.

Please visit to codepad .org to view the code. I tried to paste the code here by using the code sample option but it doesn't work properly.

Hope I have explained myself clearly. If not please let me know and I will clarify.

Answer 1

I think you have overwrite woocommerce/templates/myaccount/form-login.php template, and by doing that you have managed to show the billing_first_name and billing_last_name but you forget to use woocommerce_created_customer hook which is needed to save those data into your database.

What I'll suggest is that you keep the template as it is and add those field through function.php

Here is the code to add custom fields in WooCommerce registration form:

/**
 * To add WooCommerce registration form custom fields.
 */

function text_domain_woo_reg_form_fields() {
    ?>
    <p class="form-row form-row-first">
        <label for="billing_first_name"><?php _e('First name', 'text_domain'); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_first_name" id="billing_first_name" value="<?php if (!empty($_POST['billing_first_name'])) esc_attr_e($_POST['billing_first_name']); ?>" />
    </p>
    <p class="form-row form-row-last">
        <label for="billing_last_name"><?php _e('Last name', 'text_domain'); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_last_name" id="billing_last_name" value="<?php if (!empty($_POST['billing_last_name'])) esc_attr_e($_POST['billing_last_name']); ?>" />
    </p>
    <div class="clear"></div>
    <?php
}

add_action('woocommerce_register_form_start', 'text_domain_woo_reg_form_fields');

Coming to your second part of your question on validation it is totally optional and depends on your business logic that what you want, in general most of the site has First Name and the Last Name required but again it totally depends upon you, If you don't want to validate this then remove <span class="required">*</span> from above code and skip this section.

/**
 * To validate WooCommerce registration form custom fields.
 */
function text_domain_woo_validate_reg_form_fields($username, $email, $validation_errors) {
    if (isset($_POST['billing_first_name']) && empty($_POST['billing_first_name'])) {
        $validation_errors->add('billing_first_name_error', __('<strong>Error</strong>: First name is required!', 'text_domain'));
    }

    if (isset($_POST['billing_last_name']) && empty($_POST['billing_last_name'])) {
        $validation_errors->add('billing_last_name_error', __('<strong>Error</strong>: Last name is required!.', 'text_domain'));
    }
    return $validation_errors;
}

add_action('woocommerce_register_post', 'text_domain_woo_validate_reg_form_fields', 10, 3);

Now this is a main part and this what you was had missed, below code is needed to save the custom data:

/**
 * To save WooCommerce registration form custom fields.
 */
function text_domain_woo_save_reg_form_fields($customer_id) {
    //First name field
    if (isset($_POST['billing_first_name'])) {
        update_user_meta($customer_id, 'first_name', sanitize_text_field($_POST['billing_first_name']));
        update_user_meta($customer_id, 'billing_first_name', sanitize_text_field($_POST['billing_first_name']));
    }
    //Last name field
    if (isset($_POST['billing_last_name'])) {
        update_user_meta($customer_id, 'last_name', sanitize_text_field($_POST['billing_last_name']));
        update_user_meta($customer_id, 'billing_last_name', sanitize_text_field($_POST['billing_last_name']));
    }
}

add_action('woocommerce_created_customer', 'text_domain_woo_save_reg_form_fields');

All the above code goes in function.php file of your active child theme (or theme). Or also in any plugin php files.
The code is tested and fully functional.
Hope this helps!