Como personalizar e separar páginas de login e registro no WooCommerce

Se você usa WooCommerce ou não, você já deve estar ciente de que é uma das soluções de comércio eletrônico de código aberto mais populares disponíveis hoje. Como acontece com qualquer software, no entanto, ele tem certas limitações e desvantagens. Neste artigo, vamos abordar um desses… a incapacidade de personalizar totalmente e/ou separar as páginas de login e registro.

Uma das solicitações mais comuns dos usuários do WooCommerce é poder atualizar e personalizar as páginas de login e registro. Idealmente, muitos usuários também gostariam de poder separar essas páginas em vez de tê-las como uma página 'tudo em um'. Neste artigo, veremos como você pode conseguir essas duas coisas... uma página de login/registro totalmente personalizada E separada para o seu site WooCommerce.

Vamos começar!

Usando um plug-in

Talvez sem surpresa, a maneira mais fácil de resolver o dilema de personalização da página de logon/registro é usando um plug-in. Selecionamos alguns dos melhores que você pode considerar usar. Vamos dar uma olhada neles.

Woocommerce Login / Signup Lite

Vá para o menu de administração do WordPress e na área “Plugins -> Adicionar novo”, instale e ative o plugin.

O plugin Woocommerce Login / Signup Lite é um plugin gratuito que também oferece uma versão premium. Para nossas necessidades, no entanto, a versão gratuita deve estar bem. É muito fácil de usar. Uma vez instalado, você poderá criar códigos de acesso que correspondem ao tipo de formulário que você precisa (por exemplo, um formulário de login ou registro). Você pode então colar este código de acesso em qualquer página que desejar. Os códigos de acesso incluem:

• O [lsphe-login-form] para criar um formulário de login.
• O [lsphe-signup-form] para criar um formulário de registro.
• O código de acesso [lsphe-header] para criar um formulário que incluirá os formulários de login e registro.

Você pode ver os Shortcodes disponíveis na área de administração do plugin.

Um outro grande recurso que este plugin oferece é a capacidade de criar uma janela pop-up de login/registro a partir de um item de menu. Isso parece muito legal e oferece mais flexibilidade quando se trata de oferecer opções de login para seus clientes. Para criar um deles, siga estas etapas:

• Clique em Aparência > Menus para entrar na tela de administração do menu.
• Use a seta no canto superior direito para abrir as opções da tela e habilitar as 'classes CSS' em 'Mostrar propriedades do menu avançado'.

• Crie um item de menu de link personalizado e forneça um URL “#”. Nomeie o item como quiser e adicione-o ao menu.
• Assim que aparecer na lista de menus, abra sua seção de acordeão e, na classe CSS, adicione o seguinte: phoen-login-popup-open

Para fazer o mesmo para um pop-up de registro, siga as mesmas etapas e use a phoen-signup-popup-open e para exibir os dois formulários use a phoen-login-signup-popup-open .

Registro do usuário

O plug-in de registro de usuário permite que você crie formulários de front-end usando campos de arrastar e soltar que permitem um design e reordenação fáceis de formulários.

Depois de instalar o plug-in, vá para o 'Registro de usuário', onde você pode começar a criar seu formulário de registro personalizado para sua loja WooCommerce. Você notará que há um formulário pré-criado que possui um código de acesso que você pode copiar e colar em seu site em um local de sua escolha. O formulário ficará mais ou menos assim:

É claro que você pode editar o formulário ou criar um novo com muita facilidade. Basta seguir as instruções dentro do plugin e você estará pronto e funcionando com um formulário de sua escolha em pouco tempo.

Pop-up de login/inscrição

Outro plugin que vale a pena considerar é o Login/Signup Popup (Inline Form + Woocommerce). Em vez de formulários na página, o plug-in (como o nome sugere) ajuda a criar formulários de login pop-up que podem ser acionados a partir de um link ou botão em seu site. Os pop-ups podem ser ótimos e podem ajudar a economizar espaço na página, além de dar às pessoas a oportunidade de fazer login de qualquer ponto do seu site sem serem redirecionadas para uma página específica de login ou registro.

Tal como acontece com todos os plugins listados, você pode personalizar totalmente o design dos formulários. Outros recursos notáveis ​​incluem coisas como logins 'Sociais' que permitem aos usuários fazer login usando seus logins do Google ou Facebook. Isso é feito com um complemento de campo de registro personalizado pago.

Codifique suas próprias páginas de registro e login do WooCommerce

Se você não quiser usar um plug-in para criar suas próprias páginas de login/registro do WooCommerce, por que não codificar o seu próprio! Como sempre, a codificação fornece o máximo em controle sobre recursos, design e função e, portanto, é a opção perfeita se você precisar realizar uma tarefa específica ou quiser evitar o inchaço potencial que vem com um plug-in.

Para começar com este tutorial, primeiro configure um item de menu vinculado à página padrão 'Minha conta' do WooCommerce. Agora, se você visitar este link de menu no front-end do site, verá o formulário de login ou um layout de duas colunas que contém o formulário de registro e o formulário de login. O que dependerá do que você definiu na opção de criação de conta WooCommerce mostrada abaixo.

