How to Create a Beautiful WooCommerce Login Pop-up for Your Store

Give your store a distinct look from page to page. Not only you should create attractive product pages, but you should also make a beautiful WooCommerce login. Excite customers with elegant login and registration pages.

These will sure add to their pleasant experience in your store. Moreover, create login and registration pages that pop up, so they stay on the page while logging in and can quickly carry on shopping right after. In addition, you can show off your branding when customizing your login and registration pages.

Creating Beautiful Woocommerce Login and Registration Pages

This article will show you exactly how to easily create a beautiful woocommerce login and registration page using the plugin, WooCommerce Login Popup and Shortcodes. This plugin lets you create a pop-up login area. No need for customers to navigate to a new page, thus reducing their wait time to get signed in.

With WooCommerce Login Popup and Shortcodes you can opt for a registration page that pops-up, too. Aside from making your sign-up page eye-candy, you let your customers register more quickly. They sure don’t want to wait too long to go shopping.

Customers prefer quick-and-easy login, and when they forget their passwords, they feel like being punished for taking extra steps to regain access to their accounts. With WooCommerce Login Popup and Shortcodes, you can let them regenerate their own password quickly and easily with the ”forgot password” popup feature.

WooCommerce Login Popup and Shortcodes completes your customers’ shopping experience with a navigation dashboard which shows up when they’re logged in to their accounts.

Step by Step Guide

Create Popup Login Page

Step 1

From your WordPress dashboard, go to “Plugins > Add New”. In the “Add Plugins” page, type “WooCommerce Login Popup and Shortcodes” into the Keyword Search field. Next, click “Install Now”. Finally, click the “Activate” button after the download is complete.

Add New Plugin

Step 2

Go to WooCommerce > Login Popup. Next, on the settings page, enable popup.

Select Background Image

Then, click the “Select or Upload Image” button. Select or upload your login page image, and click the “Use as Background” to exit back to the settings page.

Use as Background

Your chosen image must now be visible. Don’t forget to save changes.

Background Image Selected

Step 3

Copy the CSS code found on the “Enable Popup” area.

Copy Shortcode

After that, go to Appearance > Menus. On the “Pages” list, click “Custom Links”. On the URL field, type in #; then, on the Link Text, type in “Login”. Finally, click the “Add to Menu” button. You will notice that “Login” is added among the items listed in the Menu Structure.

Add to Menu

Step 4

Click the “Screen Options” tab found on the upper-right hand corner of the Menus page to reveal the advanced menu properties; then, tick “CSS Classes”.

CSS Classes

After that, under the Menu Structure, click “Login”; then, paste the code you copied earlier into the “CSS Classes” field. Lastly, click the “Save Menu” button.

Optional CSS Classes

You should be able to find the “Login” link at the front end. Next, click it to see that it pops up.
On the page you will find the registration and forgot password links, but you want to add a registration link to the menu. Go through the steps below.

Add “Register” Link to the Menu

Step 1

Go to “Appearance > Menus”. On the Pages list, click “Custom Links”. On the URL field, type in #; then, on the Link Text, type in “Register”. Click the “Add to Menu” button.

Add Register Link

Step 2

Then, under the Menu Structure, click “Register” and paste the code you copied earlier into the “CSS Classes” field; then, click the “Save Menu” button.

Paste CSS Classes Code

Step 3

Go to WooCommerce > Login Popup. On the Helpful Guides section, copy the register URL.

Helpful Guides

Step 4

Go back to Appearance > Menus. Under the Menu Structure, click “Register” again, but this time, paste the link into the URL field. Click “Save Menu” to finish; then, go to the front end and find that the Register link is added to the menu.

Paste CSS Classes Code

Now that you have both the Login and Register links in place, what you want to do next is to be able to access the login box anywhere you want. Follow these simple steps:

Create a Login/Register Page Link You Can Share Anywhere

Step 1

Click WooCommerce > Login Popup and then copy the shortcode.

Copy the Shortcode

Step 2

Go to Pages > Add New. On the Title field, type in “Login”; then, paste the shortcode into the Text field. Click the “Publish” button.

Paste Shortcode

Once it’s published, the “View page” link appears. Right-click on it to copy link address.

Pull up a new browser window and open the page. Your login page appears complete with “register” and “forgot password” links.

Login Form

When logged in, navigation links will be shown to the user.

Navigation Links

That’s all there is to it.

All you need to do is download WooCommerce Login Popup and Shortcodes from your WordPress admin area or from WordPress.org. You can then start creating a beautiful login and registration popup form for your store.

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