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:
3. Add below shortcode into Login Page:
[woocommerce_my_account]
4. Add below shortcode into Register Page:
[woocommerce_my_account]
5. When, you will open login or register page, you will see both forms on same page line below image:
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:
Here is the firebug view need to show, how did I hide the divs for seperate pages for seperate forms:
If you have any query related to this post, please do comment below or ask question.
Thank you,
Jassa Jatt,
TheRichPost.
Comments
33 responses to “Trick to Create Separate Login and Registration Pages in Woocommerce”
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’ );
}
WOW, thank you
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!
Yes sure Moors
My man, you are a life saver. respect!
Thank you Waqar..
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
Tanks Ajay.but it only works on my localhost but not on my live server
There must be different ids please check it carefully.
Thank you
Worked fine on Localhost. Not working on test server.
Did you follow proper jquery also?
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
}
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
yes
where do you place this code.
i put the code in the footer.php file but it does nothing. still both the login and register is shown.
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.
but where to put his/ her codes
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
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 ?
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
}
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.
Inside theme’s footer.php file.
Share and Support.
Thanks
I have done every thing as you said. but nothings happening ! !! please help sir !
Please check this:
https://www.youtube.com/watch?v=sdkG_UDaMK0
thank you , i just visited the video and i will try it !
Could You show your code
what if i place this code in my functions.php file of child theme?
Yes you can and it will be good.
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.
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?
Email me at therichposts@gmail.com
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.