Como adicionar campos personalizados ao formulário de registo no WooCommerce

Pretendes criar uma experiência de utilizador mais personalizada e perfeita para os teus clientes na tua loja online com tecnologia WooCommerce?

Uma das formas mais eficazes de o fazer é adicionar campos personalizados ao teu formulário de registo do WooCommerce.

Para quem utiliza o Woocommerce, o formulário de registo predefinido é bastante básico e não oferece a opção de adicionar campos extra. Isto pode ser problemático, uma vez que pode haver casos em que necessites de recolher informações adicionais dos utilizadores durante o processo de registo.

Adicionar um formulário personalizado ao teu site pode melhorar o seu profissionalismo e permitir-te recolher informações importantes do utilizador durante o processo de registo, entre outros benefícios.

Neste artigo, vou explicar-te como adicionar campos personalizados no formulário de registo do Woocommerce utilizando três métodos diferentes.

Porquê adicionar campos personalizados ao teu formulário de registo do WooCommerce?

A adição de campos personalizados ao formulário de registo do WooCommerce pode melhorar significativamente o desempenho da tua loja online e a experiência do cliente.

Aqui estão algumas razões pelas quais deves adicionar campos personalizados ao teu formulário de registo WooCommerce:

• Recolhe informações adicionais dos teus clientes para os conheceres melhor e os ajudares em conformidade.
• Melhora a experiência do utilizador, oferecendo-lhe serviços mais personalizados.
• Pode ajudar-te a simplificar o processo de checkout.
• Pode ajudar-te a recolher as informações que ajudam a tua equipa de apoio ao cliente a responder a questões ou problemas de forma mais eficiente.

Como adicionar campos de formulário de registo personalizados no WooCommerce (3 métodos)

Neste tutorial, vamos explorar três métodos para adicionar campos de formulário de registo personalizados no WooCommerce. Segue os passos abaixo para adicionar manualmente campos de formulário de registo personalizados à tua loja WooCommerce. Se estiveres a utilizar o alojamento para WooCommerce oferecido pela Cloudways, podes utilizar qualquer um destes métodos.

Método 1: Adiciona campos personalizados do formulário de registo utilizando o código

Passo 1: Ativar a opção de registo do cliente

O primeiro passo é ativar os formulários de registo do WooCommerce na página de início de sessão da conta.

Por isto,

• Vai a WooCommerce → Definições → Contas
• Marca a opção Ativar registo de cliente na página “A minha conta”.

• Depois de activares esta opção, deves conseguir ver o formulário de registo do WooCommerce na parte da frente.

Passo 2: Adiciona o código personalizado no ficheiro Functions.php

Como podes ver, o formulário de registo predefinido do WooCommerce é bastante simples e carece de muitos campos necessários.

No entanto, podemos adicionar mais campos a nosso gosto. Por exemplo, para incluir campos extra como o nome, o apelido, o número de telefone, etc., adiciona as seguintes linhas de código no final do teu ficheiro functions.php, que se encontra na pasta do teu tema.

função wooc_extra_register_fields() {?>

*

*

php } add_action( ‘woocommerce_register_form_start’, ‘wooc_extra_register_fields’ );

Depois de adicionares o código, se actualizares a página, verás os campos adicionados ao formulário de registo do WooCommerce.

Para relacionar estes campos do formulário de registo com o endereço de faturação, tens de incluir o prefixo “billing_” antes do nome do campo.

Agora que já sabemos como adicionar campos personalizados ao nosso formulário de registo, vamos ver uma lista de alguns campos de formulário do WooCommerce.

Lista de campos de formulário do WooCommerce

Segue-se uma lista de todos os campos de formulário WooCommerce válidos que podem ser adicionados ao formulário de registo e que podem ser associados a um endereço de faturação.

• nome_primeiro_de_facturação
• apelido_de_facturação
• empresa_de_facturação
• endereço_de_facturação_1
• endereço_de_facturação_2
• cidade_de_facturação
• código postal de faturação
• país_de_facturação
• estado_de_facturação
• e-mail de faturação
• telefone_de_facturação

Lança lojas WooCommerce escaláveis

Manipula campos personalizados ilimitados com:
Escala automática para picos de tráfego
Recursos dedicados ao WooCommerce
Armazenamento em cache Redis incorporado

Lança agora

Passo 3: Validar os campos do formulário de registo

• Depois de criares os campos personalizados, o passo seguinte é validar estes campos de formulário recentemente adicionados.
• Para validar estes campos de estrutura, inclui as linhas de código que se seguem no final do teu ficheiro functions.php, que se encontra na pasta do tema.

