Add custom fields to WooCommerce new account Page

Question

In WooCommerce have created an account registration page as in the following code:

<?php
/**
 * Add new register fields for WooCommerce registration.
 */
function wooc_extra_register_fields() {
    ?>
<?php // field ?>
    <p class="form-row form-row-first">
    <label for="reg_billing_first_name"><?php _e( 'First name', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php if ( ! empty( $_POST['billing_first_name'] ) ) esc_attr_e( $_POST['billing_first_name'] ); ?>" />
    </p>
<?php // endfield ?>
<?php // field ?>
    <p class="form-row form-row-last">
    <label for="reg_billing_last_name"><?php _e( 'Last name', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php if ( ! empty( $_POST['billing_last_name'] ) ) esc_attr_e( $_POST['billing_last_name'] ); ?>" />
    </p>
<?php // endfield ?>

    <div class="clear"></div>
<?php // field ?>
    <p class="form-row form-row-wide">
    <label for="reg_Facebook"><?php _e( 'Facebook', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="input-text" name="billing_Facebook" id="reg_Facebook" value="" placeholder="input Facebook url" />
    </p>
<?php // endfield ?>
    <p class="form-row form-row-wide">
    <label for="reg_billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php if ( ! empty( $_POST['billing_phone'] ) ) esc_attr_e( $_POST['billing_phone'] ); ?>" />
    </p>
    <p class="form-row form-row-wide">
    <label for="reg_whatsapp_phone"><?php _e( 'whatsapp', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="input-text" name="whatsapp_phone" id="reg_whatsapp_phone" value="" />
    </p>
<?php
$field = [
        'type' => 'country',
        'label' => 'Country',
        'required' => 1,
        'class' => ['address-field']
];
woocommerce_form_field( 'billing_country', $field, '' );
$field = [
    'type' => 'state',
    'label' => 'State',
    'required' => 1,
    'class' => ['address-field'],
    'validate' => ['state']
];
woocommerce_form_field( 'billing_state', $field, '' );

$handle = 'wc-country-select';
wp_enqueue_script($handle, get_site_url().'/wp-content/plugins/woocommerce/assets/js/frontend/country-select.min.js', array('jquery'), true);


?>


    <?php
}

add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );


/**
 * Save the extra register fields.
 *
 * @param int $customer_id Current customer ID.
 */
function wooc_save_extra_register_fields( $customer_id ) {
    if ( isset( $_POST['billing_first_name'] ) ) {
        // WordPress default first name field.
        update_user_meta( $customer_id, 'first_name', sanitize_text_field( $_POST['billing_first_name'] ) );

        // WooCommerce billing first name.
        update_user_meta( $customer_id, 'billing_first_name', sanitize_text_field( $_POST['billing_first_name'] ) );
    }

    if ( isset( $_POST['billing_last_name'] ) ) {
        // WordPress default last name field.
        update_user_meta( $customer_id, 'last_name', sanitize_text_field( $_POST['billing_last_name'] ) );

        // WooCommerce billing last name.
        update_user_meta( $customer_id, 'billing_last_name', sanitize_text_field( $_POST['billing_last_name'] ) );
    }

    if ( isset( $_POST['billing_phone'] ) ) {
        // WooCommerce billing phone
        update_user_meta( $customer_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) );
    }
    //
      if ( isset( $_POST['billing_country'] ) ) {
        // WooCommerce billing country
        update_user_meta( $customer_id, 'billing_country', sanitize_text_field( $_POST['billing_country'] ) );
    }
          if ( isset( $_POST['billing_state'] ) ) {
        // WooCommerce  billing_state
        update_user_meta( $customer_id, 'billing_state', sanitize_text_field( $_POST['billing_state'] ) );
    }
    
     update_user_meta( $customer_id, 'billing_Facebook', sanitize_text_field( $_POST['billing_Facebook'] ) );
      

}

add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );

But I was not able to save the new fields such as (Facebook and WhatsApp account) to the member's (users.php) account page, which I would like them to appear as fields on the order registration page (as checkout fields). how fix it?

How to save the custom woocommerce field in the database and fields and put it as a fields in checkout page?

Answer 1

The following will optimize and compact your code, adding field validation and allowing to save all fields values as user meta data:

// Custom function with all extra field data arrays
function extra_register_fields() {
    $text_domain  = 'woocommerce';
    return array(
        'first_name' => array('type' => 'text',    'class' => ['form-row-first'], 'required' => 1, 'label' => __('First name', $text_domain) ),
        'last_name'  => array('type' => 'text',    'class' => ['form-row-last'],  'required' => 1, 'label' => __('Last name', $text_domain) ),
        'phone'      => array('type' => 'tel',     'class' => ['form-row-wide'],  'required' => 1, 'label' => __( 'Phone', $text_domain ) ),
        'facebook'   => array('type' => 'text',    'class' => ['form-row-wide'],  'required' => 1, 'label' => __( 'Facebook ', $text_domain ) ),
        'whatsapp'   => array('type' => 'text',    'class' => ['form-row-wide'],  'required' => 1, 'label' => __( 'WhatsApp', $text_domain ) ),
        'country'    => array('type' => 'country', 'class' => ['address-field'],  'required' => 1, 'label' => __( 'Country', $text_domain ) ),
        'state'      => array('type' => 'state',   'class' => ['address-field'],  'required' => 1, 'label' => __( 'State', $text_domain ) ),
    );
}

// Add extra register fields
add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );
function wooc_extra_register_fields() {
    foreach ( extra_register_fields() as $fkey => $values ) {
        if( $fkey === 'phone' ) $values['clear'] = 1;
        if( $fkey === 'state' ) $values['validate'] = ['state'];

        $value = isset($_POST['billing_'.$fkey]) ? esc_attr($_POST['billing_'.$fkey]) : '';

        woocommerce_form_field( 'billing_'.$fkey, $values, $value );
    }
    wp_enqueue_script('wc-country-select', get_site_url().'/wp-content/plugins/woocommerce/assets/js/frontend/country-select.min.js', array('jquery'), true);
}

