Here’s a tutorial on how to add WooCommerce Login Pop-up and Registration for Your Store. The WooCommerce Login Popup and Shortcodes plugin makes it possible for you to set up a pop-up page wherein your customers can quickly log-in, register, or even reset password.
One of the reasons why you should add WooCommerce login pop-up and registration for your store is very simple: good user-experience. Customers want to act fast. They want to make a purchase and manage their accounts instantly, so you make all features accessible for them in a snap! You let them complete their transactions almost in one page or without having to leave it.
Redirecting them to another page just to log-in, for example, can sometimes be a waste of time. Thus, a login page that just pops up in a fraction of a second can save time. Customers don’t even have to leave the product page and can instantly carry on shopping after logging in. After all, that is what they came for – to shop!
Here’s the Step-by-Step Guide to Creating a WooCommerce Login Pop-up Page
Step 1
The first step is to add the plugin, WooCommerce Login Popup and Shortcodes. Simply go to your WordPress dashboard, hover over Plugins, then click Add New. Key in the plugin name to the Keyword Search field. Install and activate. Upon activation, you will be able to see the Login Popup on the WooCommerce menu on your Dashboard.
Step 2
The next step is to enable login pop-up and customize background image.
On Login Popup’s Settings page, tick the box opposite Enable Popup, as shown in the image below.
Then, on the same Settings page, opposite Background Image, click the Select or Upload Image button to customize your login popup’s background. After selecting or uploading your preferred login page image, click the Use As Background button, and you will be lead back to the Settings page.
At this point, your chosen image should be visible. Make sure you click the Save button before exiting the page; but before you exit, copy the CSS code from the Enable Popup area. You will need it later.
Step 3
The third step is to add your WooCommerce login pop-up in the Menu Structure. Go to Appearance > Menus; then, click the Custom Links tab found on the Pages list. Type in “#” and “Login” on the URL field and on the Link Text, respectively. Next, click the Add to Menu button, and see that “Login” is now included among the items in the Menu Structure.
Step 4
The final step into creating your WooCommerce Login Pop-up is to add its link at the front end.
Find the advanced menu properties and tick “CSS Classes” by clicking the Screen Option tab from the upper right-hand corner of the Menus page.
Then, click Login found under the Menu Structure. Next, paste the CSS code you copied earlier into the CSS Classes field. Don’t forget to click the Save Menu button before you go to the front end.
At the front end, you should now be able to find the Login link.
Try if it pops up. On that same pop-up page you should be able to find the registration and forgot password links.
But wait, you have not added a registration link to the menu yet, so just like you did in Step 3, go to Appearance > Menus and do the steps below.
Add “Register” Link to the Menu
Step 1
Go to Appearance > Menus; then, click the Custom Links tab found on the Pages list. Type in “#” on the URL field and “Register” on the Link Text. Next, click the Add to Menu button, and see that “Register” is now included among the items in the Menu Structure.
Step 2
Go back to the Menu Structure, and under Register, paste the same code, woo-login-popup-sc-open, which you copied earlier, into the CSS Classes field; then, click the Save Menu button.
Step 3
The next step is to copy the “register” URL (woo-login-popup-sc-register) from the Helpful Guides section which you will find at WooCommerce > Login Pop.
Step 4
Finally, go back to Appearance > Menus to paste the “register” URL into the URL field under the Register section in the Menu Structure. To finish, click the Save Menu button; then, go to the front end to see that you have successfully added the Register link.
The Login and Register links are now in place; it’s time to make the login box shareable and accessible anywhere.
Here are the Steps to Create a Login/Register Page Link You Can Share Anywhere
Step 1
Copy the shortcode from WooCommerce > Login Popup.
Step 2
Add a new page ( Pages > Add New). Use “Login or Register” for the title; then, paste the shortcode into the text field and click the Publish button.
Step 3
Right-click on the permalink to copy the link address. Try to open the page with this link address on a new browser window.
That’s all you need to do in order to add WooCommerce login pop-up and registration for your store. Share what you think about the WooCommerce Login Popup and Shortcodes plugin by leaving a comment below.
20 Responses
Hey can we add it from the WordPress Dashboard plugins add new search and for pop maker then enable it?
Hey Mack, I’m not sure I understood the question. Would you mind explaining what you want to do in a bit more detail?
Now I found the solution ❤️ That’s 💡!
Plugin states that it was last updated 4 years ago and has not been tested with the last 2 major releases of WordPress
Plug-in works nicely and the pop-up looks professional. I want social login (like login wth google, facebook) within the pop-up.Please help me. Thanks in advance.
Hello Guys,
I recently solved that problem of not showing register option in popup. The main thing to do is that you just need to go in Woocommerce Setting > Accounts & Privacy > Tick on “Allow customers to create an account on “my account” page”.
Done!!!!
That’s awesome tutorial but if you can guide how to add fields in registration form manually? The fields are not adding in the registration form using a plugin. I am trying to add it manually using a code that I have seen here in a complete guide [Redacted]. Is there any alternative to do this? It would be really helpful if you could help me to add fields in the registration form.
function Woo_register_fields() {?>
*
<input type="text" class="input-text" name="registration_name" value="” />
<?php
}
add_action( 'woocommerce_register_form_start', 'Wooregister_fields' );
Hey,
one really important point is missing. This plugin will not work and will not allow to register the users on sign-up if woocommerce->settings is disabled.
It is mandatory to enable that setting too. please include this too in this detailed awesome documentation.
How can we use it for logout..?
Plug-in works nicely and the pop-up looks professional. One show stopper though: upon logout it redirects me back to wp login/logout. How can I redirect back to homepage after logout?
Hello, I the register part is not showing for me, it just has a sliver or the pop up but does not show a form to fill in
Can’t see Register in Login popup.
Also, Register popup doesn’t work.
In theory, it’s a nice little plugin.
In Practice, it falls short.
The image covers text in the popup, or just doesn’t appear at all in Firefox.
Looking through the support thread, there are no answers to questions or support requests for quite some time.
There is also no documentation for self diagnosing issues.
I have the same problem as Digesh. cannot get register to popup or register link in login.
Register option is not shown in popup.
I didn’t get the option for register following this tutorial. Login popup shows forgot password link only.
Thanks Mr ♥♥ Now I found the solution
Just a heads-up: I believe the link to the free version in the repo is incorrect. It links to Widget Options instead of WooCommerce Login Popup and Shortcodes.
Hi Rick,
I’m so sorry about the incorrect link. We are on the process of fixing it. Here’s the correct URL: .
Thanks
hello,
is there a way to limit number of bkings / products a vendor can submit
say level 1 free upto 50
level 2 pay $10 / mo
thanks in advance