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.
How can I undo this? I’ve removed the code and my registration is not showing anymore :/ …
Have you got the setting “Allow customers to create an account on the “My Account” page ticked?
WooCommerce
>>Account & Privacy
tab.If you use the
[woocommerce_my_account]
shortcode, the login and register will appear on the My Account page.will it work in separate page ? the login form and registration page will work ?
Yes, you can create a login page with the
[wc_login_form_silva]
shortcode, and then a registration page with the[wc_reg_form_silva]
shortcode.i added the codes but i keep only seeing the login form
Did you check the option to: Allow customers to create an account on the “My account” page?
This is in Settings –> Accounts & Privacy
After registration how i can redirect the user in “my-account” page??
Ciao ho inserito il codice nel function.php del mio Child Theme ma quando inserisco lo shortcode in una nuova pagina WordPress non si visualizza nulla. Dove sta il problema?
I want to create a login and registration popup buttom in my header. So, it will be like two tabs, one for sign in and one for sign up. And after one of the action is completed, the user is redirected to my account page.
The easiest way I find to do this is to use the User Registration plugin. Then use Magnific Popup to create the two separate dialogs with the separate shortcodes inside. Hope that helps!
Thanks It is a great to help to me….
Hi, when i use [wc_login_form_silva] in another page, the login error is not display…
Can you help me ?
Thanks
Sorry man, also [wc_reg_form_silva] dont see the confirmation of registration.
Thanks a lot.
Hi Antonio, how do you mean? Are you sure the code is correctly added in the
functions.php
file?Can i only separate My Account Page?
Like Login and Registration have same shortcode and My Account Page different short