Add user custom account field to WooCommerce checkout

Question

I have added to admin users a custom meta field using the following code:``

function wporg_usermeta_form_field_birthday( $user )
{
    ?>
    
    <table class="form-table" id="table-form-dob" >
        <tr>
            <th><h3 style="margin: 0">Extra Meta Fields</h3></th>
        </tr>
        <tr>
            <th>
                <label for="user_dob">Birthday</label>
            </th>
            <td>
                <input type="date"
                       class="regular-text ltr"
                       id="user_dob"
                       name="user_dob"
                       value="<?= esc_attr( get_user_meta( $user->ID, 'user_dob', true ) ) ?>"
                       title="Please use YYYY-MM-DD as the date format."
                       pattern="(19[0-9][0-9]|20[0-9][0-9])-(1[0-2]|0[1-9])-(3[01]|[21][0-9]|0[1-9])"
                       required>
                
            </td>
        </tr>
    </table>
    <script>
        jQuery(function($){
        jQuery('#table-form-dob tr').insertAfter(jQuery('#display_name').parentsUntil('tr').parent());
    });
    </script>
    <?php
}
  
function wporg_usermeta_form_field_birthday_update( $user_id )
{
    if ( ! current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }
    return update_user_meta(
        $user_id,
        'user_dob',
        $_POST['user_dob']
    );
}
  
add_action(
    'show_user_profile',
    'wporg_usermeta_form_field_birthday'
);
  
add_action(
    'edit_user_profile',
    'wporg_usermeta_form_field_birthday'
);
  
add_action(
    'personal_options_update',
    'wporg_usermeta_form_field_birthday_update'
);
  
add_action(
    'edit_user_profile_update',
    'wporg_usermeta_form_field_birthday_update'
);

register_meta('user', 'user_dob', array(
  "type" => "string",
  "show_in_rest" => true // this is the key part
));

I want to add this same field In woocommerce checkout page, so when the user get registered in woocommerce checkout page, we should be able to see this "Birthday" field (user_dob) in admin user profile/ edit section.

also, I am accessing user meta in rest API currently its showing meta in rest API after user saver values in check it should value in wp rest API.

How can I add this?

LoicTheAztec LoicTheAztec · Accepted Answer · 2020-06-23T14:56:17

You can use the following that will add user_dob custom field to checkout account registration fields:

add_filter( 'woocommerce_checkout_fields', 'add_checkout_account_birthday_field' );
function add_checkout_account_birthday_field( $fields ){
    $fields['account']['user_dob'] = array(
        'type'              => 'date',
        'label'             => __("Birthday", "woocommerce"),
        'placeholder'       => __("Please use YYYY-MM-DD as the date format.", "woocommerce"),
        'class'             => array('form-row-wide regular-text ltr'),
        'required'          => true,
        'custom_attributes' => ['pattern' => '(19[0-9][0-9]|20[0-9][0-9])-(1[0-2]|0[1-9])-(3[01]|[21][0-9]|0[1-9])'],
    );
    return $fields;
}

add_action( 'woocommerce_checkout_update_customer', 'save_checkout_account_birthday_field', 10, 2 );
function save_checkout_account_birthday_field( $customer, $data ){
    if ( isset($_POST['user_dob']) && ! empty($_POST['user_dob']) ) {
         $customer->update_meta_data( 'user_dob', sanitize_text_field($_POST['user_dob']) );
    }
}

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

Once order is placed the birth date is saved to user data and displayed in admin user "Birthday" field.

Add user custom account field to WooCommerce checkout

1 Answers