Como personalizar o formulário de registro do WooCommerce

Deseja editar seus formulários de registro e obter mais leads? Neste guia, mostraremos diferentes maneiras de personalizar o formulário de registro do WooCommerce com e sem plugins.

Os registos online são uma das partes mais essenciais da sua loja online. É um procedimento padrão permitir que seus clientes criem uma nova conta para comprar em sua loja. Para evitar desistências, deve certificar-se de que os seus formulários de registo estão adaptados à sua loja e contêm apenas os campos necessários.

Por que personalizar o formulário de registro padrão do WooCommerce?

Quando um cliente registra uma nova conta em sua loja virtual, você recebe algumas informações sobre ele, como e-mail, nome, endereço de cobrança e muito mais. No entanto, o formulário de registro padrão do WooCommerce solicita apenas o endereço de e-mail para registrar uma nova conta. Isso pode tornar o processo mais rápido para o cliente, mas também é uma oportunidade desperdiçada de conhecer melhor seus compradores.

Se os clientes precisarem fornecer alguma informação adicional, eles precisam adicioná-la durante o checkout ou na página “Minha conta”. Isso pode ser um procedimento muito repetitivo e longo para seus compradores e pode até fazer com que eles percam o interesse em sua loja online.

A boa notícia é que você pode evitar isso adicionando todos os campos necessários ao formulário de cadastro com as informações que deseja obter. Dessa forma, você obterá as informações diretamente e os clientes não precisarão atualizar seus detalhes posteriormente, tornando-o mais conveniente para você e seus usuários.

Agora vamos ver os diferentes métodos para editar o formulário de registro do WooCommerce .

Como personalizar o formulário de registro do WooCommerce

Existem 3 maneiras principais de personalizar seu formulário de registro WooCommerce:

1. Do painel WooCommerce
2. Com plug-ins
3. Programaticamente

Vamos dar uma olhada em cada método. Antes de começar, verifique se você configurou corretamente o WooCommerce em sua loja.

1. Personalize o formulário de registro do WooCommerce no painel do WooCommerce

Por padrão, você pode editar seu formulário de registro no painel do WooCommerce. Vá para WooCommerce > Configurações e abra a guia Contas e privacidade . Aqui, você pode alterar algumas opções quando os clientes criam uma nova conta em sua loja.

Por exemplo, você pode ativar opções para gerar automaticamente nomes de usuário e senhas durante a criação da conta. Essas opções são ativadas por padrão, mas você pode desativá-las.

Existem também algumas outras opções para permitir que os clientes criem uma conta no checkout ou na página Minha conta, permitir que os compradores façam pedidos sem uma conta e assim por diante. Basta marcar as opções que deseja habilitar e salvar as alterações .

Como você pode ver, essas opções padrão são bastante limitadas para editar seus formulários de registro do WooCommerce. Se você quiser adicionar mais campos ou fazer alterações maiores, terá que usar outros métodos.

2. Personalize o formulário de registro do WooCommerce usando plugins

Uma das melhores maneiras de personalizar facilmente seu formulário de registro do WooCommerce é usando plugins dedicados. Existem várias ferramentas por aí. Para este tutorial, vamos demonstrar como editar os formulários de registro usando o plugin User Registration .

User Registration é um plugin freemium que permite que você crie seus próprios formulários de registro personalizados e é 100% responsivo. Você precisará obter o complemento WooCommerce que está disponível em seu plano premium.

2.1. Instale e ative o Plugin e o complemento WooCommerce

Para começar a usar o plugin, você precisa instalá-lo e ativá-lo, portanto, você precisa se inscrever em qualquer um dos planos premium integrados ao WooCommerce.

Depois disso, no painel do WooCommerce, vá para Plugins > Adicionar Novo e clique em Carregar Plugin.

Pressione Escolher arquivo , selecione o arquivo zip do plug-in que você baixou após a compra e clique em Instalar agora para instalar o plug-in.

Após a instalação, ative o plugin. Vá para Plugins > Plugins instalados e clique em Ativar ao lado da extensão WooCommerce de registro de usuário .

Se você não estiver familiarizado com o processo de instalação dessa maneira, confira nosso guia sobre como instalar plugins manualmente.

2.2. Crie seu formulário de registro WooCommerce

Para começar a criar seu formulário de registro personalizado do WooCommerce, vá para User Registration > Add New .

Chamaremos nosso novo formulário de registro de “ Registro WooCommerce ”, mas você pode dar o nome que quiser.

Por padrão, o formulário solicita apenas o e-mail e a senha do usuário, mas você pode adicionar outros campos, como endereço de cobrança e envio, país, CEP, número de telefone e assim por diante. Basta arrastá-los e soltá-los em seu formulário e, quando estiver satisfeito com seu novo formulário de registro do WooCommerce, clique em Criar formulário para salvá-lo.

