With WooCommerce, there are times when you would like to send logged out customers directly to a ‘Login Page’ and unregisters customs to its own ‘Register’ page.
If you’re here, you’re probably already aware that the shortcode [woocommerce_my_account] has both login and registrations combined. But this may not be the way you want this to work. Let’s say for example that we want to create a popup that shows just the registration form for a specific page. Using just the shortcode alone, we are not able to do this as it will also contain the login form. Today, we are going to show you two solutions to overcome this problem, one for just the login form then a separate one for just the registration form.
Before you start…
As you may already know, the [woocommerce_my_account] shortcode is a very important one and must be kept on the WooCommerce My Account page at all costs.
What this means is that if you want to keep the login form and the ‘My Account’ dashboard while logged in on the same page, you can just keep using [woocommerce_my_account] for that, together with example one.
If you want to have ‘Login’ + ‘My Account’, with a separate ‘Registration’ page, then you will need to use both the shortcodes shown below:
[wc_reg_form_silva]on the Register Page[woocommerce_my_account]on the Login / My Account Page
If you want to have a separate Login, Registration and My Account pages then you need the following three shortcodes:
[wc_reg_form_silva]on the Register Page[wc_login_form_silva]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” as shown below:
Step 1. Separate WooCommerce Customer Registration (Shortcode)
Place this shortcode [wc_reg_form_silva] in a brand new ‘Register’ WordPress page and the register form will appear.
/**
* @snippet WooCommerce User Registration Shortcode
*/
add_shortcode( 'wc_reg_form_silva', 'silva_separate_registration_form' );
function silva_separate_registration_form() {
if ( is_admin() ) return;
if ( is_user_logged_in() ) return;
ob_start();
// NOTE: The following <FORM></FORM> is taken from: woocommerce\templates\myaccount\form-login.php
// When you update the WooCommerce plugin, you may need to adjust the below 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();
}
Step 2. Separate WooCommerce Login (Shortcode)
Before implementing this, please check the information above as it might be you don't need this shortcode. [woocommerce_my_account] may be sufficient to show the login form.
Otherwise, please add this shortcode [wc_login_form_silva] to a brand new Login page.
/**
* @snippet WooCommerce User Login Shortcode
*/
add_shortcode( 'wc_login_form_silva', 'silva_separate_login_form' );
function silva_separate_login_form() {
if ( is_admin() ) return;
if ( is_user_logged_in() ) return;
ob_start();
woocommerce_login_form( array( 'redirect' => '#' ) );
return ob_get_clean();
}
Furthermore, if instead, you want to add the shortcode within your page template, you would add this using .
Other than that, this should be everything you need to separate the WooCommere Login and Registration pages. We hope this has helped, should you require any assistance, feel free to drop us an email or leave a comment below.