/**

* regista os campos Validando.

*/

function wooc_validate_extra_register_fields( $username, $email, $validation_errors ) {

  se ( isset( $_POST['billing_first_name'] ) && empty( $_POST['billing_first_name'] ) ) {

  $validation_errors->add( 'billing_first_name_error', __( '

Erro

: O teu primeiro nome é obrigatório!", 'woocommerce' ) );

  }

  se ( isset( $_POST['billing_last_name'] ) && empty( $_POST['billing_last_name'] ) ) {

  $validation_errors->add( 'billing_last_name_error', __( '

Erro

: O apelido é obrigatório!", 'woocommerce' ) );

  }
  devolve $validation_errors;
}

add_action( 'woocommerce_register_post', 'wooc_validate_extra_register_fields', 10, 3 );

Se prestares atenção ao código acima, vais perceber que ele simplesmente valida os valores submetidos através do formulário verificando o array $_POST e gera uma mensagem de erro se um valor não estiver presente ou se os dados forem inválidos.

Além disso, é possível incluir várias regras de validação e aplicá-las a diferentes campos. Na captura de ecrã abaixo, podes ver um exemplo de uma das nossas regras de validação personalizadas a ser aplicada.

Passo 4: Guarda os valores na base de dados

• De seguida, temos de guardar estes valores na base de dados. Para inserir valores na base de dados, adiciona a seguinte função ao ficheiro functions.php do teu tema.

/**

* O código abaixo guarda os campos extra.

*/

Função wooc_save_extra_register_fields( $customer_id ) {

  se ( isset( $_POST['billing_phone'] ) ) {

  // Campo de introdução do telefone que é utilizado no WooCommerce

  update_user_meta( $customer_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) );

  }

  se ( isset( $_POST['billing_first_name'] ) ) {

  /Campo do primeiro nome que é por defeito

  update_user_meta( $customer_id, 'first_name', sanitize_text_field( $_POST['billing_first_name'] ) );

  // Campo do nome próprio que é utilizado no WooCommerce

  update_user_meta( $customer_id, 'billing_first_name', sanitize_text_field( $_POST['billing_first_name'] ) );

  }

  se ( isset( $_POST['billing_last_name'] ) ) {

  // Campo do apelido que é por defeito

  update_user_meta( $customer_id, 'last_name', sanitize_text_field( $_POST['billing_last_name'] ) );

  // Campo do apelido que é utilizado 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' );

Conclui assim o processo de adição, validação e inserção dos campos personalizados para utilização futura. Quando acederes à página do endereço de faturação na tua conta e clicares em “Editar”, verás que os valores do formulário de registo já estão preenchidos nos campos correspondentes.

Método 2: Adiciona campos personalizados ao formulário de registo utilizando os ganchos do WooCommerce

Para além do método 1, também podes adicionar os campos personalizados do formulário de registo na tua loja virtual através de Webhooks. Caso tenhas dúvidas, eis a explicação dos webhooks.

Eis como podes fazer isso:

Passo 1: Editar a página da conta WooCommerce

• Se pretenderes utilizar os ganchos do WooCommerce para editar a página “A minha conta” do WooCommerce, segue o excerto de código abaixo.

função woocommerce_edit_my_account_page() {

  return apply_filters( 'woocommerce_forms_field', array(

  'woocommerce_my_account_page' => array(

  'tipo' => 'texto',

  'label' => __( 'Socail Media Profile Link', ' cloudways' ),

  'placeholder' => __( 'Link do perfil', 'cloudways' ),

  'obrigatório' => falso,

  ),

  ) );

}

função edit_my_account_page_woocommerce() {

  $fields = woocommerce_edit_my_account_page();

  foreach ( $fields as $key => $field_args ) {

  woocommerce_form_field( $key, $field_args );

  }

}

add_action( 'woocommerce_register_form', 'edit_my_account_page_woocommerce', 15 );

• Vê aqui como seria o resultado do snippet:

O snippet acima começa com a função woocommerce_edit_my_account_page() que é utilizada na parte final do snippet. Esta função devolve uma matriz multidimensional que contém informações sobre os campos (tipo, etiqueta, marcador de posição, obrigatório ou não) que adicionas ao formulário.

Para garantir que os valores dos campos podem ser actualizados mais tarde, a matriz é processada através da função woocommerce_form_field().

Utilizei a função edit_my_account_page_woocommerce() na metade seguinte do snippet. Como podes ver, a variável $fields contém o conjunto gerado pela função woocommerce_edit_my_account_page() . Faz um loop usando o loop foreach().

Adicionar campos personalizados ao formulário de registo no WooCommerce

O nosso alojamento WooCommerce gerido inclui:
Preparação com um clique para testar campos personalizados
PHP 8.3 para compatibilidade com o plugin
Apoio especializado 24 horas por dia, 7 dias por semana

Inicia a avaliação gratuita

Passo 2: Adiciona o campo de formulário obrigatório do WooCommerce

Como podes ver, o snippet acima mencionado é muito flexível e podes adicionar qualquer tipo de campo que desejes, fornecendo o valor apropriado da estrutura de campo no array $fields.

Eis alguns exemplos:

Área de texto

'woocommerce_my_account_page' => array(
  'type' => 'textarea',
  'label' => __( 'Socail Media Profile Link', 'cloudways' ),
  'placeholder' => __( 'Link do perfil', 'cloudways' ),
  'obrigatório' => falso,
  ),

caixa de verificação

'woocommerce_my_account_page_checkbox' => array(

  'type' => 'checkbox',

  'label' => __( 'Checkbox', 'cloudways' ),

  ),

Lista de opções

'woocommerce_my_account_page_select' => array(

  'type' => 'select',

  'label' => __( 'Select Field', 'cloudways' ),

  'options' => array(

  '' => __( 'Seleciona uma opção.', 'cloudways' ),

  1 => __( 'Formulários WooCommerce', 'cloudways' ),

  2 => __( 'WooCommerce my account page', 'cloudways' ),

  3 => __( 'WooCommerce editar a página da minha conta', 'cloudways' ),

  4 => __( 'Como editar a página da minha conta no WooCommerce', 'cloudways' ),

  5 => __( 'Editar a página da minha conta WooCommerce', 'cloudways' ),

  ),

Vê como estas opções aparecem no formulário:

Podes guardar estes valores na função wooc_save_extra_register_fields(), mencionada acima.

Método 3: Adicionar campos de formulário de registo personalizados utilizando o plug-in

Para criar um formulário de registo utilizando um plugin no WooCommerce, podes utilizar o popular plugin“User Registration” do WP Everest. Oferece um construtor de formulários simples de arrastar e largar que te permite criar um formulário de registo personalizado para o teu site WooCommerce.

Vê aqui como criar um formulário de registo utilizando o plugin “User Registration”:

Passo 1: Instalar e ativar o plugin

• Vai ao teu painel de controlo do WordPress.
• Vai a‘Plugins‘ >‘Adicionar novo‘.
• Procura por“Registo de Utilizador” na barra de pesquisa.

• Instala e ativa o plugin do WP Everest.

Passo 2: Cria um formulário de registo com campos personalizados

• Vai para o painel de controlo do WordPress.
• Vai a“Registo de utilizadores” >“Adicionar novo“.

• Podes selecionar qualquer modelo ou começar do zero. Vou selecionar o modelo de formulário de registo de estudante.

• Dá-lhe um nome.

• Utiliza o criador de formulários de arrastar e largar para adicionar e organizar campos para o teu formulário de registo. Podes adicionar campos básicos, como o e-mail, o nome de utilizador e a palavra-passe, bem como campos personalizados, consoante as tuas necessidades.

Passo 3: Adiciona o formulário de registo ao teu site

• Podes adicionar o formulário de registo a uma página ou a um post utilizando um shortcode. Para encontrares o shortcode, vai a“Registo do utilizador” >“Todos os formulários” no teu painel de controlo do WordPress. Verás o shortcode listado junto ao teu formulário (por exemplo, [user_registration_form id=”123″]).
• Cria uma nova página ou publicação, ou edita uma já existente.
• Adiciona umbloco “Shortcode” e cola o shortcode do teu formulário de registo.

• Este shortcode adiciona um formulário de registo à tua página de contas.
• Publica ou actualiza a página.

Parabéns. Adicionaste com sucesso o formulário de registo com campos personalizados.

Agora, o teu formulário de registo personalizado deve estar visível no teu sítio Web e os utilizadores podem registar-se utilizando o formulário que criaste.

Melhores práticas para adicionar campos personalizados ao formulário de registo do WooCommerce

Ao adicionar campos personalizados ao teu formulário de registo do WooCommerce, é importante seguir as melhores práticas para garantir uma experiência de utilizador positiva e maximizar os benefícios da personalização. Aqui estão algumas das principais práticas recomendadas a serem consideradas:

• Adiciona campos personalizados que sejam relevantes e necessários para a tua empresa e público-alvo.
• Limita o número de campos.
• Escolhe o tipo de campo certo para a informação que estás a recolher.
• Organiza os campos do teu formulário de registo por uma ordem lógica, agrupando os campos relacionados.
• Adiciona regras de validação aos teus campos personalizados para garantir que os dados introduzidos pelos utilizadores são exactos e completos.
• Certifica-te de que os campos do teu formulário de registo personalizado são responsivos e são apresentados corretamente em diferentes dispositivos e tamanhos de ecrã.
• Testa regularmente os campos do formulário de registo personalizado para garantir que estão a funcionar corretamente e que proporcionam uma experiência de utilizador positiva.

Resolução de problemas comuns com os campos do formulário de registo do WooCommerce

Por vezes, quando tentas criar um formulário de registo para o WooCommerce, podes deparar-te com alguns problemas. Eis como podes resolver alguns dos problemas comuns que surgem nos campos do formulário de registo do WooCommerce.

Problema#1: O formulário de registo não é apresentado

Por vezes, configuras o formulário de registo, mas ele não aparece na tua página.

Resolve o problema:

Eis como podes resolver o problema:

• Certifica-te de que o WooCommerce está instalado e ativado.
• Acede a WooCommerce > Definições > Contas e privacidade.
• Certifica-te de que as opções “Permitir que os clientes criem uma conta durante o checkout” e/ou “Permitir que os clientes criem uma conta na página ‘A minha conta'” estão activadas.

Problema#2: Os campos não guardam a introdução do utilizador

Por vezes, crias um formulário de registo, mas os utilizadores não conseguem introduzir os seus dados.

Resolve o problema:

Eis como podes resolver este problema:

• Verifica se existem conflitos de plug-ins ou temas, desactivando outros plug-ins um a um e mudando para um tema predefinido, como o Twenty Twenty-One.

• Se for encontrado um conflito, contacta o respetivo programador do plugin ou do tema para obter assistência.

Problema#3: Os campos personalizados não aparecem no formulário de registo

Por vezes, os campos personalizados não aparecem no formulário de registo. Pode haver várias razões para isso. Uma delas é que não adicionaste o campo corretamente no ficheiro.

Resolve o problema:

Aqui tens a solução para isso:

• Verifica se os campos personalizados foram adicionados corretamente ao ficheiro functions.php do teu tema ativo ou a um plugin personalizado.
• Se os campos personalizados continuarem a não aparecer, verifica se existem conflitos entre plug-ins ou temas.

Problema#4: O e-mail ou o nome de utilizador já está a ser utilizado

Por vezes, quando os utilizadores introduzem o e-mail ou o nome de utilizador, recebem uma mensagem de erro a indicar que o endereço de e-mail ou o nome de utilizador já está a ser utilizado. Por vezes, esta mensagem também pode aparecer com endereços de correio eletrónico únicos.

Resolve o problema:

Eis como podes evitá-lo:

• Certifica-te de que o formulário de registo verifica se existem utilizadores com o mesmo e-mail ou nome de utilizador e apresenta uma mensagem de erro adequada.
• Considera a possibilidade de utilizar um plugin, como o “Registo de utilizador”, para permitir que os utilizadores se registem com as suas contas de redes sociais existentes.

Problema#5: Problemas de estilo do formulário de registo

Por vezes, não gostas da forma como o formulário de registo aparece na loja.

Resolve o problema:

Podes corrigi-lo brincando com o CSS.

• Inspecciona os estilos CSS aplicados ao formulário de registo e ajusta-os conforme necessário.
• Utiliza um tema secundário ou um plug-in CSS personalizado para adicionar ou modificar estilos CSS em segurança.

Impulsiona o crescimento da tua loja online com o Autonomous

“Entra no futuro da hospedagem com o Cloudways Autonomous. Experimenta uma escalabilidade perfeita, uma velocidade incomparável e uma segurança sólida para o teu site.”

Começa agora!

Resumo

Em conclusão, espero que tenhas achado este artigo útil para aprenderes a adicionar campos de formulário de registo personalizados à tua loja WooCommerce. Adicionar campos de formulário de registo no woocommerce pode melhorar significativamente a experiência do utilizador, recolher dados valiosos dos clientes e simplificar o processo de checkout.

Seguindo o nosso guia completo, podes implementar com sucesso campos personalizados utilizando webhooks ou código, ou plugins, garantindo um processo de registo personalizado e eficiente para os teus clientes.

Além disso, com a flexibilidade adicional dos campos personalizados, podes adicionar mais campos para além do nome, apelido e campos de contacto e torná-los obrigatórios, se necessário. Para um melhor desempenho, aloja a tua loja Woocommerce nos servidores de alojamento WordPress da Cloudways.

Se tiveres alguma dúvida, não hesites em comentar, e eu responderei prontamente.