O guia completo para código curto de login do WooCommerce

Uma página de login é um elemento importante de uma loja WooCommerce. É como uma porta de entrada para seus clientes acessarem suas contas, rastrear pedidos e concluir compras. Mas e se todo o processo for excessivamente complicado e não cumprir o seu propósito?

Bem, é por isso que você precisa tentar personalizar os códigos de acesso de login do WooCommerce. Eles ajudam você a criar e personalizar páginas de login em minutos e fornecem uma experiência amigável aos seus clientes.

Portanto, se você deseja um formulário de login simples, uma página combinada de login e registro ou uma página de registro independente para campanhas direcionadas, os códigos de acesso de login do WooCommerce facilitam a obtenção.

Neste artigo, discutiremos tudo relacionado ao shortcode de login do WooCommerce, começando por como criar uma página de login usando shortcode para personalizá-la para uma melhor experiência do usuário.

Então, vamos começar.

Tipos de páginas de login do WooCommerce

Uma página de login pode parecer um simples gateway, mas é mais do que apenas um gateway – é um campo de nome de usuário e senha!

Existem diferentes tipos de páginas de login, dependendo das necessidades do seu negócio e das preferências do usuário. Vamos explorar as opções:

1. Página de login clássica : esta é uma página de login simples. Requer apenas que os usuários insiram suas credenciais e pronto: eles estão dentro.
2. Página de login social : esse tipo de página de login permite que seus usuários usem suas contas de mídia social favoritas para fazer login.
3. Página de login com marca personalizada : esse tipo de página de login é personalizada para corresponder à identidade da sua marca. Para fazer isso, você precisa adicionar o logotipo e as cores da sua marca e adicionar mensagens de boas-vindas para incentivar os usuários a fazer login.
4. Página de login em várias etapas : esse tipo de página de login é ideal para quem deseja adicionar uma camada extra de segurança à sua página de login. Ele divide todo o processo em etapas gerenciáveis, como inserir nome de usuário, senha e código de verificação.
5. Página de logon único (SSO) : por último, esse tipo de página de login permite que os usuários usem as mesmas credenciais para vários aplicativos.

Esses também eram alguns tipos de páginas de login. O que você acha, quais são adequados para sua loja WooCommerce? É uma página de login clássica ou social? Bem, a escolha é sua. Apenas lembre-se de torná-lo personalizado e fácil de usar.

Importância de personalizar a página de login do WooCommerce

Uma página de login monótona e genérica pode ser um desestímulo total para seus clientes. Personalizá-lo melhora o visual da página e também agrega valor à sua loja .

Mas exige esforço, e se você está se perguntando por que deve investir seu tempo nisso, aqui estão alguns dos principais motivos pelos quais vale a pena o esforço.

• Áreas exclusivas: Crie seções restritas acessíveis apenas a usuários logados.
• Experiência do usuário aprimorada: melhora a jornada do usuário, eliminando a necessidade de detalhes repetidos para fazer uma compra.
• Acesso simplificado: permite que os usuários façam login e gerenciem suas informações em um só lugar.
• Conversões otimizadas: uma página de login fácil de usar e visualmente atraente ajuda a reduzir as taxas de rejeição e incentiva os clientes a concluir suas compras.
• Maior segurança: adicione recursos como CAPTCHA ou autenticação de dois fatores para proteger os dados do usuário.

Personalizar sua página de login do WooCommerce não é apenas uma atualização estética, mas um aprimoramento importante .

Agora que você conhece os motivos, vamos entrar em ação e ver como criar e personalizar uma página de login usando o código de acesso de login do WooCommerce.

Como criar uma página de login usando o shortcode de login do WooCommerce?

Então tudo começa com o shortcode My Account no WooCommerce. Este código de acesso simples de login do WooCommerce – [woocommerce_my_account] permite que você adicione toda a área Minha conta a qualquer página.

Aqui seus clientes podem fazer login, visualizar pedidos anteriores, atualizar seus dados e gerenciar suas contas.

Portanto, se você deseja que os clientes também possam se registrar nesta página, certifique-se de que o registro esteja habilitado nas configurações do WooCommerce.

