Como criar um formulário de registro personalizado WooCommerce

Publicados: 2022-02-15

Quer melhorar o processo de cadastro de clientes do seu site WordPress? Criar um formulário de registro personalizado do WooCommerce é um passo na direção certa.

O plug-in padrão do WooCommerce possui um formulário de registro, mas coleta apenas informações básicas. Mas com a ajuda de um plugin chamado ProfilePress, você pode coletar mais informações do usuário e reordenar o formulário para torná-lo amigável. As informações coletadas por meio do formulário podem ser usadas para suas campanhas de email marketing, entre outras coisas.

Neste artigo, mostraremos como criar um formulário de registro personalizado e substituí-lo pelo formulário padrão do WooCommerce. Vamos mergulhar.

Criando um formulário de registro personalizado do WooCommerce

Para criar um formulário de registro personalizado do WooCommerce, você precisa de um plugin chamado ProfilePress. Abaixo, mostraremos como configurar o plugin.

Passo 1: Instale o ProfilePress

Inscreva-se no ProfilePress e você receberá um recibo com um link para baixar o plug-in junto com uma chave de licença. Baixe e instale o plugin em seu site WordPress. Digite a chave de licença para ativar o plugin.

Passo 1.5: Habilite o registro do WooCommerce

Vá para WooCommerce->Configurações do seu painel. Clique na seção Privacidade e contas e marque a opção Permitir que os clientes criem uma conta na opção da página “Minha conta” .

Passo 2: Criando um formulário personalizado com ProfilePress

Agora vem a parte divertida. No painel do WordPress, vá para ProfilePress > Forms & Profiles > Registration > Add New .

Você tem duas opções para criar um formulário de registro personalizado. Você pode usar um modelo pré-fabricado ou criar um formulário do zero. Se você não sabe codificar e/ou não quer investir tempo na construção de um formulário do zero, recomendamos escolher um modelo.

Selecione o Construtor de arrastar e soltar.

Dê um nome ao formulário e escolha um dos modelos pré-criados. Para o propósito deste tutorial, escolhemos Tulip . Na próxima página, você pode personalizar o formulário de acordo com suas necessidades.

Adicionando campos personalizados

Você pode adicionar os seguintes campos personalizados ao formulário, incluindo campos de cobrança e envio do WooCommerce ao seu formulário de registro.

  • Nome do usuário
  • Endereço de email
  • confirmar e-mail
  • Senha
  • Confirme sua senha
  • Força da senha
  • Apelido do site
  • Nome em Exibição
  • Primeiro nome
  • Último nome
  • Carregar foto do perfil
  • Carregar foto de capa
  • Biografia
  • Selecionar função
  • HTML personalizado
  • reCAPTCHA

Aqui está uma rápida olhada nos campos personalizados que escolhemos para nosso formulário de registro:

Construtor de formulário de registro de woocommerce personalizado

Modificando as configurações do formulário

ProfilePress permite que você altere a aparência do formulário, incluindo. Isso significa que você pode criar um formulário que complementa sua marca e estilo. Recomendamos gastar alguns minutos modificando a aparência do seu formulário.

E antes de passar para a próxima etapa, certifique-se de ir para Configurações de registro e escolher Cliente como a Nova função de usuário. Qualquer pessoa que se inscrever usando este formulário personalizado será contada como cliente.

Quando o formulário estiver pronto, salve as alterações. Agora, é hora de exibir o novo formulário de registro personalizado em seu site.

Etapa 3: Substituindo o formulário de registro do WooCommerce

Nesta seção, você aprenderá como substituir o formulário de registro padrão do WooCommerce pelo novo formulário de registro personalizado.

Vá para ProfilePress > Configurações > WooCommerce . Você deverá ver uma opção chamada Formulário de registro de minha conta . No menu suspenso, selecione o novo formulário de registro que você acabou de criar e salve a configuração.

Se desejar, você pode usar este formulário como sua página de registro padrão para seu site. Tudo que você precisa fazer é ir para ProfilePress > Configurações > Geral > Global . Em seguida, na opção Página de registro , selecione a nova página de registro personalizada .

Vale a pena notar que, se você optar por criar uma nova página de registro, copie o código de acesso do formulário, crie uma nova página, adicione o código de acesso e publique a página. Sim, é tão fácil!

