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.