Usando um cliente SFTP, faça login no seu servidor web para que você possa ver as pastas do seu site. Em /wp-content/plugins/woocommerce/templates/myaccount/ você encontrará o arquivo form-login.php . Abra esse arquivo com seu editor favorito.

O código neste arquivo inclui os formulários de login e registro. Você pode ver o conteúdo deste arquivo na página oficial do git. Lá você notará que existe uma condição if <?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?> que se refere à opção admin na captura de tela acima.

Usando isso, poderemos separar as páginas de login e registro, bem como personalizar os formulários com apenas alguns ajustes.

Personalize o formulário de login

Para começar, certifique-se de que todas as alterações feitas no formulário de login/registro sejam feitas de maneira segura, para que não possam ser revertidas quando ocorrerem atualizações futuras.

Hospede seu site com a Pressidium

GARANTIA DE DEVOLUÇÃO DO DINHEIRO DE 60 DIAS

VEJA NOSSOS PLANOS

Se você já estiver logado através do seu cliente SFTP, vá para wp-content/themes/__my__theme__ . e crie uma pasta 'woocommerce'. Dentro desta pasta, crie uma cópia dos templates do Woocommerce. É importante que você mantenha a estrutura do arquivo, mas remova o subdiretório /templates/. Por exemplo, temos o tema Twenty Twenty instalado e o WooCommerce form-login.php está em plugins/woocommerce/templates/myaccount/ . Isso significa que para substituir o formulário, temos que criar uma hierarquia como esta: /themes/twentytwenty/woocommerce/myaccount/ e dentro dele colocar o arquivo form-login.php .

Vamos testá-lo. Neste ponto, vemos esta saída ao visitar a página Conta no front-end do nosso site:

Agora, se tentarmos alterar alguma coisa no código dentro da duplicata form-login.php , perceberemos que isso afetará o layout conforme o esperado. Vamos tentar uma pequena alteração apenas para verificar se está funcionando. Alteraremos o texto 'Lembrar-me' para 'Lembrar minhas credenciais' e pronto, se atualizarmos a página inicial, veremos que a atualização entrou em vigor.

Login/Registro separado

Aqui estão os passos que você precisa seguir para separar as páginas de login e registro:

Para começar vamos registrar um novo modelo personalizado. Para fazer isso, crie um novo arquivo chamado register.php e coloque-o na pasta templates. Dentro deste arquivo vamos inserir o seguinte código:

 <?php /* * Template name: Registration Form */ ?> <?php if(is_user_logged_in()){ wp_redirect(get_permalink(get_option('woocommerce_myaccount_page_id'))); } ?> <?php get_header();?> <?php do_action( 'woocommerce_before_customer_login_form' ); ?> <div class="custom-registration"> <h2><?php esc_html_e( 'Register', 'woocommerce' ); ?></h2> <form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> > <?php do_action( 'woocommerce_register_form_start' ); ?> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php endif; ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" autocomplete="new-password" /> </p> <?php else : ?> <p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p> <?php endif; ?> <?php do_action( 'woocommerce_register_form' ); ?> <p class="woocommerce-form-row form-row"> <?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?> <button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button> </p> <?php do_action( 'woocommerce_register_form_end' ); ?> </form> </div> <?php do_action( 'woocommerce_after_customer_login_form' ); ?> <?php get_footer();?>

O que fizemos inicialmente neste código é definir o nome do modelo no comentário Nome do Template name: Registration Form . Em seguida, verificamos se o usuário já está logado. O restante do código é essencialmente uma cópia da parte do conteúdo do login-form.php que está relacionado ao formulário de registro envolto em um <div class="custom-registration"> elemento.

Em seguida, adicionamos uma nova página na tela de páginas do wp-admin e a nomeamos como gostamos. Talvez faça sentido chamá-lo de algo como 'Página de Registro'. Em seguida, certifique-se de selecionar o modelo certo (o que acabamos de criar) usando o seletor de modelo na barra lateral direita.

Agora tudo o que temos a fazer é fornecer uma maneira para os usuários acessarem esta página. Você pode criar um item de menu 'Registrar' e vinculá-lo à página de registro que acabou de criar ou pode editar o form-login.php e substituir o código de registro por apenas um link para a página de registro.

Se fizéssemos isso, modificaríamos o arquivo form-login.php em themes/twentytwenty/woocommerce/myaccount/ para que o conteúdo ficasse assim:

 <?php /** * Login Form * * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-login.php. * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @package WooCommerce\Templates * @version 4.1.0 */ if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } do_action( 'woocommerce_before_customer_login_form' ); ?> <h2><?php esc_html_e( 'Login', 'woocommerce' ); ?></h2> <form class="woocommerce-form woocommerce-form-login login" method="post"> <?php do_action( 'woocommerce_login_form_start' ); ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" autocomplete="current-password" /> </p> <?php do_action( 'woocommerce_login_form' ); ?> <p class="form-row"> <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme"> <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span> </label> <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?> <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button> </p> <p class="woocommerce-LostPassword lost_password"> <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a> </p> <?php do_action( 'woocommerce_login_form_end' ); ?> </form> <a href="/?p=202">Sign Up</a> <?php do_action( 'woocommerce_after_customer_login_form' ); ?>

