How to Add WooCommerce Login Pop-up and Registration for Your Store

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.

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.

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.

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.

Bernadette Lee
Bernadette Lee
Bernadette is the Content Marketer for PHPBITS Creative Studio — the creator of Widget Options, the plugin for better WordPress widgets management. She is s a food enthusiast and a big fan of American Bluegrass music.

Consider sharing this post so others can find it:

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on telegram
Share on whatsapp
Share on pocket
Share on email

Join thousands of people receiving real-world, genuine evaluations of WordPress products and services just like this one every week.

Our Sponsors
Prevent Direct Access
Contents

19 Responses

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

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

    1. Sometime it depends upon theme as well. make sure that your theme can be customised for pop-up login. You need to go to setting and find option “Allow registration on login page / my account page” ie.

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

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

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

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

  7. 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 https://wpitech.com/add-woocommerce-registration-form-fields/. 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' );

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

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

  10. Sometime it depends upon theme as well. make sure that your theme can be customised for pop-up login. You need to go to setting and find option “Allow registration on login page / my account page” ie.

Leave a Reply

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

The Beginner’s Handbook
From an introduction on how WordPress works to our recommendations on products and services.
👋 Hey there! We're Gaby and Mark
Every week we share tutorials and genuine reviews of WordPress products and services in our newsletter.
Thousands of people read it!
We’d love for you to join.
We’d love for you to join. Here’s what you’ll be getting:

A single weekly email directly to your inbox.