Create Separate WooCommerce Login and Registration Pages along with Social Login

Are you looking to create a WooCommerce login option for your customers, but confused about the various options that are available out there?

Don’t’ worry, you are in the right place. In this article, I will guide you through the different login options that are available for the WooCommerce customers and also how to set up the WooCommerce login using some great 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 store to purchase the products, then you can use the WooCommerce My Account page that contains the  [woocommerce_my_account] shortcode. You can use the same shortcode to create new Login and Registration pages or in your 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.

In this case you can make use of WooCommerce login plugins for more features and customization.

Using a WooCommerce Login Plugin for Login / Registration Pages

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

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

WooCommerce Login / Signup Lite

WooCommerce Login is a freemium plugin that will help you create a WooCommerce customer login option for your store.

Free version is enough to create a simple login form. You can purchase their premium version if you are looking for more options. 

Basically, there are three 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 step by step.

They have three shortcodes 

  • WooCommerce login form Shortcode: [lsphe-login-form]
  • WooCommerce signup 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]. Then hit the publish button.
  4. Now, view the page in the front-end and you will see the WooCommerce customer login form displayed for your customers.
Create a WooCommerce sign page:
  1. Just follow the above steps and use the shortcode: [lsphe-signup-form].
  2. Once published, it would have created a 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 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.

Besides WooCommerce Login/Signup plugins, there are other interesting plugins that does the job of creating a WooCommerce login quite well. Let’s take a look at some of them

WooCommerce Popup Signup & Login Forms

With this addon for WooCommerce that is available in Envato, you can easily create a Signup & Login link for your WooCommerce users.

Key features:
  • Has two shortcodes to include login and signup links in the custom menu.
  • Has options to custom redirect the users after the signup and login.
  • Responsive

Note that the plugin’s last update is March 2018.

Login/Signup Popup (Inline Form + Woocommerce)

Login/Signup Popup is a simple & lightweight plugin that has more than 9000 active installs in WordPress.org.

Key Features:
  • Create a login, sign up form and also lost password form.
  • Customize all the fields of the form with their extensive styling option.
  • WPML compatible.
  • Regularly updated and actively supported.

WooCommerce Login Popup and Shortcodes

WooCommerce Login popup and shortcodes allow you to create a beautiful login page and also customize it to match your store’s design.

Key Features:
  • Enable login/signup popup anywhere. You can also the shortcode to automatically display the login and registration box anywhere.
  • The modal box content will automatically change to WooCommerce dashboard navigation links if it is an already logged in user.

Note that the plugin has not been updated for the last two years (As of April 2020)

WooCommerce Social Login for Customers

Generally, customers don’t want the hassle of creating new accounts and you may lose customers if you force them to register to make a purchase. So what you can do is you can allow customers to login to your WooCommerce store using their existing Social Media Accounts using the WooCommerce Socal Login plugins.

Why Give Social Login option for Customers?

Do you know that social login plays a crucial role in increasing your conversion rate and improving your sales? Here are some of the stats about the social login that will blow your mind:
  • A survey by Gigya found that 88% of users preferred social login to connect with sites and apps.
  • 77% of users believe social login is a good login solution for any e-commerce site.
  • 56% of users mentioned that they prefer social login just to avoid filling out a registration form.
  • Most users have mentioned that they prefer social login because they hate remembering another username and password.
  • Customers have experienced an average of 10% increase in their conversion rates by using social login.
So basically, most WooCommerce customers prefer social login just for two main reasons:
  • Social logins are more secured.
  • They don’t want to waste time filling up the signup forms.
  • They don’t want to remember many usernames and passwords.
I believe by now, you are convinced about the importance of having a social login on your WooCommerce store.  Let’s see how to add a WooCommerce social login by using a plugin called YITH WooCommerce social login. I will also mention the other plugins available by which you might consider for adding a social login for your store.

YITH WooCommerce Social Login

YITH WooCommerce social login is the most popular social login plugin that allows your customers to login using the social profiles they have. YITH login supports almost 12 social logins for your customers. The best thing about this plugin is that you could also get a report on how much customers have used their social network to access your site and also which social network.
How to create a WooCommerce social login:
  1. Once the plugin is installed and activated, the Login button for Facebook, Twitter and Google will be automatically added in MyAccount page, checkout page and also in the WordPress login.
  2. To enable Facebook Login, go to Premium version settings -> Facebook configuration settings. Enable the Facebook login option and enter the “Facebook App ID” and “Facebook Secret” to allow your users to log in via Facebook. If you have not set this up before, please check this doc on how to get the Facebook App Id and Facebook secret key.
  3. To enable Twitter Login, go to Premium version settings -> Twitter configuration settings -> Enable Twitter Login. Enter the Twitter Key and Twitter secret to enable the twitter option. Please check this article on how to create the Twitter Key and Twitter secret.
  4. In the same way, you can enable all other social logins. You can check their docs on how to enable each social profile.
So by now, you should have a clear idea of how to create a WooCommerce social login using the Yith social login plugin.

Besides YITH WooCommerce social login, there are also other great plugins available to set up a WooCommerce social login.

Other WooCommerce Social Login plugins:

There are WooCommerce Social Login plugins other than YITH WooCommerce Social Login. Some are even free so you can give them a try. They are,

WooCommerce Social Login:

This is an official extension of the WooCommerce itself that allows your WooCommerce customers to log into your site using their social profile accounts instead of creating a new user account credentials. 

Features of WooCommerce Social Login
    • Social accounts could be automatically linked to their user accounts.
    • Enable Social login buttons on the Thank you page to encourage your customers to link their accounts for faster purchases in the future.
    • Integration with Product Review Pro to display the social login buttons in their login forms.

Nextend Social Login

Nextend Social Login is the most popular social login plugin with more than 200,000 active installs in WordPress.org.

Key features:
  • Login via Facebook, Google and Twitter available in the free version. More social profiles available via Pro version.
  • Super easy to set up and use.
  • Display your social profile picture as an avatar.

Super Socializer

Super socializer is an interesting plugin that does not just allow a social login option but also has options for social sharing and social commenting.

Key Features:
  • Enable social login at not just WooCommerce pages but also in WordPress Login, Register pages, and comment forms.
  • Enable visitors to comment using their social profiles.
  • Social Share from around 100 social networks

Hope this article gave you a clear idea on how to create a WoooCommerce customer login and also various plugins that are available. 

Do share your thoughts and questions in the comments section.

Leave a Comment

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