How to Create WooCommerce Login Popup and Registration for an Online Store?

A seamless buying experience can satisfy your customers, which will increase conversion and drive more sales to your WooCommerce store.

That is why you need to reduce the complexity when users are buying goods from your store. And login/register experience plays a vital role here. You should improve it with a WooCommerce login popup.

What are the different types of WooCommerce login?

There are three types of WooCommerce login you can choose for your store:

1. Public store with guest checkout: Anyone can browse all your products, and there is not protected content. Also, customers can buy products without having to log in or register. This is optional.
2. Public store with mandatory user accounts: Everyone can browse this kind of store. But they have to login/register if they want to purchase something.
3. Customer portal with protected product categories: This type of store has restricted products that can only be seen by logged-in users.
4. 100% private WooCommerce store: Users must log in to access your store.
5. WooCommerece auto-login links: Customers can log in or register more quickly by clicking on a link. No need for usernames and passwords!

No matter what type of WooCommerce login you choose, you should not use the default ways of WooCommerce for users to log in. Instead, use a login popup. The reason for this is explained below.

Why we should consider WooCommerce login popup and registration for your store?

When customers click on the login link, they will be taken to a new page just for logging in. Once a customer logs in successfully, they will be redirected to the previous page they have browsed.

This WooCommerce customer login method is too complicated. Typically, customers want to make a purchase fast. So it would be the best if they can complete their transaction on one page without having to leave it.

Fortunately, you can achieve that good experience by using a WooCommerce login popup.

What is a WooCommerce Login Popup?

WooCommerce login popup and registration allows you to display a WooCommerce register form to your users and does not send them to another different WooCommerce register page.

Using login popups will improve the user experience on your website, which increases conversion rate and results in better sales.

Furthermore, setting up a login popup to your online store is very easy. Follow our article to find out how.

Method 1: How to create WooCommerce Login and Registration Popup with Elementor Pro?

Before getting started, your WooCommerce store needs to use Elementor Pro. Plus, your homepage must have a login/registration button that you have designed with Elementor.

Create a Login and Registration Form Popup

Log in to the WordPress dashboard. Then, go to Templates -> Popups. Now, click on the “Add New” button.

A popup will appear and prompt you to set some values.

1. Choose the Popup template.
2. Give your new popup a name.
3. Click on the “Create Template” button.

Now, the Elementor Library will be shown in front of you. Select a premade popup template that you prefer.

Or if you are looking for a more complicated and unique template, let’s follow our guide to create WooCommerce login popup and registration with Elementor Pro by yourself.

Step 1: Close the library and then you will see a blank popup template like this.

From the left side of the Elementor editor, type “login” widget and drag and drop it in the blank popup above.

Then you will get the form as below. After that, you can start customizing the login form as you desire by clicking on the editing icon.

After that, you can custom your login form such as the margin, padding.

Scroll down to the bottom left, hover the mouse to the wheel icon to move to the settings section.

Then you can edit the layout, position, animation, and style of the WooCommerce login popup as the following customizations..

Besides the main parts of a login popup, you can include a logo, social share if needed.

Now, just click the “Publish” button, and you have done it. Here is the WooCommerce login popup I have created. Let’s move onto the next step.

Integrate the Popup With a Login Button

Whether you select a pre-built Elementor login popup template or create a login form on your own, you need to integrate the popup with a login button. Below are the detailed processes to integrate the login button with each type of WooCommerce login popup you created.

Prebuilt Elementor login popup

If you use a premade login popup of Elementor, this process is quite easy, including 3 steps below:

• Step 1: Type Ctrl + E (or Cmd + E on Mac) to open the Elementor finder. Search for the homepage of your store from here.

• Step 2: When you are on the homepage, select the button widget. Then, go to Link. In the Action field, choose the name of the plugin you just created.

• Step 3: Publish it. After that, review the popup on a live webpage. When you click on the login button, the popup should open.

The WooCommerce login popup you created by yourself

If you create a WooCommerce login popup by yourself, you should navigate to the Client Portal at the top right corner of the screen to start customizing it.

• Step 1: Go to the Button > Link, then click on the Dynamic icon, and in the Actions dropdown options, choose Popup

