Se você deseja oferecer uma experiência mais fluida aos clientes em sua loja WooCommerce, criar uma página de login personalizada é um ótimo lugar para começar.
A página de login padrão do WordPress parece simples e não combina com a marca da sua loja. Ao personalizá-la, você pode fazer com que o processo de login pareça mais profissional e alinhado à sua marca.
Na WPBeginner, ajudamos muitos usuários a configurar páginas de login personalizadas, e a maneira mais fácil é usando um construtor de páginas como o SeedProd ou um plugin de formulário como o WPForms.
Neste tutorial, mostrarei como projetar uma página de login WooCommerce totalmente personalizada e compartilharei uma ferramenta poderosa que você também pode usar para personalizar a página de login do checkout.
Por que Criar uma Página de Login Personalizada para Clientes WooCommerce?
Personalizar as páginas de login do WooCommerce permite que você adicione seu logotipo e altere o design para combinar com seu site. Isso torna seu site mais profissional e proporciona uma melhor experiência ao usuário.
Também permite adicionar mais campos de formulário e até mesmo promover produtos específicos ou exibir ofertas especiais para os clientes.
Caso contrário, quando os clientes fizerem login em sua loja WooCommerce, eles verão a página de login padrão do WordPress com apenas o logotipo e a marca do WordPress.
Esta página é aceitável se você deseja apenas acessar o painel do seu site. No entanto, os clientes podem se sentir desencorajados pelo design simples e achar suspeito que a página de login não corresponda à aparência do seu site.
Dito isso, vamos ver como você pode criar uma página de login personalizada para clientes no WooCommerce.
Você pode usar os links rápidos abaixo para pular para diferentes métodos em nosso tutorial:
- Método 1: Crie uma Página de Login WooCommerce Completamente Personalizada Usando SeedProd
- Método 2: Personalize o Formulário de Login de Clientes WooCommerce Usando WPForms
- Dica Bônus: Personalize a Página de Login do Checkout WooCommerce
- Perguntas Frequentes Sobre Páginas de Login WooCommerce
Qual Método Você Deve Escolher?
Este artigo cobre três maneiras diferentes de personalizar sua página de login. Aqui está um resumo rápido para ajudá-lo a escolher a melhor para sua loja:
- Método 1: SeedProd – Melhor para criar uma página de login totalmente personalizada e independente com um design exclusivo que combina com sua marca.
- Método 2: WPForms – Ideal se você deseja adicionar um formulário de login flexível a qualquer página, postagem ou barra lateral em seu site.
- Bônus: Personalize o Login do Checkout – A melhor opção para melhorar o formulário de login na página de checkout do WooCommerce para ajudar clientes recorrentes.
Método 1: Crie uma Página de Login WooCommerce Completamente Personalizada Usando SeedProd
A melhor maneira de criar uma página de login de cliente WooCommerce personalizada é usando o SeedProd. É o melhor construtor de páginas de destino e temas do WordPress 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 do seu tema WordPress sem tocar em uma única linha de código.
Para saber mais, veja nossa análise detalhada do SeedProd.
Primeiro, você precisará instalar e ativar o plugin SeedProd. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.
📌 Observação: 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. Existe também uma versão SeedProd Lite que você pode usar gratuitamente.
Após a ativação, você verá a tela de boas-vindas do SeedProd.
Prossiga e insira sua chave de licença e clique no botão ‘Verificar chave’. Você pode encontrar a chave de licença na área de conta do SeedProd.
Em seguida, você pode criar uma página de login personalizada para sua loja WooCommerce.
Simplesmente acesse SeedProd » Landing Pages no seu painel do WordPress e clique no botão ‘Configurar uma Página de Login’.
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 plugin também permite que você crie uma página de login do zero usando um modelo em branco.
Assim que você selecionar um modelo, uma janela pop-up será aberta.
Prossiga e insira um nome para sua página e clique no botão ‘Salvar e Começar a Editar a Página’.
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 do menu à sua esquerda.
O SeedProd oferece blocos padrão para títulos, textos, imagens, botões e muito mais.
Além desses, você pode adicionar blocos avançados como sorteio, formulário de contato, botões de compartilhamento social, formulário de optin e muito mais.
Existem também blocos do 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 do WooCommerce, você pode facilmente recomendar seus principais produtos e promover ofertas de desconto para obter mais conversões.
Além disso, o SeedProd também permite que você personalize ainda mais qualquer seção da página de login. Simplesmente clique na seção e você verá mais opções como editar o rótulo, cor, fonte e espaçamento.
Quando terminar de personalizar a página de login do WooCommerce, não se esqueça de clicar no botão ‘Salvar’ no topo.
Depois disso, você pode ir para a aba ‘Configurações da Página’ e clicar no alternador ‘Status da Página’ para mudá-lo de Rascunho para Publicar. Em seguida, você pode prosseguir e clicar no botão ‘Salvar’ e fechar o construtor de páginas.
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.
Simplesmente clique no interruptor em ‘Página de Login’ para que ele fique verde e diga ‘Ativo.’
Assim que isso for ativado, sua nova página de login aparecerá em seu site WordPress!
Você pode visitar sua loja de comércio eletrônico para vê-la em ação.
Método 2: Personalize o Formulário de Login de Clientes WooCommerce Usando WPForms
Você quer criar um formulário de login que também combine com o tema do seu site e ofereça mais campos de formulário?
O formulário de login padrão do WordPress permite apenas que os usuários insiram seu endereço de e-mail ou nome de usuário, juntamente com uma senha.
O principal benefício de usar um plugin de formulário é a flexibilidade. Ele permite que você coloque seu formulário de login em qualquer lugar em sua loja online, como em uma barra lateral ou em uma página de produto, tornando-o conveniente para os clientes.
A melhor maneira de fazer isso é usando o WPForms. É o melhor construtor de formulários do WordPress, fácil de usar para iniciantes. Mais de 6 milhões de sites usam o WPForms para criar formulários mais inteligentes.
Na WPBeginner, nós o usamos para criar formulários de contato e pesquisas anuais, e nós o adoramos. Para saber mais, veja nossa análise completa do WPForms.
Você pode facilmente criar um formulário de login personalizado do WooCommerce e exibi-lo em qualquer lugar em sua loja online, como na barra lateral ou na página do produto.
Primeiro, você precisará instalar e ativar o plugin WPForms. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin WordPress.
📌 Observação: Para este tutorial, usaremos o plano WPForms Pro porque ele inclui o addon de Registro de Usuário. Você também pode experimentar a versão gratuita do WPForms para começar.
Após a ativação, você pode ir para WPForms » Configurações no seu painel do WordPress e inserir a chave de licença. Você pode encontrar a chave de licença na área de conta do WPForms.
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 ‘Instalar Addon’.
Agora, você está pronto para criar um formulário de login personalizado para o WooCommerce. Simplesmente vá 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 no topo. Em seguida, procure pelo modelo ‘User Login Form’ e clique no botão ‘Usar Modelo’.
Depois disso, você pode personalizar seu modelo de formulário de login de usuário usando o construtor de arrastar e soltar. O WPForms torna muito fácil adicionar diferentes campos 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 à sua esquerda e soltando-os no modelo.
Você pode personalizar ainda mais cada campo do formulário no modelo. Simplesmente clique em qualquer campo e edite seu rótulo, adicione uma descrição e torne-o um campo obrigatório no formulário.
Depois disso, você pode ir para a aba ‘Configurações’ no construtor de formulários. Em Configurações Gerais, você pode alterar o ‘Texto do Botão Enviar’ para ‘Entrar’.
Em seguida, você pode ir para a aba ‘Confirmações’ para alterar o que acontecerá quando um usuário entrar com sucesso.
Simplesmente clique no menu suspenso ‘Tipo de Confirmação’ e selecione uma opção. Você pode mostrar aos clientes uma mensagem, exibir uma página ou redirecioná-los para um URL específico.
Por exemplo, você pode adicionar seu formulário de login do WooCommerce a uma página de produto e permitir que os clientes entrem rapidamente para comprar seu produto.
Quando terminar, simplesmente clique no botão ‘Salvar’ no topo.
Em seguida, você precisará adicionar o formulário de login do cliente WooCommerce a uma página em seu site.
Simplesmente clique no botão ‘Incorporar’ no topo do construtor. Você pode então escolher se colocará o formulário em uma página existente ou criará uma nova para ele.
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á!’.
Depois disso, você verá o formulário de login do WPForms dentro da área de conteúdo do WordPress.
A partir daqui, você pode personalizar e estilizar seu formulário de login abrindo o painel de blocos no lado direito da tela. Na seção ‘Temas’, você pode escolher entre mais de 40 temas pré-fabricados para dar ao seu formulário de login um visual único.
Você também pode alterar o estilo e o tamanho dos campos do formulário, rótulos, botões e muito mais.
Assim que estiver satisfeito com o design, você pode visualizar seu formulário, publicar a nova página e exibir o login personalizado do WooCommerce para seus clientes.
Você também pode adicionar seu formulário de login do WooCommerce à barra lateral de sua loja. Dessa forma, seu formulário aparecerá em todas as páginas de produto e permitirá que os clientes entrem rapidamente.
Simplesmente navegue até Aparência » Widgets no seu painel do WordPress. Em seguida, clique no botão '+' e adicione um bloco de widget WPForms.
Depois disso, você pode escolher seu formulário de login no menu suspenso e inserir um título.
Quando terminar, clique no botão 'Atualizar'.
Agora você pode visitar sua loja online para ver o formulário de login na barra lateral.
Para mais maneiras de criar uma página de login de cliente WooCommerce personalizada, você pode consultar 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.
Dica Bônus: Personalize a Página de Login do Checkout WooCommerce
O WooCommerce permite que visitantes recorrentes façam login durante a página de checkout. No entanto, um formulário de login genérico ou desajeitado na página de checkout pode interromper o processo de compra e levar à perda de vendas.
Ao criar uma experiência de login integrada e com a marca neste passo crítico, você pode reduzir o abandono de carrinho e construir mais confiança com seus clientes.
A melhor maneira de fazer isso é usando um poderoso plugin de construtor de funis como o FunnelKit.
Ele vem com modelos projetados profissionalmente que substituem a página de checkout padrão, proporcionando aos clientes recorrentes uma experiência de login muito melhor e mais fácil. Isso ajuda a reduzir o atrito e aumenta a probabilidade de eles concluírem suas compras.
Você também tem a opção de testar A/B os múltiplos funis, páginas de vendas e ofertas de upsell.
O FunnelKit oferece análises detalhadas de cada etapa do seu funil WooCommerce.
Ele também vem com um poderoso add-on de automação de marketing, Automações FunnelKit.
Ele permite personalizar e-mails do WooCommerce, enviar notificações de e-mail em gotejamento no WooCommerce para abandono de carrinho, séries de boas-vindas e muito mais.
Se você está falando sério sobre o crescimento da sua loja WooCommerce, esta é uma das ferramentas essenciais que recomendamos.
Perguntas Frequentes Sobre Páginas de Login WooCommerce
Aqui estão algumas perguntas que nossos leitores frequentemente fazem sobre a criação de páginas de login do WooCommerce no WordPress:
Posso usar estas páginas de login personalizadas para usuários regulares do WordPress também?
Sim, absolutamente. O método usando SeedProd substitui a página de login padrão do WordPress para todos os usuários, incluindo administradores e editores. O método WPForms permite que você coloque um formulário de login em qualquer lugar, que também pode ser usado por qualquer função de usuário.
Preciso saber codificar para personalizar minha página de login?
De forma alguma. Tanto o SeedProd quanto o WPForms são projetados para serem fáceis de usar com construtores de arrastar e soltar. Você pode criar uma página de login com aparência profissional sem tocar em uma única linha de código.
É gratuito criar uma página de login personalizada do WooCommerce?
Ambos os plugins oferecem versões gratuitas para começar. No entanto, para acessar os modelos específicos de página de login e os recursos avançados mostrados neste tutorial, você precisará das versões Pro de SeedProd ou WPForms.
Qual método é melhor para minha loja, SeedProd ou WPForms?
Depende das suas necessidades específicas. O SeedProd é ideal se você deseja criar uma página de login completamente separada e totalmente projetada que combine perfeitamente com sua marca.
Por outro lado, o WPForms é melhor se você deseja um formulário de login flexível que possa adicionar a vários locais em seu site, como uma barra lateral ou uma página de checkout.
Esperamos que este artigo tenha ajudado você a aprender como criar uma página de login personalizada para clientes do WooCommerce. Você também pode ver nossa seleção especializada dos melhores plugins WooCommerce e nosso guia sobre como limitar tentativas de login no WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Jiří Vaněk
Sempre segui a regra de que ótimos sites são feitos de detalhes. Sim, a página de login padrão do WooCommerce funciona perfeitamente, mas é pouco atraente e, eu diria, bastante sem graça. O SeedProd adiciona uma dimensão totalmente nova, e é incrivelmente fácil de usar com um guia tão detalhado à mão. Como mencionei, são esses detalhes, como uma página de login personalizada, que transformam uma loja comum em uma boa e uma boa em uma ótima. Obrigado pelo conselho.
Dennis Muthomi
Thank you for showing the SeedProd method
I like how SeedProd allows adding custom blocks and sections to match my branding.
I have one clarifying question – when I use SeedProd to create the custom customer login page, will it also replace the default admin login, or will the admin login page remain unchanged?
WPBeginner Support
Sim, substituiria seu login normal, bem como o login da sua loja.
Admin