Como personalizar a página de login do WooCommerce (3 métodos)

Publicados: 2022-08-17

Deseja personalizar sua página de login do cliente WooCommerce?

A página de login padrão do WordPress é simples e não corresponde à marca da sua loja. Personalizar sua página de login do cliente WooCommerce ajuda você a fornecer uma melhor experiência ao usuário.

Neste artigo, mostraremos como criar uma página de login do WooCommerce totalmente personalizada e também compartilharemos dicas sobre como personalizar a página de login de checkout.

How to create a custom WooCommerce customer login page

Por que criar uma página de login de cliente WooCommerce personalizada?

Quando os clientes fizerem login na sua loja WooCommerce, eles verão a página de login padrão do WordPress com apenas o logotipo e a marca do WordPress.

Standard WordPress login screen example

Esta página é boa se você quiser apenas acessar o painel do seu site. No entanto, os clientes podem ficar desanimados com o design simples e achar que a página de login não corresponde à aparência do seu site.

Personalizar as páginas de login do WooCommerce permite adicionar seu logotipo e alterar o design para corresponder ao seu site. Isso torna seu site mais profissional e oferece uma melhor experiência ao usuário.

Ele também permite que você adicione mais campos de formulário e ainda permite que você promova produtos específicos ou mostre ofertas especiais aos clientes.

Dito isto, vamos ver como você pode criar uma página de login de cliente personalizada no WooCommerce.

  • Crie uma página de login WooCommerce completamente personalizada com o SeedProd
  • Personalize a página de login do WooCommerce com WPForms
  • Bônus: personalize o login do WooCommerce Checkout

Crie uma página de login WooCommerce completamente personalizada usando o SeedProd

A melhor maneira de criar uma página de login de cliente WooCommerce personalizada é usando o SeedProd. É a melhor página de destino do WordPress e construtor de temas para WordPress, e é incrivelmente fácil de usar.

Você pode usar o construtor de arrastar e soltar do SeedProd para personalizar o design e o layout de uma página ou seu tema WordPress sem tocar em uma única linha de código.

Para este tutorial, usaremos a licença SeedProd Pro porque ela inclui o modelo de página de login e outras opções avançadas de personalização. Há também uma versão SeedProd Lite que você pode usar gratuitamente.

Primeiro, você precisará instalar e ativar o plug-in SeedProd. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você verá a tela de boas-vindas do SeedProd . Vá em frente e insira sua chave de licença e clique no botão 'Verificar chave'. Você pode encontrar a chave de licença na área da conta SeedProd.

SeedProd license key

Em seguida, você pode criar uma página de login personalizada para sua loja WooCommerce.

Basta acessar SeedProd » Landing Pages no painel do WordPress e clicar no botão 'Configurar uma página de login'.

Select Login Page

Depois disso, o SeedProd mostrará vários modelos. Você pode selecionar rapidamente um e personalizá-lo de acordo com suas necessidades. Isso ajuda a economizar tempo e você pode usar um design existente para criar sua própria página de login do WooCommerce.

O plug-in também permite criar uma página de login do zero usando um modelo em branco.

Choose a Template for Your SeedProd Login Page

Depois de selecionar um modelo, uma janela pop-up será aberta.

Vá em frente e digite um nome para sua página e clique no botão 'Salvar e começar a editar a página'.

Enter a Page Name and Page URL

Em seguida, você verá o construtor de páginas de arrastar e soltar.

Agora você pode personalizar a página de login adicionando novos blocos ao modelo no menu à sua esquerda.

O SeedProd oferece blocos padrão como título, texto, imagem, botão e muito mais.

Customize your WooCommerce login page

Além disso, você pode adicionar blocos avançados como sorteio, formulário de contato, botões de compartilhamento social, formulário de inscrição e muito mais. Há também blocos WooCommerce como produtos recentes, produtos em destaque e produtos mais vendidos que você pode adicionar ao seu modelo de página de login.

