em In English, Snippets, WooCommerce 264 palavras

How to add custom fields in user registration on the “My Account” page

It’s possible to fully customize the registration form on the “My Account” page starting in WooCommerce 2.1.

To begin you must enable the registration:

registration-options

By default the form is displayed as follows:

my-account-fields

Adding new fields

Appears quite modest and without many fields, but we can add additional fields using the actions:

  • woocommerce_register_form_start – Appears before the “Address Email” field
  • woocommerce_register_form – Appears after the “Password” field

For example, let’s add “First name”, “Last name”, and “Phone number” fields:


<?php
/**
* Add new register fields for WooCommerce registration.
*/
function wooc_extra_register_fields() {
?>
<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>
<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>
<div class="clear"></div>
<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>
<?php
}
add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );

view raw

functions.php

hosted with ❤ by GitHub

Note that we use fields as billing_* to be able to associate with the fields customer’s account on WooCommerce later.

Here is the list of all the fields that we can use:

  • billing_first_name
  • billing_last_name
  • billing_company
  • billing_address_1
  • billing_address_2
  • billing_city
  • billing_postcode
  • billing_country
  • billing_state
  • billing_email
  • billing_phone

Now the registration form looks like:

new-registration-fields

Validating the custom fields

It’s very important to validate the fields and make sure that the user is filling them. To do this we will use the woocommerce_register_post action.

See an example of how to validate our custom fields:


<?php
/**
* Validate the extra register fields.
*
* @param WP_Error $validation_errors Errors.
* @param string $username Current username.
* @param string $email Current email.
*
* @return WP_Error
*/
function wooc_validate_extra_register_fields( $errors, $username, $email ) {
if ( isset( $_POST['billing_first_name'] ) && empty( $_POST['billing_first_name'] ) ) {
$errors->add( 'billing_first_name_error', __( '<strong>Error</strong>: First name is required!', 'woocommerce' ) );
}
if ( isset( $_POST['billing_last_name'] ) && empty( $_POST['billing_last_name'] ) ) {
$errors->add( 'billing_last_name_error', __( '<strong>Error</strong>: Last name is required!.', 'woocommerce' ) );
}
if ( isset( $_POST['billing_phone'] ) && empty( $_POST['billing_phone'] ) ) {
$errors->add( 'billing_phone_error', __( '<strong>Error</strong>: Phone is required!.', 'woocommerce' ) );
}
return $errors;
}
add_filter( 'woocommerce_registration_errors', 'wooc_validate_extra_register_fields', 10, 3 );

view raw

functions.php

hosted with ❤ by GitHub

Saving custom fields

Finally we just need to save the custom fields in the database.

We should save that custom fields in user profile and for do this we’ll use the woocommerce_created_customer action:


<?php
/**
* 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'] ) );
}
}
add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );

view raw

functions.php

hosted with ❤ by GitHub

And voila! All the fields saved and working perfectly 🙂

2 comentários sobre “How to add custom fields in user registration on the “My Account” page”

Os comentários estão desativados.