WooCommerce: páginas separadas de login e registro

Publicados: 2019-02-13

Há momentos em que você precisa enviar clientes desconectados para uma página de login e clientes não registrados para uma página de registro distinta.

Como você sabe, a página Minha conta do WooCommerce, que contém o código de acesso [woocommerce_my_account], tem os formulários de login e registro quando o registro está ativado nas configurações de minha conta.

Isso nem sempre é uma boa ideia, principalmente quando você usa páginas de destino ou páginas de vendas com um objetivo específico, por exemplo, registro de usuário.

Claramente, quando isso acontece, você não quer ter um formulário de login lá também. Minha solução fornece dois novos códigos de acesso, um para o formulário de login e outro para o formulário de registro.

Esteja ciente de que o conteúdo do código de acesso da página de registro é copiado dos arquivos de modelo do WooCommerce – se o WooCommerce lançar uma atualização ou fizer uma alteração nesses arquivos, talvez seja necessário atualizar o snippet também.

Dê uma chance, o feedback é muito apreciado

Novos códigos de acesso para exibir os formulários de login e registro do WooCommerce separadamente

O que fazer antes de usar os códigos de acesso abaixo…

Como você sabe, o shortcode [woocommerce_my_account] é muito importante e deve ser mantido na página WooCommerce My Account a todo custo. Isso significa que você não pode se livrar dele ou excluir a página Minha conta.

Então, se você quiser ter uma página LOGIN + MY ACCOUNT e uma página REGISTRATION separada, use esta pilha:

  • [wc_reg_form_bbloomer] na página de registro – SNIPPET #1 ABAIXO
  • [woocommerce_my_account] na página Minha conta
  • adicione um snippet de redirecionamento de registro, para que eles acessem a página Minha conta

Se você quiser ter páginas separadas de LOGIN, REGISTRO e MINHA CONTA, use esta pilha:

  • [wc_reg_form_bbloomer] na página de registro – SNIPPET #1 ABAIXO
  • [wc_login_form_bbloomer] na página de login – SNIPPET #2 ABAIXO
  • [woocommerce_my_account] na página Minha conta
  • adicione um snippet de redirecionamento de registro, para que eles acessem a página Minha conta

Em ambos os casos, você precisa desativar a caixa de seleção “ Permitir que os clientes criem uma conta na página “Minha conta” nas configurações de “ Contas e privacidade ”:

De qualquer forma, você precisa desabilitar os registros na página "Minha conta"

Snippet PHP #1: Separe o código curto do formulário de registro do cliente WooCommerce

Coloque este shortcode [wc_reg_form_bbloomer] em uma nova página do WordPress e o formulário de registro aparecerá magicamente.

/**
 * @snippet       WooCommerce User Registration Shortcode
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
  
add_shortcode( 'wc_reg_form_bbloomer', 'bbloomer_separate_registration_form' );
   
function bbloomer_separate_registration_form() {
	if ( is_admin() ) return;
	if ( is_user_logged_in() ) return;
	ob_start();

	do_action( 'woocommerce_before_customer_login_form' );

   // 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

	?>

		<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();

}

Snippet PHP #2: Separe o código de acesso do formulário de login do WooCommerce

Por favor, leia as notas acima – você pode não precisar deste código de acesso e [woocommerce_my_account] pode ser suficiente para mostrar o formulário de login.

Caso contrário, adicione este código de acesso [wc_login_form_bbloomer] a uma nova página de login.

/**
 * @snippet       WooCommerce User Login Shortcode
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_shortcode( 'wc_login_form_bbloomer', 'bbloomer_separate_login_form' );
 
function bbloomer_separate_login_form() {
	if ( is_admin() ) return;
	if ( is_user_logged_in() ) return; 
	ob_start();
	woocommerce_login_form( array( 'redirect' => '/my-account' ) );
	return ob_get_clean();
}