Home Woocommerce Trick to Create Separate Login and Registration Pages in Woocommerce

Trick to Create Separate Login and Registration Pages in Woocommerce

by therichpost
Published: Last Updated on 33 comments
woocommerce
Woocommerce Login and Registration Pages

Hello to all, welcome to therichpost.com. In this post, I will do Trick to Create Separate Login and Registration Pages in WooCommerce.

This post seems very interesting to me. Today I had problem that, I had to shown woocommerce login and registration forms on separate pages but nobody helped me and after sometime one logic came into my mind and that trick solved my problem and made me and my client happy.

First, I will show you some screenshots of Woocommerce Login and Registration Pages.

 

1. Very first, you need to install woocommerce plugin into your wordpress site.

https://wordpress.org/plugins/woocommerce/

2. After it, create Login and Register pages into your wordpress wp-admin pages section:

woocommerce_login_register_pages

 

3.  Add below shortcode into Login Page:

[woocommerce_my_account]

login_page

 

4.  Add below shortcode into Register Page:

[woocommerce_my_account]

register_page

 

5. When,  you will open login or register page, you will see both forms on same page line below image:

 

login_register_same_page

 

6. Here is the trick to show both forms on separate pages with below jquery code:

You can add this code into header.php or footer.php wordpress theme’s template files:

// Login & Register Pages Urls
// http://localhost/wordpress49/login/
// http://localhost/wordpress49/register/

//Jquery code. I got both urls and split them and get page names and with pages, I shown require form for require page.
<script>
jQuery(document).ready(function($){

var url = window.location.href;
url = url.split("/");
url = url[url.length-2];
if(url == "login") // You can set url[] according to slash parameter wise
{
$("#customer_login .u-column2").remove(); //Remove Registration Div
}
if(url == "register")
{
$("#customer_login .u-column1").remove(); // Remove Login Div
}

})
</script>

 

7. After added above code, you will see both forms on separate pages:

register_form

 

login_form

 

Here is the firebug view need to show, how did I hide the divs for seperate pages for seperate forms:

firebug_view

If you have any query related to this post, please do comment below or ask question.

Thank you,

Jassa Jatt,

TheRichPost.

 

You may also like

33 comments

jasmeen November 4, 2018 - 9:32 am

Also try this:

if( isset(basename($_SERVER[‘REQUEST_URI’])) == ‘register’ ) {
woocommerce_get_template( ‘myaccount/form-register.php’ );
} else {
woocommerce_get_template( ‘myaccount/form-login-single.php’ );
}

Reply
Ajay Malhotra November 4, 2018 - 9:34 am

WOW, thank you

Reply
abdulla December 21, 2020 - 3:51 pm

but where to put his/ her codes

Reply
alan chow September 29, 2020 - 8:20 am

where do you place this code.

Reply
Moors September 5, 2019 - 9:11 am

Excellent post however I was wanting to know if you could write a litte more on this topic? I’d be very grateful if you could elaborate a little bit more. Bless you!

Reply
Ajay Malhotra September 5, 2019 - 3:53 pm

Yes sure Moors

Reply
waqar q September 30, 2019 - 10:48 am

My man, you are a life saver. respect!

Reply
Ajay Malhotra September 30, 2019 - 3:30 pm

Thank you Waqar..

Reply
Alicia Guayaquil October 3, 2019 - 2:36 pm

I’m very beginner and I couldn’t place the script on the header.php I didn’t know here,

Aldo, I would like to know If I can replace the register shortcode using other shortcode, because I’m using WC Multivendor, and I want to show just one Registration form.

Thanks in advance

Reply
Danielflame November 20, 2019 - 11:54 am

Tanks Ajay.but it only works on my localhost but not on my live server

Reply
Ajay Malhotra November 20, 2019 - 5:02 pm

There must be different ids please check it carefully.
Thank you

Reply
Quentin November 29, 2019 - 11:38 am

Worked fine on Localhost. Not working on test server.

Reply
Ajay Malhotra November 29, 2019 - 4:05 pm

Did you follow proper jquery also?

Reply
CP Gupta February 27, 2020 - 3:39 pm

Thanks
It worked

Use :
var url = window.location.pathname;
url = url.split(“/”);
if (url[1] == “login”) // You can set url[] according to slash parameter wise
{
jQuery(“#customer_login .u-column2”).remove(); //Remove Registration Div
}
if (url[1] == “register”) {
jQuery(“#customer_login .u-column1”).remove(); // Remove Login Div
}

Reply
alan chow September 29, 2020 - 8:22 am

i put the code in the footer.php file but it does nothing. still both the login and register is shown.

Reply
alan chow September 29, 2020 - 7:39 am

Hi,

You mention that to add the jquery into the template header.php or footer.php files. This is added to the child theme right, not the actual theme template files right?

Alan

Reply
Ajay Malhotra September 29, 2020 - 7:49 am

yes

Reply
alan chow September 30, 2020 - 3:17 pm

I figured it out now, the number call on the url should be 3, not 4 since not in local environment, less the path of localhost.

Now it is working beautifully. Thanks for the code.

Reply
Marcin Rembek January 14, 2021 - 12:03 pm

Could You show your code

Reply
abdulla December 21, 2020 - 5:45 pm

hello there ,
I add all the things at the perfect place ,but still not working
I add the codes to my header.php file .Actullay where should i past the codes ? below the
get_footer() function or above the function ? I tried both way but not working ! please help my friend

Reply
abdulla December 21, 2020 - 5:49 pm

do i need edit in window.location.href ? or do i need edit anywhere else ? because its not working with my theme ! or does dokan plugin make any problem here(because I installed dokan ) ? what can I do now ?

Reply
Ajay Malhotra December 22, 2020 - 4:31 am

Use :
var url = window.location.pathname;
url = url.split(“/”);
if (url[1] == “login”) // You can set url[] according to slash parameter wise
{
jQuery(“#customer_login .u-column2”).remove(); //Remove Registration Div
}
if (url[1] == “register”) {
jQuery(“#customer_login .u-column1”).remove(); // Remove Login Div
}

Reply
abdulla December 22, 2020 - 9:45 am

Thanks friend for reply !
but where can i add those codes that you give me ? in header .php file ? There is a get_header() function , do i need to add those codes before the function or after the function ?please guide me , because I’m new at php ,woocommerce,wordpress etc.

Reply
Ajay Malhotra December 22, 2020 - 9:47 am

Inside theme’s footer.php file.
Share and Support.
Thanks

Reply
abdulla December 22, 2020 - 3:22 pm

I have done every thing as you said. but nothings happening ! !! please help sir !

Ajay Malhotra December 23, 2020 - 6:22 am
abdulla December 23, 2020 - 6:34 am

thank you , i just visited the video and i will try it !

Mansi February 5, 2021 - 3:59 pm

what if i place this code in my functions.php file of child theme?

Reply
Ajay Malhotra February 5, 2021 - 4:22 pm

Yes you can and it will be good.

Reply
Mansi February 6, 2021 - 7:23 am

I tried but doesn’t work. I did the same steps and pasted the jquery code but I’m getting the categories tab on left of login and registeration form. how do i hide it?
i could not attach a screenshot over here.

Reply
Ajay Malhotra February 6, 2021 - 9:26 am Reply
Mansi February 6, 2021 - 7:30 am

i did the same steps as u mentioned and everything is fine but just got the categories of shop on left side of website…how do i hide it?

Reply
Aman February 14, 2021 - 9:42 am

There is still one issue. The registration part sits on the right. It leaves a vacant space for the login section. Need CSS to shift the registration box on the left.

Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.