O número 202 é o id da página de registro personalizada. Como um lembrete rápido, você pode ver o ID da página na URL quando ela estiver aberta no editor de back-end.

Agora, se você der uma olhada na página do front-end, deverá ver algo assim quando visitar a página de detalhes da conta:

Se você clicar no link Sign Up, você será redirecionado para a página de registro que criamos como a mostrada abaixo:

Bem fácil não é?

Criando um código de acesso

A página da conta WooCommerce contém o shortcode [woocommerce_my_account] que pode ser usado para gerar os formulários usando o arquivo form-login.php . Nesta seção veremos como podemos criar nossos próprios códigos de acesso, um para o formulário de login e outro para o formulário de registro que criamos acima.

Shortcode de registro do WooCommerce

Abra o arquivo functions.php do seu tema com seu editor e insira as seguintes linhas:

 // REGISTRATION SHORTCODE function wc_registration_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; // OUR REGISTRATION FORM CONTENT } add_shortcode( 'wc_registration_form', 'wc_registration_form_function' );

Ao fazer isso, evitamos a necessidade de usar um modelo personalizado separado. Em vez disso, incluiremos o conteúdo do modelo que criamos anteriormente assim:

 // REGISTRATION SHORTCODE function wc_registration_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; ob_start(); do_action( 'woocommerce_before_customer_login_form' ); ?> <form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> > <?php do_action( 'woocommerce_register_form_start' ); ?> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php endif; ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" autocomplete="new-password" /> </p> <?php else : ?> <p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p> <?php endif; ?> <?php do_action( 'woocommerce_register_form' ); ?> <p class="woocommerce-form-row form-row"> <?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?> <button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button> </p> <?php do_action( 'woocommerce_register_form_end' ); ?> </form> <?php return ob_get_clean(); } add_shortcode( 'wc_registration_form', 'wc_registration_form_function' );

Como você pode ver, nomeamos o Shortcode [wc_registration_form] e envolvemos nosso HTML em uma função ob_start(). Dessa forma, ativamos o buffer de saída para que o HTML seja armazenado e retornado como uma string.

Agora estamos prontos para entrar em nossa área de administração e editar nossa página de registro. Quando você abrir a página de registro, basta inserir o código de acesso [wc_registration_form]. Nesse caso, você pode usar o modelo que desejar, pois não dependemos do próprio modelo para gerar o formulário de registro.

Agora, quando você abrir a página de registro no front-end, deverá ver o formulário de registro.

O uso de códigos de acesso nos fornece mais flexibilidade do que o uso de uma página de modelo, pois podemos alterar o design da página geral rapidamente, sem precisar recodificar o arquivo de modelo. Isso por si só explica por que os códigos de acesso são tão populares no WordPress.

Código de acesso do WooCommerce

Agora temos um shortcode para o formulário de registro, podemos seguir em frente e criar um para o formulário de login. Mais uma vez, abra o arquivo functions.php e insira o seguinte código:

 // LOGIN SHORTCODE function wc_login_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; ob_start(); ?> <form class="woocommerce-form woocommerce-form-login login" method="post"> <?php do_action( 'woocommerce_login_form_start' ); ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" autocomplete="current-password" /> </p> <?php do_action( 'woocommerce_login_form' ); ?> <p class="form-row"> <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme"> <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span> </label> <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?> <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button> </p> <p class="woocommerce-LostPassword lost_password"> <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a> </p> <?php do_action( 'woocommerce_login_form_end' ); ?> </form> <?php return ob_get_clean(); } add_shortcode( 'wc_login_form', 'wc_login_form_function' );

Agora, quanto à página de registro, você pode ir em frente e criar uma página de 'Login', inserir o shortcode [wc_login_form] e pronto.

Se você quiser levar as coisas um passo adiante e ditar a página para a qual os usuários são direcionados quando fizerem logout do seu site, você pode usar um gancho wp_logout como este:

 add_action('wp_logout','my_redirect_after_logout'); function my_redirect_after_logout(){ wp_redirect( '/?p=207' ); exit(); }

O URL /?p=207 usado acima faz referência ao ID da página para a qual desejamos direcionar as pessoas no logout. Substitua isso pelo ID da página de logout escolhida.

Uma Nota Importante!

Vale lembrar que qualquer pessoa pode visitar suas novas páginas de login e/ou registro… e por qualquer pessoa queremos dizer bots também! Portanto, é muito importante que você proteja seu site contra registros falsos e logins de força bruta. Para obter mais informações sobre como proteger seu site, recomendamos que você reserve um tempo para ler nosso guia sobre Como proteger seu site WordPress e também Como lidar com atividades de spam em seu site WordPress.

Espero que este artigo tenha lhe dado algumas idéias sobre como você pode reimaginar suas páginas de registro e login do WooCommerce e forneceu as ferramentas para fazer alterações onde achar melhor.