Como personalizar os formulários de login e registro do WooCommerce

Fora da caixa, o WooCommerce oferece opções de personalização limitadas para formulários de login e registro. Isso dificulta que os donos de lojas ofereçam uma boa experiência de usuário aos clientes.

Além disso, você está limitado aos campos de checkout padrão, o que significa que não pode coletar informações adicionais do cliente durante o checkout. Isso não é ideal para lojas que desejam oferecer aos clientes a opção de selecionar datas de reserva, inserir vários endereços de e-mail ou oferecer opções de embalagem de presente.

Uma maneira de superar isso é usando um plug-in robusto, como o ProfilePress, que permite gerenciar tudo em um só lugar. Neste artigo, veremos como você pode personalizar os formulários de login e registro do WooCommerce usando o ProfilePress.

Por que personalizar os formulários de login e registro do WooCommerce?

Personalizar os formulários de login e registro do WooCommerce pode ajudar a tornar seu site mais fácil de usar e aumentar as conversões.

Os proprietários de lojas podem precisar personalizar os formulários de login e registro padrão do WooCommerce para oferecer uma experiência personalizada aos clientes. Ao criar um formulário de login e cadastro exclusivo, você pode aprimorar a experiência do cliente em seu site e maximizar os cadastros.

Você também pode adicionar campos personalizados à página de checkout do seu site WooCommerce como forma de coletar informações adicionais do cliente antes de efetuar o checkout. Por exemplo, você pode permitir que os clientes adicionem suas contas de mídia social, seus nomes de usuário ou exibam informações adicionais sobre os produtos em seu carrinho de compras. Isso ajuda você a oferecer uma experiência de compra mais personalizada aos seus clientes.

Substituir a página padrão “Minha conta” no WooCommerce por uma personalizada é uma ótima maneira de destacar sua loja. Você pode permitir que os clientes façam login facilmente em suas contas e gerenciem seus detalhes de um local centralizado. Por exemplo, eles podem fazer login, se inscrever e personalizar suas contas de usuário fazendo upload de fotos de perfil, editando apelidos ou adicionando uma biografia.

Personalizar os formulários de login e registro do WooCommerce pode ajudá-lo a oferecer uma experiência de usuário aprimorada em sua loja online.

Personalizando os formulários de login e registro do WooCommerce

Usando o ProfilePress, é fácil personalizar os formulários de login e registro do WooCommerce e torná-los exatamente como você deseja.

ProfilePress oferece uma solução completa para criar sites WordPress atraentes e oferece ferramentas abrangentes que ajudam a controlar quem tem acesso ao seu conteúdo. Você pode criar perfis de usuário intuitivos juntamente com formulários de registro e login atraentes usando um construtor de arrastar e soltar.

Para isso, precisaremos de um site WordPress funcional com o plugin WooCommerce instalado. Também precisaremos do plugin ProfilePress para criar formulários de login e registro personalizados.

Passo #1: Instale e ative o ProfilePress

Comece obtendo o plugin ProfilePress e instalando-o em seu site WordPress. Navegue até Plugins → Adicionar novo usando o painel de administração do WordPress e clique no botão Adicionar novo . Carregue o arquivo zip e instale o plugin em seu site WordPress.

Etapa 2: Personalize os formulários de login e registro

A primeira coisa que precisamos fazer é começar a criar nosso formulário de login personalizado usando o ProfilePress. Para fazer isso, navegue até ProfilePress → Forms & Profiles e clique no botão Adicionar novo na seção Login . Clique no Construtor de arrastar e soltar e selecione um modelo. Para esta demonstração, selecionamos o modelo Bash .

Depois de selecionar o modelo, você será redirecionado automaticamente para a página Editar formulário . Você pode adicionar e soltar Campos na ordem que preferir e editar Rótulos de campo também.

Você também pode editar as configurações do formulário e personalizar a aparência e os rótulos dos botões no formulário de login. Quando terminar, clique no botão Salvar alterações para continuar. Agora precisamos criar uma nova página do WordPress e adicionar o formulário de login personalizado a essa página usando o shortcode personalizado.

Navegue até Páginas → Adicionar novo para criar uma nova página e adicione o código de acesso do formulário de login à página. Clique no botão Publicar para continuar.

Agora, vamos criar o formulário de registro e adicioná-lo a uma nova página do WordPress. Para fazer isso, navegue até ProfilePress → Formulários e perfis e clique no botão Adicionar novo na seção Registro .

Dê um título ao seu formulário de registro e selecione um modelo para começar a personalizá-lo. Selecionamos o modelo Tulipa . Você será redirecionado automaticamente para a página de edição de formulário .

Aqui, você pode adicionar ou remover campos do seu formulário de registro e alterar a aparência deles no front-end. Quando terminar de personalizar o formulário de registro, clique no botão Salvar alterações para continuar.