Usando os blocos WooCommerce, você pode recomendar facilmente seus principais produtos e promover ofertas de desconto para obter mais conversões.

Além disso, o SeedProd também permite personalizar ainda mais qualquer seção da página de login. Basta clicar na seção e você verá mais opções, como editar o rótulo, a cor, a fonte e o espaçamento.

More customization options

Quando terminar de personalizar a página de login do WooCommerce, não se esqueça de clicar no botão 'Salvar' na parte superior.

Depois disso, você pode ir para a guia 'Configurações da página' e clicar no botão 'Status da página' para alterá-lo de Rascunho para Publicar. Então, você pode ir em frente e clicar no botão 'Salvar' e fechar o construtor de páginas.

SeedProd Page Settings

A partir daqui, tudo o que resta é fazer com que sua nova página de login personalizada do WooCommerce apareça para os usuários. Para fazer isso, vá para SeedProd » Landing Pages no seu painel do WordPress.

Basta clicar no botão em 'Página de login' para que fique verde e diga 'Ativo'.

Make Your SeedProd Login Page Active

Uma vez ativado, sua nova página de login aparecerá em seu site!

Você pode visitar sua loja de comércio eletrônico para vê-la em ação.

WooCommerce login page preview

Personalize o formulário de login do cliente WooCommerce usando WPForms

Deseja criar um formulário de login que também corresponda ao tema do seu site e ofereça mais campos de formulário?

O formulário de login padrão do WordPress só permite que os usuários insiram seu endereço de e-mail ou nome de usuário junto com uma senha. Com um formulário de login personalizado, você pode adicionar mais campos e permitir que os clientes entrem com seus nomes ou números de telefone.

A melhor maneira de fazer isso é usando WPForms. É o melhor construtor de formulários do WordPress que é fácil de usar para iniciantes. Mais de 5 milhões de sites usam WPForms para criar formulários mais inteligentes.

Você pode criar facilmente um formulário de login personalizado do WooCommerce e exibi-lo em qualquer lugar da sua loja online, como a barra lateral ou a página do produto.

Para este tutorial, usaremos o plano WPForms Pro porque inclui o addon User Registration. Você também pode experimentar a versão gratuita do WPForms para começar.

Primeiro, você precisará instalar e ativar o plugin WPForms. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você pode acessar WPForms » Configurações no painel do WordPress e inserir a chave de licença. Você pode encontrar a chave de licença na área de conta WPForms.

Enter Your WPForms License Key

Em seguida, você precisará ir para WPForms » Addons no painel de administração do WordPress.

Depois disso, role para baixo até o 'User Registration Addon' e clique no botão 'Install Addon'.

Install WPForms User Registration Addon

Agora, você está pronto para criar um formulário de login personalizado para WooCommerce. Basta ir para WPForms » Adicionar novo para iniciar o construtor de formulários.

Na próxima tela, você pode inserir um nome para o seu formulário na parte superior. Em seguida, procure o modelo 'Formulário de login do usuário' e clique no botão 'Usar modelo'.

Select the WPForms User Login Form Template

Depois disso, você pode personalizar seu modelo de formulário de login de usuário usando o construtor de arrastar e soltar. WPForms torna muito fácil adicionar campos diferentes ao formulário ou reorganizar os campos existentes no modelo.

Por exemplo, você pode adicionar campos avançados, como números de telefone, arrastando-os do menu à esquerda e soltando-os no modelo.

WPForms Form Builder

Você pode personalizar ainda mais cada campo de formulário no modelo. Basta clicar em qualquer campo e editar seu rótulo, adicionar uma descrição e torná-lo um campo obrigatório no formulário.

Depois disso, você pode ir para a guia 'Configurações' no construtor de formulários. Nas configurações gerais, você pode alterar o 'Enviar texto do botão' para 'Login'.

Customizing the WPForms Button Text

Em seguida, você pode ir para a guia 'Confirmações' para alterar o que acontecerá quando um usuário fizer login com sucesso.

