Trick to Create Separate Login and Registration Pages in Woocommerce

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.

 

Comments

33 responses to “Trick to Create Separate Login and Registration Pages in Woocommerce”

  1. jasmeen Avatar
    jasmeen

    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’ );
    }

  2. Ajay Malhotra Avatar
    Ajay Malhotra

    WOW, thank you

  3. Moors Avatar
    Moors

    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!

  4. waqar q Avatar
    waqar q

    My man, you are a life saver. respect!

  5. Ajay Malhotra Avatar
  6. Alicia Guayaquil Avatar
    Alicia Guayaquil

    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

  7. Danielflame Avatar
    Danielflame

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

  8. Ajay Malhotra Avatar

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

  9. Quentin Avatar
    Quentin

    Worked fine on Localhost. Not working on test server.

  10. Ajay Malhotra Avatar

    Did you follow proper jquery also?

  11. CP Gupta Avatar
    CP Gupta

    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
    }

  12. alan chow Avatar
    alan chow

    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

  13. alan chow Avatar
    alan chow

    where do you place this code.

  14. alan chow Avatar
    alan chow

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

  15. alan chow Avatar
    alan chow

    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.

  16. abdulla Avatar
    abdulla

    but where to put his/ her codes

  17. abdulla Avatar
    abdulla

    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

  18. abdulla Avatar
    abdulla

    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 ?

  19. Ajay Malhotra Avatar

    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
    }

  20. abdulla Avatar
    abdulla

    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.

  21. Ajay Malhotra Avatar

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

  22. abdulla Avatar
    abdulla

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

  23. abdulla Avatar
    abdulla

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

  24. Marcin Rembek Avatar
    Marcin Rembek

    Could You show your code

  25. Mansi Avatar
    Mansi

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

  26. Ajay Malhotra Avatar

    Yes you can and it will be good.

  27. Mansi Avatar
    Mansi

    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.

  28. Mansi Avatar
    Mansi

    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?

  29. Aman Avatar
    Aman

    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.