2.3. Substitua a página de registro padrão do WooCommerce

Depois de criar seu formulário de registro, você precisa substituir o formulário de registro padrão na página de registro. Para fazer isso, vá para WooCommerce > Configurações e abra a guia Contas e privacidade .

Selecione a opção para permitir que os clientes criem uma conta na página "Minha conta" .

Em seguida, vá para User Registration > Settings, abra a aba WooCommerce e selecione o formulário de registro que você acabou de criar na opção Select Registration Form .

Depois disso, alguns campos aparecerão e você precisa marcar a opção para substituir a página de login e registro padrão do WooCommerce . Para concluir o processo, salve as alterações .

Agora é hora de ver seu novo formulário de registro no front-end. Vá para a página de registro e visualize-a para ver seu formulário de registro WooCommerce recém-personalizado .

3. Personalize o formulário de registro do WooCommerce programaticamente

Se você não quer usar um plugin premium e tem habilidades de programação, este método é para você. Você pode editar o formulário de registro do WooCommerce de quase todas as formas usando trechos de código.

Antes de prosseguir, recomendamos que você faça backup do seu site WordPress e crie um tema filho. Você vai mudar os arquivos do tema com esses snippets e se algo der errado eles podem quebrar seu site, então é sempre melhor estar preparado.

Depois de fazer backup do seu site e instalar um tema filho, você pode começar a editar seus formulários de registro. Nesta seção, mostraremos diferentes exemplos de coisas que você pode fazer. Você precisará colocar os snippets no arquivo functions.php do seu tema filho. Para fazer isso, no seu painel do WordPress, vá para Appearance > Theme Editor e abra o arquivo functions.php .

Antes de começar, verifique se você marcou a opção de permitir que os clientes criem uma conta na página "Minha conta" . Para fazer isso, siga as instruções descritas na etapa 2.3 , caso ainda não tenha marcado essa opção.

Agora vamos dar uma olhada em alguns exemplos para personalizar o formulário de registro do WooCommerce programaticamente.

Exibir o número da conta de cobrança no formulário de registro

Se você deseja adicionar um número de conta de cobrança como um campo obrigatório ao seu formulário de registro WooCommerce, você pode usar o seguinte trecho de código:

 // Exibe um campo em Registro / Editar conta 
add_action('woocommerce_register_form_start', 'ql_display_account_registration_field'); 
add_action( 'woocommerce_edit_account_form_start', 'ql_display_account_registration_field' ); 
function ql_display_account_registration_field() { 
$usuário = wp_get_current_user(); 
$value = isset($_POST['billing_account_number']) ? esc_attr($_POST['billing_account_number']): $user->billing_account_number; 
?> 
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_billing_account_number"><?php _e( 'Enviar para/Número da conta', 'woocommerce' ); ?> <span class="required">*</span></label>
 <input type="text" maxlength="6" class="input-text" name="billing_account_number" value="<?php echo $value ?>" />
 </p> 
<div class="clear"></div> 
<?php 
}

//validação do campo de registro 
add_filter( 'woocommerce_registration_errors', 'ql_account_registration_field_validation', 10, 3 ); 
function ql_account_registration_field_validation( $errors, $username, $email) { 
if ( isset( $_POST['billing_account_number'] ) && vazio( $_POST['billing_account_number'] ) ) { 
$errors->add( 'billing_account_number_error', __( '<strong>Erro</strong>: o número da conta é obrigatório!', 'woocommerce' ) ); } 
retornar $ erros; 
}

// Salva o valor do campo de registro 
add_action('woocommerce_created_customer', 'ql_save_account_registration_field'); 
function ql_save_account_registration_field( $customer_id) { 
if ( isset( $_POST['billing_account_number'] ) ) { 
update_user_meta( $customer_id, 'billing_account_number', higieniza_text_field( $_POST['billing_account_number'])); 
}
}

// Salva o valor do campo em Editar conta 
add_action( 'woocommerce_save_account_details', 'ql_save_my_account_billing_account_number', 10, 1 );
function ql_save_my_account_billing_account_number( $user_id ) { 
if( isset( $_POST['billing_account_number'] ) ){ 
update_user_meta( $user_id, 'billing_account_number', higienizar_texto_field( $_POST['billing_account_number'] ) ); 
}
}

// Exibe o campo na seção de campos de cobrança do usuário administrador 
add_filter( 'woocommerce_customer_meta_fields', 'ql_admin_user_custom_billing_field', 10, 1 ); 
função ql_admin_user_custom_billing_field( 
$args ) { $args['billing']['fields']['billing_account_number'] = array( 
'label' => __( 'Enviar para/Número da conta', 'woocommerce' ), 
'descrição' => '', 
'custom_attributes' => array('maxlength' => 6), 
); 
retorna $args;
}

