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

    1. Ajay Malhotra Avatar
      Ajay Malhotra

      WOW, thank you

      1. abdulla Avatar
        abdulla

        but where to put his/ her codes

    2. alan chow Avatar
      alan chow

      where do you place this code.

  2. 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!

  3. waqar q Avatar
    waqar q

    My man, you are a life saver. respect!

  4. 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

  5. Danielflame Avatar
    Danielflame

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

    1. Ajay Malhotra Avatar

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

  6. Quentin Avatar
    Quentin

    Worked fine on Localhost. Not working on test server.

    1. Ajay Malhotra Avatar

      Did you follow proper jquery also?

  7. 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
    }

    1. 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.

  8. 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

    1. 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.

      1. Marcin Rembek Avatar
        Marcin Rembek

        Could You show your code

  9. 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

  10. 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 ?

    1. 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
      }

      1. 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.

        1. Ajay Malhotra Avatar

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

          1. abdulla Avatar
            abdulla

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

              1. abdulla Avatar
                abdulla

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

  11. Mansi Avatar
    Mansi

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

    1. Ajay Malhotra Avatar

      Yes you can and it will be good.

      1. 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.

  12. 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?

  13. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

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