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:
By default the form is displayed as follows:
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” fieldwoocommerce_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' ); |
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:
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 ); |
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' ); |
And voila! All the fields saved and working perfectly 🙂
Perfect! Thanks
Adivinhou, era o que eu procurava.:) Tks Cláudio.