É isso, pessoal! É assim que você cria um formulário de registro personalizado do WooCommerce! Ao visualizar sua página WooCommerce My Account, você deverá ver o formulário de registro exibido.

Formulário de registro personalizado WooCommerce

Agora que você tem o formulário de registro personalizado, alguns de vocês estão se perguntando se também podem criar um formulário de login personalizado. O processo de criação de um formulário de login personalizado do WooCommerce é idêntico ao processo de criação de um formulário de registro personalizado. Mostraremos rapidamente as etapas na próxima seção.

Como criar um formulário de login personalizado do WooCommerce

Para criar um formulário de login personalizado do WooCommerce, vá para ProfilePress > Forms & Profiles > Login > Add New .

Selecione o Construtor de arrastar e soltar . Dê um nome ao formulário e escolha um dos modelos pré-criados .

Em seguida, adicione campos personalizados e modifique a aparência do formulário conforme suas necessidades.

E, finalmente, para substituir o formulário de login padrão do WooCommerce pelo novo formulário personalizado, vá para ProfilePress > Configurações > WooCommerce > Formulário de login da minha conta e selecione o novo formulário de login .

Se você quiser tornar o novo formulário de login seu formulário de login padrão para todo o seu site, vá para ProfilePress > Configurações > Geral > Global . Em seguida, na opção Página de login , selecione o novo formulário de login personalizado .

Veja como a página de login personalizada ficará em nosso site:

Login personalizado WooCommerce

Com isso, agora você sabe como criar um formulário de login personalizado do WooCommerce.

Se você substituir os formulários padrão de registro e login na página Minha conta por formulários personalizados do ProfilePress, veja como ele pode ficar no seu site.

Em qualquer loja WooCommerce, além do formulário de registro e login, existe outro formulário importante que os visitantes costumam usar – o formulário de checkout. A seguir, veremos por que você deve considerar a personalização do formulário de checkout e quais são exatamente as etapas que você precisa seguir.

Adicionando campos de registro personalizados ao WooCommerce Checkout

Adicionar campos personalizados à página de checkout é uma ótima maneira de coletar informações adicionais do cliente. Por exemplo, você pode permitir que os clientes adicionem suas contas de mídia social para facilitar o processo de registro. Isso ajuda a oferecer uma melhor experiência ao cliente e aumentar suas vendas.

Vá para WooCommerce > Configurações > Contas e privacidade e selecione Permitir que os clientes criem uma conta durante o checkout .

Em seguida, vá para ProfilePress > Configurações > Campos personalizados . Você deve encontrar um ou dois campos personalizados disponíveis nesta página. Para adicionar mais campos personalizados, selecione Adicionar novo .

ProfilePress suporta os seguintes tipos de campos personalizados:

  • Texto
  • Senha
  • E-mail
  • Telefone
  • Campo oculto
  • Número
  • Encontro
  • País
  • Área de texto
  • Caixa de seleção única
  • Upload de arquivo
  • Selecionar menu suspenso
  • Botões do rádio
  • Caixa de seleção

Quando você tiver criado todos os campos necessários, salve as configurações e vá para ProfilePress > Configurações > WooCommerce > Checkout Registration Fields . Adicione os campos de registro que você acabou de criar.

Se você deseja tornar os campos obrigatórios, então em Campos de Registro Obrigatórios , adicione os campos que você acha que devem ser obrigatórios.

Não se esqueça de salvar as alterações.

É isso. Agora você tem um formulário de registro de checkout personalizado.

Conclusão

A coleta de informações do usuário por meio de um registro ou formulário personalizado do WooCommerce pode ajudar a aumentar suas vendas. O WooCommerce não oferece opções para adicionar campos ou fazer qualquer tipo de personalização em seus formulários, portanto, você precisa de um plug-in como o ProfilePress para modificar os formulários do WooCommerce.

Dito isto, ProfilePress é mais do que apenas um construtor de formulários. Ele pode ajudá-lo a gerenciar perfis de usuários e diretórios de membros. Ele pode ajudá-lo a restringir o acesso ao conteúdo do seu site, entre outras coisas. Dê uma chance ao ProfilePress!

Se você gostou do nosso guia, pode achar úteis alguns de nossos outros guias WooCommerce. Dê uma olhada no nosso blog.