WooCommerce – Campos personalizados no formulário de cadastro

Agora com o WooCommerce 2.1.0 ficou bem mais simples adicionar campos customizados no formulário de cadastro.

No caso é o cadastro que pode ser feito na página “Minha conta”, que pode ser ativado em WooCommerce > Configurações > Conta com a opção Habilitar registro na página “Minha Conta”.

Aqui um exemplo de como adicionar os campos para Nome e Sobrenome.

<?php
/**
* Add new register fields for WooCommerce registration.
*
* @return string Register fields HTML.
*/
function cs_wc_extra_register_fields() {
?>
<p class="form-row form-row-first">
<label for="reg_billing_first_name"><?php _e( 'Nome', 'textdomain' ); ?> <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( 'Sobrenome', 'textdomain' ); ?> <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
}
add_action( 'woocommerce_register_form_start', 'cs_wc_extra_register_fields' );
/**
* Validate the extra register fields.
*
* @param string $username Current username.
* @param string $email Current email.
* @param object $validation_errors WP_Error object.
*
* @return void
*/
function cs_wc_validate_extra_register_fields( $username, $email, $validation_errors ) {
if ( isset( $_POST['billing_first_name'] ) && empty( $_POST['billing_first_name'] ) ) {
$validation_errors->add( 'billing_first_name_error', __( '<strong>Erro</strong>: Digite o seu nome.', 'textdomain' ) );
}
if ( isset( $_POST['billing_last_name'] ) && empty( $_POST['billing_last_name'] ) ) {
$validation_errors->add( 'billing_last_name_error', __( '<strong>Erro</strong>: Digite o seu sobrenome.', 'textdomain' ) );
}
}
add_action( 'woocommerce_register_post', 'cs_wc_validate_extra_register_fields', 10, 3 );
/**
* Save the extra register fields.
*
* @param int $customer_id Current customer ID.
*
* @return void
*/
function cs_wc_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'] ) );
}
}
add_action( 'woocommerce_created_customer', 'cs_wc_save_extra_register_fields' );

view raw
functions.php
hosted with ❤ by GitHub

Utilizei o gancho woocommerce_register_form_start para adicionar os campos antes do e-mail e da senha, mas é possível usar também woocommerce_register_form para adicionar no final.
Observe que estes ganchos estão disponíveis apenas nos modelos de templates do WooCommerce 2.1.0 ou superior, caso não funcione com o seu tema pronto, você vai precisar atualizar o seu template (myaccount/form-login.php).

É possível determinar o alinhamento dos novos campos com as classes form-row-first (alinha para esquerda), form-row-last (alinha para direita) e form-row-wide (centraliza com apenas um campo por linha).

No exemplo validei os novos campos com o gancho woocommerce_register_post e finalmente salvei no banco de dados com woocommerce_created_customer.
Nota: foi atualizado o campo first_name e last_name que são nativos do WordPress, junto com billing_first_name e billing_last_name que são os campos de nome e sobrenome para pagamento do WooCommerce.

Veja como ficou o exemplo:

woocommerce-minha-conta-campos-personalizados

Da para fazer isso também com versões antigas do WooCommerce, mas exige um pouco mais de trabalho e usar ganchos do WordPress… Isso eu não vou ensinar (pode chorar o quanto quiser xD), caso você queria utilizar o que estou ensinando aqui atualize para a última versão do WooCommerce!

Pretendo em breve escrever mais coisas que é possível fazer agora com o WooCommerce 2.1.0.