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

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

WP Mayor’s work is supported by its audience. If you purchase through a link on our website, we may earn a commission. Here’s why you can trust us.

Table of contents

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.
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.
PeachPay for WooCommece

An all-in-one checkout and payment solution for WooCommerce . See your store's sales increase by 35%!

4 Months FREE with WP Engine

4 months free on all shared managed WordPress and eCommerce hosting plans. Offer ends on 12/01/2022.

Expand your toolset with expertly verified solutions delivered to your inbox every week.
Join thousands of designers, developers, and marketers who trust our experts to find and test the best tools for their WordPress sites.
By signing up to our newsletter, you agree to receive electronic communications from WP Mayor that may include advertisements.
Expand your toolset with expertly verified solutions delivered to your inbox every week.
Join thousands of designers, developers, and marketers who trust our experts to find and test the best tools for their WordPress sites.​
By signing up to our newsletter, you agree to receive electronic communications from WP Mayor that may include advertisements.

23 Responses

  1. Hey can we add it from the WordPress Dashboard plugins add new search and for pop maker then enable it?

    1. Hey Mack, I’m not sure I understood the question. Would you mind explaining what you want to do in a bit more detail?

  2. Plugin states that it was last updated 4 years ago and has not been tested with the last 2 major releases of WordPress

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

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

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

  6. 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' );

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

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

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

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

    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.

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

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

Leave a Reply

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

From web hosting to WooCommerce plugins and backup services, we have put together a collection of exclusive coupons and deals just for you.
WP Mayor_Icon_white
2022 Reader Survey