There are times when you need to send logged out customers to a Login page and unregistered customers to a distinct Register page.

As you know, the WooCommerce My Account page, which contains the [woocommerce_my_account] shortcode, has both Login and Registration forms. But this is not always a good idea, mostly when you use landing pages or sales pages with a specific goal e.g. user registration.

Clearly, when this happens, you don’t want to have a login form there as well. My solution provides two new shortcodes, one for the login form and one for the register form.

Please be aware both shortcodes’ content is copied from WooCommerce template files – if WooCommerce releases an update or makes a change to these files, you need to change the shortcode coding too.

Give it a go, feedback is much appreciated 🙂

New shortcodes to display WooCommerce Login and Registration forms separately

What to do before using the shortcodes below…

As you know, the [woocommerce_my_account] shortcode is a very important one and must be kept on the WooCommerce My Account page at all costs.

This means, if you want to keep the login form AND the “My Account” dashboard while logged in on the same page, just keep using [woocommerce_my_account] for that, together with Snippet #1.

To recap, if you want to have LOGIN + MY ACCOUNT, and a separate REGISTRATION page, use these 2 shortcodes:

  • [wc_reg_form_bbloomer] on the Register Page
  • [woocommerce_my_account] on the Login / My Account Page

If you want to have separate LOGIN, REGISTRATION and MY ACCOUNT pages then you need 3 shortcodes:

  • [wc_reg_form_bbloomer] on the Register Page
  • [wc_login_form_bbloomer] on the Login Page
  • [woocommerce_my_account ] on the My Account Page

In both cases, you need to disable “Allow customers to create an account on the “My account” page”:

Either way, you need to disable registrations from the “My Account” page

Snippet #1 (PHP): Separate WooCommerce Customer Registration (Shortcode)

Place this shortcode ([wc_reg_form_bbloomer]) in a brand new “Register” WordPress page and the register form will magically appear.

/**
 * @snippet       WooCommerce User Registration Shortcode
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 4.0
 * @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();

	// NOTE: THE FOLLOWING <FORM></FORM> IS COPIED FROM woocommercetemplatesmyaccountform-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();
}

Snippet #2 (PHP): Separate WooCommerce Login (Shortcode)

Please read the notes above – you might not need this shortcode at all and [woocommerce_my_account] may be sufficient to show the login form.

Otherwise, please add this shortcode ([wc_login_form_bbloomer]) to a brand new Login page.

/**
 * @snippet       WooCommerce User Login Shortcode
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 4.0
 * @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' => 'https://custom.url' ) );
	return ob_get_clean();
}
Share:

Leave a Reply