• Primeiro, vá para o WordPress admin dashboard . Agora navegue até Pages para criar uma nova página. Se não quiser criar uma nova página, clique em qualquer página existente para editá-la.
• Agora, clique no ícone + para adicionar um novo bloco na página.
• Nas opções, procure Shortcode.
• Uma caixa aparecerá. Aqui você pode copiar e colar o código de acesso de login do WooCommerce: [woocommerce_my_account]

Nota: Este shortcode exibirá um formulário de login junto com o registro do usuário e detalhes da conta.

• Por último, clique no botão Publish ou Update para colocar a página no ar em seu site.

Desta forma, você criou uma página de login; agora siga estas etapas para definir a página como sua página de login padrão:

• Vá para WooCommerce > Settings > Advanced .
• Na My account page , selecione a página acima para a opção Minha conta.

Por último, visite a página de login e certifique-se de que tudo funciona perfeitamente.

Com essas etapas, você criou uma página de login totalmente funcional .

Portanto, se você deseja registro, login e página de conta separados, você precisa personalizar a página usando códigos de acesso de login do WooCommerce.

Personalizando a página de login do WooCommerce

1. Página de registro: adicione o código de acesso [sa_woocommerce_registration_form] à sua página de registro, depois de ativar o primeiro snippet abaixo. Se os usuários estiverem logados, a mensagem mostrará “Você já está cadastrado”.

/**
 * Código curto para registro de usuário WooCommerce.
 *
 * @author StoreApps
 */
add_shortcode('sa_woocommerce_registration_form', 'storeapps_custom_registration_form');
função storeapps_custom_registration_form() {
	if (is_user_logged_in()) {
		retornar '
 Você já está cadastrado.
 ';
	}
	ob_start();
	do_action('woocommerce_before_customer_login_form');
	$html = wc_get_template_html( 'minhaconta/form-login.php');
	$dom = new DOMDocument();
	$dom->codificação = 'utf-8';
	$dom->loadHTML( utf8_decode( $html ) );
	$xpath = new DOMXPath( $dom );
	$form = $xpath->query( '//form[contains(@class,"register")]' );
	$formulário = $formulário->item( 0 );
	echo $dom->saveHTML( $form );
	retornar ob_get_clean();
}

2. Página de login: para a página de login, use o código de acesso [sa_woocommerce_registration_form] depois de ativar o segundo snippet. Caso o usuário esteja logado, será exibida a mensagem “Você já está logado”.

/**
 * Código abreviado para login de usuário WooCommerce
 *
 * @author StoreApps
 */
add_shortcode('sa_woocommerce_login_form', 'storeapps_custom_login_form');
função storeapps_custom_login_form() {
	if (is_user_logged_in()) {
		retornar '
 Você já está logado.
		

 ';
	}
	ob_start();
	do_action('woocommerce_before_customer_login_form');
	woocommerce_login_form( array( 'redirect' => wc_get_page_permalink( 'minhaconta' ) ) );
	retornar ob_get_clean();
}

3. Página Minha conta: mantenha o código de acesso [woocommerce_my_account] na página Minha conta para exibir todos os detalhes da conta do usuário.
4. Redirecionamento após o cadastro: Você também pode adicionar um redirecionamento após o cadastro para que os clientes sejam direcionados para a página Minha Conta assim que se cadastrarem (o formulário de login já faz isso por padrão).
5. Redirecionar usuários logados: Para evitar erros quando usuários logados acessam as páginas de login ou registro, utilize o snippet abaixo. Isso os redirecionará automaticamente para a página Minha conta.

/**
 * Redirecionar login/registro para minha conta
 *
 * @author StoreApps
 */
add_action('template_redirect', 'storeapps_redirect_to_myaccount_after_logged_in');
função storeapps_redirect_to_myaccount_after_logged_in() {
	if ( is_page() && is_user_logged_in() && ( has_shortcode( get_the_content(), 'sa_woocommerce_login_form' ) || has_shortcode( get_the_content(), 'sa_woocommerce_registration_form' ) ) ) {
		wp_safe_redirect( wc_get_page_permalink( 'minhaconta'));
		saída;
	}
}

Observação: para que isso funcione, você precisará adicionar os snippets à seção PHP personalizada em seu arquivo functions.php e o CSS personalizado no arquivo style.css do seu tema principal.

Melhores plug-ins para aprimorar o login do WooCommerce

