Como criar páginas separadas de login e registro no WooCommerce

Publicados: 2021-05-18

Páginas separadas de login e registro no WooCommerce Você está procurando uma maneira de separar programaticamente as páginas de login e registro? Este breve tutorial fornecerá uma solução fácil para você.

Você pode querer enviar clientes desconectados para uma página de login e clientes não registrados para uma página separada. Por padrão, o WooCommerce exibe o formulário de login e o formulário de registro na mesma página.

Vale ressaltar que a página WooCommerce My Account é exibida pelo shortcode [woocommerce_my_account].

Ter os formulários de login e registro na mesma página pode não ser uma boa ideia se você quiser usar páginas de destino ou páginas de vendas com um objetivo específico, como registro de usuário. Isso significa que o formulário de login não é obrigatório nesta página.

Como criar páginas separadas de login e registro no WooCommerce

Neste breve tutorial, mostraremos como separar as páginas de login e registro. Mostraremos como criar dois novos códigos de acesso, um para o formulário de login e outro para o formulário de registro. Esses códigos de acesso podem ser usados ​​em qualquer lugar do seu site.

Vamos ver como você pode conseguir isso.

Etapas para criar páginas separadas de login e registro no WooCommerce

Antes de prosseguir, é importante observar que o conteúdo usado para criar o shortcode é copiado dos arquivos de modelo do WooCommerce. Isso significa que quando o WooCommerce libera qualquer alteração nesses arquivos durante uma atualização, você precisa alterar algumas partes do código.

Continue lendo, pois também mostraremos como usar os códigos de acesso.

Aqui estão os passos que você precisa seguir:

  1. Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
  2. No menu Dashboard, clique em Appearance Menu > Theme Editor Menu . Quando a página Theme Editor for aberta, procure o arquivo de funções do tema onde adicionaremos a função que criará o shortcode da página de registro.
  3. Adicione o seguinte código ao arquivo php :
add_shortcode( 'wc_reg_form_njengah', 'njengah_separate_registration_form' );

function njengah_separate_registration_form() {

if ( is_admin() ) return;

if ( is_user_logged_in() ) return;

ob_start();

// NOTE: THE FOLLOWING <FORM></FORM> IS COPIED FROM woocommerce\templates\myaccount\form-login.php

// IF WOOCOMMERCE RELEASES AN UPDATE TO THAT TEMPLATE, YOU MUST CHANGE THIS ACCORDINGLY

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' ); ?> <span class="required">*</span></label>

<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_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' ); ?> <span class="required">*</span></label>

<input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_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' ); ?> <span class="required">*</span></label>

<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_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-FormRow 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();

}
  1. O segundo código de acesso é o [wc_login_form_bbloomer]. Você deve adicioná-lo a uma nova página. Adicione o seguinte código no mesmo arquivo:
add_shortcode( 'wc_login_form_njengah', 'njengah_separate_login_form' );

function njengah_separate_login_form() {

if ( is_admin() ) return;

if ( is_user_logged_in() ) return;

ob_start();

woocommerce_login_form( array( 'redirect' => 'https://custom.url' ) );

return ob_get_clean();

}

Como usar os códigos de acesso

Conforme mencionado anteriormente, o código de acesso [woocommerce_my_account] exibe a página Minha conta. Se você quiser manter o formulário de login e o painel da página da conta enquanto estiver conectado na mesma página, use o primeiro código de acesso: [woocommerce_my_account] .

Se você deseja ter login + minha conta e uma página de registro separada:

  • [wc_reg_form_njengah] na página de registro
  • [woocommerce_my_account] na página Login + Conta

Se você quiser ter uma página separada de login, registro e minha conta:

  • wc_reg_form_njengah] na página de registro
  • [wc_login_form_njengah] na página de login
  • [woocommerce_my_njengah] na página Minha conta

No entanto, você precisa desabilitar “Permitir que os clientes criem uma conta”, conforme mostrado abaixo: contas

Conclusão

Isso é tudo que você precisa fazer para separar as páginas de login e registro. Lembre-se de copiar e colar o shortcode em uma nova página.

Recomendamos a criação de um tema filho. Isso garantirá que suas alterações não sejam perdidas durante uma atualização.

Esperamos que este post tenha ajudado a resolver seu problema.

Artigos semelhantes

  1. Como acessar o painel de administração do WordPress ou fazer login no seu painel do WordPress