Create Separate WooCommerce Login and Registration Pages Along With Social Login

Wondering how to create separate login and registration pages in WooCommerce? Are you looking to create a WooCommerce login option for your customers, but confused about the various options that are available out there? Do you want to create custom Login pages, Sign up pages, and Registration pages for your WooCommerce store?

Don’t’ worry, you are in the right place. In this article, I will guide you through the different WooCommerce login options that are available for the customers and also how to set up the WooCommerce login pages using some great WooCommerce login plugins available out there.

So, Let’s dive into it.

WooCommerce Login for Customers

WooCommerce comes with a guest checkout options by which customers can buy your products as a guest user, without having to register and login into your website.

If you want your customers to Register / Login to your WooCommerce store to purchase the products, then you can use the WooCommerce My Account page that contains the  WooCommerce login shortcode such as:

[woocommerce_my_account]

You can use the same shortcode to create new Login and Registration pages or in your WooCommerce header or sidebar.

But the functions of this WooCommerce login shortcode is limited and may not be useful if you want to create a complex login form with specific goals.

If you want to create a separate login and registration pages in WooCommerce without changing any codes, you can make use of WooCommerce login plugins for more features and customization.

Creating Login / Registration Pages with WooCommerce Login Plugin

There are several WooCommerce login plugins available to create a WooCommerce login and Register pages. In this article, we will use one of the best WooCommerce login plugin available called the WooCommerce Login / Signup Lite plugin.

First, we need to activate a simple plugin called WooCommerce Login / Signup Lite plugin.

WooCommerce Login / Signup Lite

WooCommerce Login plugin helps you create a WooCommerce customer login option for your store.

There is a free Woocommerce Login / Signup Lite plugin that is enough to create a simple WooCommerce login form. You can purchase their premium version if you are looking for more options. 

Basically, there are 3 things that are possible using this plugin:

1. You can create a WooCommerce login page.
2. You can create a WooCommerce Register page.
3. You can also create Login/Signup buttons in the menu that will bring the popup for the customer login.

Let’s see how to create all these steps by step.

They have 3 WooCommerce shortcodes such as:

WooCommerce Login Shortcode / WooCommerce Login Form Shortcode:

[lsphe-login-form]

WooCommerce Signup Form Shortcode / WooCommerce Registration Form Shortcode:

 [lsphe-signup-form]

Shortcode for both login and Signup form:

 [lsphe-header]

Create a WooCommerce login page:

1. First, go to pages and click on ‘Add New’.
2. Give a title for the page and apply the shortcode in the content area.
3. To create the login form, use the shortcode:
   

    [lsphe-login-form]
   

4. Then hit the publish button
5. Now, view the page in the front-end and you will see the WooCommerce customer login form displayed for your customers.

Create a WooCommerce Signup (Registration) page:

1. Just follow the above steps and use the shortcode:   
   

   [lsphe-signup-form]

2. Once published, it would have created WooCommerce signup forms for your customers.
3. If you want both the login and signup form together, you can use the shortcode:
   

   [lsphe-header]

Shortcodes are to create a login and sign up page. You can also have buttons on the menu that will create a login/sign up popup.

Create a WooCommerce Login popup:

1. Go to Appearance –> Menus
2. Select the screen options that will be on the top of the screen. In that, enable the ‘CSS classes’ under the Show Advanced Menu properties’ section.
3.  Then select the Custom links that will appear under the Add Menu items and give the URL as “#” and give a name for the menu and click ‘Add to Menu’.
4. After adding the menu, add the CSS class for Popup login:

    phoen-login-popup-open

Create a WooCommerce Signup (Registration) popup:

1. Just follow the above steps and use the CSS class:

   phoen-signup-popup-open

2. If you want to include a popup for both Login and Signup, use the class:
   

   phoen-login-signup-popup-open

I hope you now have a clear idea of how to include a WooCommerce and signup page/button for your WooCommerce users.