// Extra register fields validation
add_action( 'woocommerce_register_post', 'wc_validate_reg_form_fields', 10, 3 );
function wc_validate_reg_form_fields( $username, $email, $validation_errors ) {
    foreach ( extra_register_fields() as $fkey => $values ) {
        if (isset($_POST['billing_'.$fkey]) && empty($_POST['billing_'.$fkey]) && $values['required'] ) {
            $validation_errors->add( 'extra_fields', sprintf('%s is a required field', $values['label']) );
        }
    }
    return $validation_errors;
}

// Save extra register fields values
add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );
function wooc_save_extra_register_fields( $customer_id ) {
    foreach( extra_register_fields() as $fkey => $values ) {
        if ( isset($_POST['billing_'.$fkey]) ) {
            $value = in_array($fkey, ['country', 'state']) ? sanitize_text_field($_POST['billing_'.$fkey]) : esc_attr($_POST['billing_'.$fkey]);

            update_user_meta( $customer_id, 'billing_'.$fkey, $value );

            if ( in_array($fkey, ['first_name', 'last_name']) )
                update_user_meta( $customer_id, $fkey, $value );
        }
    }
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

---

To display "Facebook" and "WhatsApp" fields in My account edit billing address use the following:

// Display Facebook and WhatsApp fields in My account eddit billing address
add_filter( 'woocommerce_billing_fields', 'additional_billing_fields', 20, 1 );
function additional_billing_fields($billing_fields) {
    if ( is_wc_endpoint_url( 'edit-address' ) ) {
        foreach ( extra_register_fields() as $fkey => $values ) {
            if ( in_array($fkey, ['facebook', 'whatsapp']) ) {
                $billing_fields['billing_'.$fkey] = $values;
            }
        }
    }
    return $billing_fields;
}

To add "Facebook" and "WhatsApp" fields to Admin user billing section use the following:

// WordPress User: Add Facebook and WhatsApp fields to billing section
add_filter('woocommerce_customer_meta_fields', 'wordpress_user_account_billing_birthdate_field');
function wordpress_user_account_billing_birthdate_field( $fields ) {
    foreach ( extra_register_fields() as $fkey => $values ) {
        if ( in_array($fkey, ['facebook', 'whatsapp']) ) {
            $fields['billing']['fields']['billing_'.$fkey] = array(
                'label'       => $values['label'],
                'description' => ''
            );
        }
    }
    return $fields;
}