Aqui estão alguns dos melhores plug-ins do WooCommerce que podem ajudá-lo a personalizar sua página de login sem se envolver nos códigos de acesso de login do WooCommerce :

Login expresso para WordPress

As páginas de login são ótimas para o seu site, mas que tal torná-las ainda mais inteligentes?

Embora as páginas de login tradicionais sejam úteis, que tal fornecer acesso ainda mais rápido para clientes, clientes ou colaboradores temporários ? É aqui que entra o Express Login para WordPress da StoreApps.

O Express Login para WordPress permite que seus usuários façam login instantaneamente com links seguros e de login automático. Nenhum nome de usuário ou senha é necessário – apenas uma experiência de usuário tranquila!

• Redirecione para qualquer lugar: direcione seus usuários diretamente para a finalização da compra, carrinho ou qualquer página oculta sem esforço.
• Links com expiração automática: defina links de login com datas de expiração para maior segurança.
• Exportação de links em massa: crie e compartilhe facilmente links de login para campanhas de e-mail.
• Plugin fácil de usar: Este plugin é fácil de usar. Tudo que você precisa é instalá-lo, ativá-lo e pronto!

Com o Express Login para WordPress, não deixe seus usuários coçarem a cabeça em busca de nomes de usuário e senhas.

Diga adeus à dificuldade de login e olá à conveniência e segurança.

Experimente o Login Expresso para WordPress agora

Membro Final

Ultimate Member é um plugin poderoso para simplificar o gerenciamento de usuários. Ele permite que você crie formulários personalizados de registro e login, perfis de usuário e acesso baseado em função .

Ele também oferece um construtor de arrastar e soltar que permite criar formulários impressionantes sem esforço.

• Formulários personalizados: crie formulários personalizáveis ​​de login, registro e perfil de usuário.
• Acesso baseado em funções: atribua diferentes funções de usuário com permissões personalizadas.
• Construtor de arrastar e soltar: crie formulários sem esforço.
• Lógica condicional: mostra campos de formulário com base na entrada do usuário.

No geral, é uma ótima opção para construir comunidades envolventes ou sites de membros no WooCommerce.

Cadastro de usuário

Registro de usuário é outro plugin amigável para iniciantes para criar formulários de login e registro personalizáveis. Ele oferece modelos pré-concebidos, lógica condicional e integrações de terceiros para experiências de usuário perfeitas.

• Modelos pré-concebidos: comece rapidamente com designs de formulários prontos.
• Lógica condicional: mostra campos com base nas entradas do usuário.
• Integrações de terceiros: conecte-se perfeitamente com ferramentas de marketing por e-mail e CRMs.
• Formulários de várias etapas: divida formulários longos em várias etapas para melhorar a experiência do usuário.

No geral, este plugin é ideal para proprietários de lojas WooCommerce que desejam formulários personalizáveis ​​​​e escalonáveis .

RegistroMagic

RegistrationMagic é outro plugin que pode ajudá-lo a criar formulários avançados de login e registro. Ele também oferece suporte à integração de pagamentos, atribuição de funções de usuário e análise detalhada de formulários .

• Integração de pagamento: Aceite pagamentos diretamente através de formulários de registro.
• Atribuição de função de usuário: atribua funções automaticamente aos usuários com base nos envios de formulários.
• Análise detalhada: acompanhe o desempenho com insights de dados detalhados.
• Códigos de acesso: incorpore formulários em qualquer lugar do seu site.

No geral, isso é ideal para gerenciar registros de usuários e, ao mesmo tempo, fornecer flexibilidade e controle sobre o design e a funcionalidade do formulário.

Conclusão

Personalizar sua página de login com o código de acesso de login WooCommerce traz vários benefícios, incluindo experiência aprimorada do usuário, melhoria da identidade da marca, segurança aprimorada, etc.

Uma página de login personalizada cria uma jornada perfeita para seus clientes e torna todo o processo mais fácil.

Portanto, quer você use códigos de acesso ou plug-ins de login do WooCommerce, você definitivamente deve tentar personalizar a página de login para melhor funcionalidade e aumentar a satisfação do usuário.

Além disso, se você deseja facilitar o login do WooCommerce para seus clientes, não se esqueça de explorar o Express Login para WordPress hoje.