Basta clicar no menu suspenso 'Tipo de confirmação' e selecionar uma opção. Você pode mostrar uma mensagem aos clientes, exibir uma página ou redirecioná-los para um URL específico.

Por exemplo, você pode adicionar seu formulário de login do WooCommerce em uma página de produto e permitir que os clientes façam login rapidamente para comprar seu produto.

Edit confirmation settings in WPForms

Quando terminar, basta clicar no botão 'Salvar' na parte superior.

Em seguida, você precisará adicionar o formulário de login do cliente WooCommerce a uma página do seu site.

Basta clicar no botão 'Incorporar' na parte superior do construtor. Você pode então escolher se deseja colocar o formulário em uma página existente ou criar um novo para ele.

Embed a form in page

Vamos escolher a opção 'Criar nova página' por enquanto.

Em seguida, você precisará inserir um nome para sua página e clicar no botão 'Vamos lá!' botão.

Enter a name for new login page

Depois disso, você verá o formulário de login do WPForms dentro da área de conteúdo do WordPress.

Agora, você pode visualizar seu formulário, publicar a nova página e exibir o login personalizado do WooCommerce para seus clientes.

WooCommerce login page preview using WPForms

Por outro lado, você também pode adicionar seu formulário de login do WooCommerce à barra lateral da sua loja. Dessa forma, seu formulário aparecerá em todas as páginas do produto e permitirá que os clientes façam login rapidamente.

Simplesmente, vá para Aparência » Widgets do seu painel do WordPress. Em seguida, clique no botão '+' e adicione um bloco de widgets WPForms.

Depois disso, você pode escolher seu formulário de login no menu suspenso e inserir um título.

Add your login form in the sidebar

Quando terminar, clique no botão 'Atualizar'.

Agora você pode visitar sua loja online para ver o formulário de login na barra lateral.

Login form in sidebar preview

Para mais maneiras de criar uma página de login personalizada do cliente WooCommerce, você pode querer ver nosso guia sobre como criar uma página de login personalizada do WordPress.

Além disso, você também pode ver nosso tutorial sobre como adicionar um menu de navegação no WordPress para que você possa adicionar sua página de login do WooCommerce à navegação do seu site.

Bônus: Personalize a página de login do WooCommerce Checkout

O WooCommerce permite que visitantes recorrentes façam login durante a página de checkout. Se você deseja personalizar a página de login de checkout do WooCommerce, a melhor maneira de fazer isso é usando um poderoso plugin de construção de funil como o WooFunnels.

O WooFunnels permite que você personalize sua página de checkout do WooCommerce, adicione checkout em várias etapas, adicione upsells com um clique e muito mais.

Você pode selecionar entre dezenas de modelos de checkout pré-fabricados que são altamente otimizados para conversões, e a melhor parte é que você pode personalizá-los usando qualquer um dos populares construtores de páginas do WordPress.

WooFunnels Checkout Example

Você tem a opção de testar A/B os vários funis, páginas de vendas e ofertas de upsell.

WooFunnels fornece análises detalhadas sobre cada etapa do seu funil WooCommerce.

WooFunnels A/B Testing for WooCommerce

Ele também vem com um poderoso complemento de automação de marketing, Autonami, que permite personalizar e-mails do WooCommerce, enviar notificação por e-mail no WooCommerce para abandono de carrinho, série de boas-vindas e muito mais.

Autonami Email Library for WooCommerce

Se você leva a sério o crescimento de sua loja WooCommerce, essa é uma das ferramentas obrigatórias que recomendamos.

Esperamos que este artigo tenha ajudado você a aprender como criar uma página de login personalizada do cliente WooCommerce. Você também pode ver nossa escolha de especialistas sobre os melhores plugins WooCommerce e nosso guia definitivo sobre como corrigir o problema de não enviar e-mail do WordPress.

Se você gostou deste artigo, assine nosso canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.