Para criar uma nova página de registro do WordPress, vá para Páginas → Adicionar novo e cole o código de acesso do formulário de registro. Clique no botão Publicar para continuar.

Etapa #3: Exiba os formulários de login e registro no front-end

Vá até ProfilePress → Configurações e clique na guia Geral . Adicione as páginas de login e registro personalizadas recém-criadas à sua loja usando os menus suspensos e clique no botão Salvar alterações para continuar.

Isso substituirá a página de login padrão do WordPress e todos os links de login e registro do WooCommerce pelos ProfilePress . Veja como isso fica no front-end do seu site.

Passo #3.5: Substituindo os formulários de login e registro do WooCommerce

Para substituir os formulários de registro e login exibidos na página Minha conta do WooCommerce, vá para Configurações >> WooCommerce e selecione os formulários de login e registros ProfilePress para substituí-los.

Os usuários poderão se registrar para uma conta em seu site WooCommerce usando o atraente formulário de registro personalizado. Os usuários já registrados podem fazer login em suas contas usando o formulário de login personalizado que criamos anteriormente:

Etapa 4: adicionar campos personalizados à página de checkout

Você também pode adicionar campos personalizados à página de checkout da sua loja WooCommerce. Para fazer isso, basta navegar até ProfilePress → Configurações e clicar na guia Campos personalizados .

Clique no botão Adicionar novo e defina um rótulo de campo para seu campo personalizado. Depois de definir a chave do campo e a descrição do campo, você pode definir o tipo de campo dependendo do que você precisa.

Você pode criar texto, senhas, e-mail, telefone, campos ocultos, número, data, país, upload de arquivo, botões de opção, caixa de seleção, campos de área de texto e exibi-los na página de checkout da sua loja WooCommerce.

Quando estiver pronto, clique no botão Salvar alterações para continuar.

Em seguida, vá para ProfilePress → Configurações e clique na guia WooCommerce . Adicione os campos personalizados na metabox Campos de registro obrigatórios e clique no botão Salvar alterações para continuar.

Os usuários poderão ver os campos personalizados na página de registro de checkout ao fazer o checkout em sua loja online

.

Além disso, também queremos exibir o formulário de login personalizado na página de checkout e substituir o padrão. Para fazer isso, basta navegar até ProfilePress → Configurações e clicar na guia WooCommerce .

Selecione o formulário de login personalizado usando o menu suspenso ao lado de Formulário de login do Checkout e clique no botão Salvar alterações para continuar. Isso substituirá o formulário de login padrão na página de checkout do seu site WooCommerce.

Bônus: crie uma página personalizada "Minha conta" do WooCommerce

A página “Minha conta” no WooCommerce permite que os visitantes do site acessem sua conta de usuário diretamente do front-end.

ProfilePress permite que você crie uma página “Minha conta” totalmente personalizada do WooCommerce, onde os usuários podem visualizar facilmente suas contas de usuário e editá-las, tudo em uma única página. Para fazer isso, navegue até Profile Press → Forms & Profiles e clique no botão Add New .

Dê um novo nome ao seu formulário Editar perfil e selecione um modelo para começar a personalizar. Selecionamos o modelo Pinnacle . Depois de clicar no botão Selecionar seu modelo , ele o redirecionará automaticamente para a página Editar formulário .

Você pode adicionar campos e personalizar a aparência do seu formulário no frontend do seu site WooCommerce. Quando terminar de personalizar o formulário “Minha conta”, clique no botão Salvar alterações para continuar.

Agora que criamos o formulário “Minha Conta”, precisamos criar uma página do WordPress para poder exibi-la em seu site. Vá para Páginas → Adicionar novo e cole o shortcode Editar perfil . Clique no botão Publicar quando terminar.

E abaixo está uma prévia do formulário de perfil de edição personalizado.

Ou você pode simplesmente pular todo o processo e usar o shortcode ProfilePress My Account na página criada acima.

Os usuários poderão editar as informações de sua conta e clicar no botão Atualizar perfil para fazer alterações em suas contas de usuário diretamente do front-end. A página serviria como a nova página Minha conta.

Você também pode permitir que os usuários visualizem seus pedidos, downloads, assinaturas e associações acessando ProfilePress → Configurações. Clique na guia WooCommerce e selecione as guias a serem exibidas na configuração Minhas guias da conta.

Conclusão

Personalizar os formulários de login e registro do WooCommerce em seu site é uma ótima maneira de aprimorar a experiência do cliente e incentivar mais usuários a se registrarem com você.

Embora o WordPress, por padrão, ofereça funcionalidade de personalização limitada para páginas de login e registro, você pode usar um plug-in robusto, como ProfilePress, para criar páginas personalizadas e aprimorar a experiência do usuário que sua loja online oferece.

Pronto para personalizar os formulários de login e registro do WooCommerce em seu site? Obtenha o ProfilePress hoje mesmo!