• Step 2: Click Popup again and select Toggle Popup. So that if a customer clicks on the button, it is open. And if there is no popup, it will be close.

• Step 3: In the Popup field, start typing to search for the Login widget you just created. That’s the way to connect the login popup with the button.

• Step 4: click the Update button to complete the process.

Congratulations! You have successfully created a login and registration popup for your WordPress eCommerce website.

You also should refer to our post on How to Customize WooCommerce My Account Page (without coding).

Method 2: How to create WooCommerce login and registration popup page for your store using a plugin?

Create a WooCommerce Login Popup

Step 1

First, you need to install and activate a WooCommerce login plugin called WooCommerce Login Popup and Shortcodes on your online store. This process is similar to when you install other plugins.

From the WordPress dashboard, hover the mouse over “Plugins“, then click “Add New“. Type the plugin name into the Keyword Search field. Then install and activate it.

Step 2

Once step one is complete, you will see a new link named “Login Popup” in the WooCommerce menu on the Dashboard. Now, click on it to go to the Login Popup’s Setting page.

Here, tick the checkbox beside the “Enable Popup” text. Then, click on the “Select or Upload Image button” to customize the background of the WooCommerce login form.

Select an image or upload a new one. When done, click on the “Use as Background” to confirm your choice and head back to the setting page.

If everything is working correctly, the chosen image will be visible. Remember to click on the “Save changes” button.

Step 3

Copy the CSS code from the plugin section.

Then, go to “Appearance” -> “Menu“. Look at the list on the left side of the window, select the “Custom Links” tab. Type in “#” and “Login” on the URL field and the Link Text field sequentially.

Finally, click on the “Add to Menu” button. You will see that “Login” now appears among the items listed in the Menu Structure.

Step 4

Look at the upper right corner of the window, you will notice a button named “Screen Options“. Click on it and the advanced menu properties will be drop-down. Find the “CSS Classes” in the menu and tick it.

Then, click the “Login” tab located in the Menu Structure section. Paste the CSS code you copied prior into the “CSS Classes” field. When you are happy, click on the “Save Menu” button before you leave.

At the moment, you should be able to find the “Login” link at the front end of your online store.

Check if it pops up or not by clicking on it. The result should look like in the image below.

That’s it! You have created a Create a WooCommerce Login Popup Page. If you want, continue reading our article to find out how to add a register link to the menu.

Add Link to WooCommerce Sign up Page

Step 1

Go back to “Appearance” -> “Menu“. Click on the “Custom Link” tab located at the list on the left side of the window. Type in “#” on the URL field and “Register” on the Link Test field. Then, click on the “Add to Menu” button.

Step 2

In the “Menu Structure” section, you should see the “Register” tab now. Click on it; paste the same code you copied earlier into the CSS field. Then, click on the “Save Menu” button.

Step 3

Go to WooCommerce -> Login Popup. Here, at the “Helpful Guides” section, copy the “register” URL.

Step 4

Head back to the “Appearance” -> “Menu“. Paste the “register” URL into the URL field in the Register tab in the Menu Structure section. Lastly, click the “Save Menu” button.

You should go to the front end of the website to check if it works properly or not. This is the result when a customer registers at your store.

Now, it is time to make WooCommerce Login and Registration Pages that are shareable and accessible anywhere.

Create WooCommerce Login and Registration Pages that are shareable and accessible

Step 1

Go to “WooCommerce” > “Login Popup” again to copy the WooCommerce login form shortcode.

Step 2

Create a new page by going to “Pages” > “Add New“. For the title, you can name it “Login and Register”. After that, paste the WooCommerce register form shortcode into the text field and publish the page.

Once it publishes successfully, the “View Page” button will appear. Click on it to access the WooCommerce Login and Registration Pages.

Now, you can share this WooCommerce login page for customers to login or register whenever you want.

Wrapping up

Although login and registration are not the most important part of an online store, they have a certain effect on the shopping experience of customers on your site. So it is necessary to create a perfect login and registration process in your store. With just a WooCommerce user registration plugin, you can have a beautiful WooCommerce login popup and register for your online store.

If you have any questions about the process, please ask us in the comment section below. We will get back to you soon.