Isso mostrará o número da conta de cobrança na seção de edição da conta da página Minha conta , bem como a página de edição do usuário administrador na seção de campos de cobrança.

Você pode usar esse snippet como base e ajustá-lo para sua loja. Você também pode adicionar alguns outros campos do formulário de registro do WooCommerce à seção de cobrança, como:

• faturamento_first_name
• cobrança_sobrenome
• faturamento_empresa
• Endereço de cobrança 1
• faturamento_endereço_2
• cidade_cobrança
• cobrança_postal
• País de faturamento
• Estado de faturamento
• cobrança_e-mail
• faturamento_telefone

Exibir formulário de registro personalizado do WooCommerce durante o checkout

Você também pode adicionar o formulário de registro do WooCommerce à página de checkout. Isso pode ser muito conveniente para seus clientes, pois permite que eles naveguem facilmente em sua loja como convidados e criem uma conta apenas se quiserem comprar algo.

Você pode fazer isso facilmente usando o plug-in de registro de usuário . Você precisará de um dos planos premium, então dê uma olhada na etapa 2.1 se ainda não o fez. Além disso, você precisa criar seu formulário de registro WooCommerce e substituí-lo pelo formulário padrão .

Depois disso, vá para WooCommerce > Configurações e abra a guia Contas e privacidade . Em seguida, marque a opção para permitir que os clientes criem uma conta durante a finalização da compra e salvem as alterações .

Depois disso, vá para User Registration > Settings e abra a aba WooCommerce . Marque a opção para sincronizar os registros de checkout e salvar as alterações.

Isso permitirá que seus clientes sincronizem o registro do usuário com o registro de checkout do WooCommerce . Depois disso, verifique todos os rótulos dos campos na tabela e salve as alterações .

É isso! Agora seus clientes poderão registrar uma nova conta durante o checkout em seu site.

Bônus: edite o endereço de e-mail de registro do WooCommerce

Os endereços de e-mail são fundamentais para o registro. Como uma loja de comércio eletrônico, você deseja ter os endereços de e-mail de seus clientes para poder contatá-los no futuro com informações sobre seus pedidos, enviar ofertas, ofertas exclusivas e assim por diante.

É por isso que aprender a editar o e-mail de registro do WooCommerce é muito útil. A melhor maneira de fazer isso é personalizar o modelo de email. E a melhor parte é que você pode fazer isso no painel do WooCommerce.

Basta acessar WooCommerce > Configurações e abrir a guia E- mails . Aqui, você pode alterar os modelos de email com a ajuda das opções de remetente de email e modelo de email.

A opção de remetente de e-mail permite que você edite o nome e o endereço “De”. Isso significa que você pode personalizar como o nome do remetente e o endereço de e-mail aparecerão no e-mail do WooCommerce.

Da mesma forma, você pode editar a imagem do cabeçalho, o texto do rodapé, a cor base, a cor do plano de fundo, o plano de fundo do corpo e a cor do texto dos modelos de e-mail .

Faça todas as alterações desejadas no seu e-mail WooCommerce e veja as alterações em tempo real clicando no link “ Clique aqui para visualizar seu modelo de e-mail ”.

Quando estiver satisfeito com seu novo modelo, lembre-se de salvar as alterações .

Existem outras maneiras de editar os modelos de e-mail que permitem personalizar muitas outras coisas. Para obter mais informações, confira nosso guia sobre como editar modelos de e-mail do WooCommerce.

Conclusão

Em suma, o formulário de registro é muito importante, pois permite coletar informações relevantes sobre seus clientes. O formulário de registro padrão nem sempre fornece todas as informações que você deseja, então personalizá-lo pode ser um método muito eficaz para reunir todos os detalhes que você precisa.

Neste guia, exploramos 3 métodos diferentes para personalizar o formulário de registro do WooCommerce :

• Do painel do WC
• Usando um plug-in dedicado
• Programaticamente

Se você quiser fazer algumas alterações aqui e ali, as opções padrão do painel do WooCommerce podem ser úteis. No entanto, as opções que ele oferece são bastante limitadas, portanto, se você quiser personalizar mais coisas, recomendamos que você use um plugin. Por outro lado, se você não quiser instalar uma ferramenta de terceiros e tiver habilidades de codificação, poderá editar o formulário de registro programaticamente usando trechos de código.

Para obter mais informações sobre como personalizar sua loja, consulte os seguintes guias:

• Como personalizar a página Minha conta do WooCommerce
• Edite a página do produto WooCommerce
• Como personalizar a página de categoria no WooCommerce
• Como editar a página da loja WooCommerce