Nesta postagem, vamos explicar como personalizar a página de cadastro do WooCommerce sem plugin, ou seja, como você poderá adicionar novos campos na página de registro padrão do WooCommerce sem a necessidade de instalar plugins pesados desnecessários.
Também iremos adicionar um campo de CPF ao registro padrão do WooCommerce, com máscara e validação, para que somente usuários com CPF válido possa se cadastrar em tua loja WooCommerce, evitando assim, cadastros indesejados! Neste caso, iremos instalar um plugin leve, criado por mim mesmo.
Se interessar, veja também este artigo: Os 65 Melhores Plugins para Freelancers 2023
Para começar, certifique-se de que os formulários de registro do WooCommerce estejam habilitados na página de login da conta. Para isso, vá para “WooCommerce” -> “Configurações” -> “Contas e privacidade” e marque a opção “Habilitar registro do cliente” na página “Minha conta”, conforme a imagem abaixo:
Depois de habilitar essa opção, você pode ver o formulário de registro do WooCommerce no frontend:
Como deveria ser óbvio, é um formulário WooCommerce bastante simples, com nome de usuário, e-mail e senha, como campos padrões.
No entanto, podemos adicionar mais campos a essa estrutura utilizando as seguintes ações:
// adcionar campos no formulário de registro
function wooc_extra_register_fields() {?>
<p class="form-row form-row-first">
<label for="reg_billing_first_name"><?php _e( 'Nome', '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( 'Sobrenome', '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>
<?php
}
add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );
Basta copiar o código acima e colá-lo nas últimas linhas do arquivo functions.php, localizado na pasta do teu tema.
Veja também: Os 65 Melhores Temas WordPress para Freelancers em 2023
No meu exemplo, eu adicionei pelo tema filho (mas você poderá adicionar diretamente pelo tema padrão). Lembre-se de que, sempre quando for atualizar o tema padrão, será necessário reescrever o código functions.php do teu tema! Também é recomendado fazer um backup do arquivo functions.php, antes de modificá-lo!
Agora, se você atualizar a página, verá os campos “Nome e Sobrenome” sendo adicionados ao formulário de registro do WooCommerce.
Para relacionar esses campos do formulário de registro com o endereço de cobrança, você deve incluir o prefixo “billing_” antes do nome do campo. A seguir está uma lista de todos os campos válidos do formulário WooCommerce que podem ser adicionados ao formulário de registro e podem ser associados a um endereço de cobrança.
- 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
- billing_cpf
Quer criar um portal de empregos? Veja como: Os Melhores Temas WordPress para Criar um Portal de Empregos
Feito isso, agora também precisamos validar esses campos de formulário recém-adicionados. Para validar esses campos de estrutura, inclua as linhas de código que acompanham no final do seu arquivo functions.php localizado na pasta do tema (wp-content/themes/NOME-DO-SEU-TEMA/functions.php):
/**
* Validar os campos de registro.
*/
function wooc_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>: Nome é um campo obrigatório!', 'woocommerce' ) );
}
if ( isset( $_POST['billing_last_name'] ) && empty( $_POST['billing_last_name'] ) ) {
$validation_errors->add( 'billing_last_name_error', __( '<strong>Erro</strong>: Sobrenome é um campo obrigatório!.', 'woocommerce' ) );
}
return $validation_errors;
}
add_action( 'woocommerce_register_post', 'wooc_validate_extra_register_fields', 10, 3 );
Esta função somente verificará o array $ _POST para valores do formulário de registro e incluirá uma mensagem de erro se um valor não estiver presente ou se houver dados inválidos.
E, por fim, precisamos salvar esses valores no banco de dados.
Para inserir valores no banco de dados, adicione a seguinte função no arquivo functions.php do seu tema (wp-content/themes/NOME-DO-SEU-TEMA/functions.php):
/**
* Salvar os campos extras.
*/
function wooc_save_extra_register_fields( $customer_id ) {
if ( isset( $_POST['billing_first_name'] ) ) {
// Campo de nome que é por padrão
update_user_meta( $customer_id, 'first_name', sanitize_text_field( $_POST['billing_first_name'] ) );
// Campo de nome que é usado no WooCommerce
update_user_meta( $customer_id, 'billing_first_name', sanitize_text_field( $_POST['billing_first_name'] ) );
}
if ( isset( $_POST['billing_last_name'] ) ) {
// Campo de sobrenome que é por padrão
update_user_meta( $customer_id, 'last_name', sanitize_text_field( $_POST['billing_last_name'] ) );
// Campo de sobrenome que é usado no WooCommerce
update_user_meta( $customer_id, 'billing_last_name', sanitize_text_field( $_POST['billing_last_name'] ) );
}
}
add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );
Agora que eu adicionei os campos “Nome” e “Sobrenome”, eu quero adicionar o campo “CPF” (mas que funcione tanto como máscara, para evitar que o usuário digite números excedentes ou letras do alfabeto, por exemplo), quanto que permita somente que seja inserido um CPF válido, junto aos órgãos do governo!
Já viu esta dica? Os Melhores Temas WordPress para Portfólios
Como eu não encontrei nenhum plugin que faça este trabalho no Woocommerce, eu mesmo resolvi desenvolver um plugin LEVE e que seja compatível com o plugin Brazilian Market on WooCommerce, do Cláudio Sanches, ou seja, caso o usuário se cadastre com seu CPF, o mesmo CPF cadastrado irá aparecer tanto no checkout quanto em outros formulários que utilizem o campo de dados billing_cpf padrão do WooCommerce.
Veja como instalar e como funciona o plugin:
Como toda instalação de plugin WordPress, você clica em plugins -> adicionar novo -> enviar plugins -> Escolha o plugin cpf-mask-and-validation-woocom-brazil e clique em “instalar agora”! Após o envio, clique em “ativar agora”:
Assim que o plugin estiver ativo, irá aparecer um campo com o nome “CPF Brazil Woo”, no lado esquerdo do seu painel WordPress. Clique nele e habilite o campo: “Por favor, ative este campo!”.
Pronto! Agora o plugin já está instalado e a página de registro do Woocommerce ficará com o campo CPF, com validação e máscara!
Se acaso o usuário errar o número do seu CPF ou inserir números excedentes, a menos ou tentar colocar uma letra, obterá a seguinte mensagem de erro:
Conclusão – como personalizar a página de cadastro do WooCommerce sem plugin:
Como você viu acima, adicionar novos campos à página de registro do WooCommerce não é uma tarefa das mais difíceis e você poderá fazê-lo sem a necessidade de instalar plugins pesados, de construtores de páginas!
Apenas no caso de inserir um campo como o “CPF”, que necessite de uma máscara para funcionar, é necessário a instalação de nosso plugin.
Caso tenha gostado das dicas, comente abaixo!
Quer ganhar dinheiro com WordPress? Veja: Como Ganhar Dinheiro como Freelancer
Veja também nossa dica: Functions.php: Como Enviar Imagens WebP no WordPress sem Plugin
Fernando Ota
Webmaster e programador, especialista em construção de sites em Wordpress, Joomla e Magento, tenho profundo conhecimento em CSS3, HTML5, java, Laravel,React, BootStrap, Mysql, Oracle e desenvolvimento de aplicativos. Fez dezenas de cursos de SEO especializado em WordPress, otimização e performance de sites, plugins e temas para WordPress e atualmente trabalha com marketing digital, SEO Onpage e Offpage, Google Analytics e otimização para sites em WordPress.
