How to Create a Woocommerce Login Popup Form (Step by Step)

Do you want a WooCommerce login popup to improve your users’ experience and reduce shopping cart abandonment?

With a WooCommerce popup, you can help users quickly log into their account with your WooCommerce store.

That’s why, today, we’re going to show you how to quickly create a login popup for your online store. For this tutorial, we’ll be using 2 powerful tools:

By combining WPForms with OptinMonster, you’ll be able to create a highly converting login form in a matter of minutes.

But first, let’s look at what a login popup is and why you would want one in the first place.

What Is a WooCommerce Login Popup?

A WooCommerce login popup is a form that requires users to enter a username (or email address) and password to access certain content on your site. Here’s a quick look at the login popup form we’ll be building today:

WooCommerce Login Popup Demo

There are several use cases for a login popup you can use for your WooCommerce store:

  • Making a clickable login button so users aren’t redirected to a new page
  • Allowing public access to your store but only letting members move to checkout
  • Giving members the chance to log into your site as soon as they arrive
  • Creating certain product pages or content that is exclusive to members only
  • Making your entire WooCommerce site only available to members

The first 3 options are by far the most popular. That’s because they offer the best of both worlds for business owners and potential customers.

With a clickable login button in the navigational menu, users can log in at any time without being redirected to a new page. They simply click Login, see your login popup page, and enter their credentials to access their account.

You can also allow anyone to see the products on your site, entice them with special offers, and write copy that makes them want to buy from your store.

But once it’s time to check out, those casual browsers must log in to make their purchase.

Or, you can simply let members log in whenever they reach your site to simplify the checkout process.

With either of these setups, you can reduce shopping cart abandonment by sending reminders to users who have unpurchased items left in their cart. You can also send a follow-up email series after a customer makes a purchase with related product suggestions for future upsells.

Related Content: Are you getting the most revenue from your email campaigns? If not, learn how to master email marketing with this in-depth resource: Email Marketing Made Simple: A Step-by-Step Guide.

The way you use your WooCommerce login popup will totally depend on your needs and marketing strategy. Today, though, we’ll create a login popup specifically to:

  • Allow public access to your store but only let members move to checkout
  • Give members the chance to log into your site as soon as they arrive

Let’s get started.

How to Create a WooCommerce Login Popup

We’ll be using 2 tools today:

  • WPForms: The best form builder on WordPress that creates custom forms with just a drag and a drop. It’s used on over 3,000,000 websites and comes with over 100 form templates to save you time no matter what forms you need to build.
  • OptinMonster: The world’s #1 conversion optimization toolkit that gives you all the tools you need to drastically increase your conversion rates. OptinMonster is the best software to help you drive traffic, boost conversions, and get more sales.

Don't Have These Tools Yet?: Get started with both WPForms and OptinMonster risk-free! Click here to sign up for WPForms and click here to join OptinMonster today!

Step 1: Create a User Login Form with WPForms

First, you need to install and activate the WPForms plugin.

wpforms logo

WPForms is one of the most popular contact form plugins for WordPress. It lets you create any type of WordPress forms, including a WooCommerce login form, WooCommerce registration form, payment form, contact form, and more.

If you’ve never installed a WordPress plugin before or you’re not sure how, no worries.

Just check out this guide on how to install a WordPress plugin.

Next, hover over WPForms in your WordPress dashboard menu, and select Addons from the sub-menu:

Select WPForms then Addons min

Use the search bar on your Addons page to search for and activate the User Registration Addon:

Search for User Registration Addon min

You can also scroll down through your addon options to find it:

User Registration Addon option in WPForms min

Click Install Addon:

Install Addon fro User Registration min

Once installed, your User Registration Addon will automatically be activated. You’ll see the status set to Active in the lower-left corner of the addon box:

Status Active for User Registration Addon min

Go back to the left-hand side menu of your WordPress dashboard and click on WPForms:

WPForms in WP Dashboard min

Create a new form by clicking Add New:

Add new WPForm min

Then choose the pre-built User Login Form template to get started:

User Login Form Template in WPForms min

Click Create a User Login Form:

Create a User Login Form min

The default template will ask for a user’s name or email address and password. In most cases, the default template will be exactly what you need:

User Login Form Template min

But if you need other fields, you can add them from the options on the left-hand side:

Add Fields to Your Login Form min

One way to increase user experience is by adding a button that helps customers who have forgotten their login password or allowing new users to register for an account.

To do that, click on the Password field in your template to bring up the editing options in the left-hand side menu:

Click on the password field to add forgotten password option min

In the Description field, enter the following code:

Your Description field should now look like this:

Enter Code in Description box for WPForms min

You’ll immediately see that your template gives users the option to recover their forgotten password or to register for an account:

Forgot password or new registration

Now we’re almost done with WPForms. We just need to hit SAVE in the upper right-hand corner of your WPForms editor:

Save your WPForm min

And then click EMBED to get the shortcode for our OptinMonster popup:

Click Embed to get the shortcode in WPForms min

Then copy the shortcode that appears in the popup window:

Copy Your Embed code from WPForms min

You’ll need this for later when you create your WooCommerce login popup with OptinMonster.

Step 2: Create Your WooCommerce Login Popup

To create your WooCommerce login popup, log into your OptinMonster account:

OptinMonster Login Page

Don't Have an Account?: Get started with OptinMonster today, risk-free with our 14-day money-back guarantee!

In the upper right-hand corner of your dashboard, click Create New Campaign:

Create a New Campaign OptinMonster

Then choose your campaign type. For our WooCommcer login, we’ll choose Popup:

Choose popup campaign types

Now it’s time to choose your template. Since you’ll be embedding a custom shortcode from WPForms, choose Canvas:

Canvas Template in OptinMonster

This is our blank template that allows you to start from scratch.

Name your campaign and assign it to your WooCommerce store site:

Name and connect your website

And now, your blank template is in the OptinMonster editor, ready to customize. For this popup, delete the image that comes with the Canvas template.

You can do so by locating the trashcan icon associated with the image block:

Find the trash icon associated with the image block min

And do the same to delete the text Drag block and elements to start building your campaign:

Delete Text block from Campaign min

Now you have a totally blank canvas to work from. At the top of your editor, click + Add Blocks:

Click Add Blocks min

Scroll down until you see the HTML block:

HTML Block min

Drag and drop this element block into your editor:

Drag and Drop HTML into place

In the left-hand side menu, you can now insert your shortcode for your User Login Form from WPForms in the HTML field block:

Insert WPForm shortcode into optinmonster min

Keep in mind that your editor will now show this shortcode. It won’t display the form that will appear in your WooCommerce login popup when you activate the campaign.

But when your campaign is live and running on your WooCommerce store, the form will appear as it did in WPForms.

You should note that any time you add or change custom HTML after your campaign has gone live, you need to go the OptinMonster plugin through your WordPress dashboard:

OptinMonster in the WP dasboard

And click Refresh Campaigns:

Refresh Campaigns in you optinmonster plugin

Again, this needs to be done any time you add, edit, or remove a shortcode from an active campaign.

But before you go live, you should keep in mind that you can further customize your login popup by adding a logo, images, custom text, and more.

We won’t get into detail on how to customize your campaign in this tutorial, but if you need help, you can check out this resource on how to create custom designs with OptinMonster campaigns.

One thing we can’t ignore, however, is adding some custom CSS to make sure your login form looks great!

Step 3: Adding CSS to Your Login Form

To make sure that your WooCommerce login form comes out looking like you want it, we’re going to add a little custom CSS to your OptinMonster campaign.

If you’ve never worked with CSS before, don’t worry! What we’re doing today is super easy.

Go to your home menu in your OptinMonster campaign editor, and click on Display Settings:

Display Settings in OptinMonster

Then scroll down to where you see the field box where you can enter custom CSS:

Custom CSS field box for your WooCommerce Login Popup

Enter this code in the field box:

And this will make your login form look much nicer:

WooCommerce Login Popup after CSS with universal font

If you’re experienced with CSS, you can customize this even further. For beginners, though, you can easily change the size and color of the text by updating this portion of the CSS code:

Change font-size and color for CSS code

If you’re just starting out though, the default CSS code we’re using in this tutorial will work for most use cases.

And that’s it!

Once you’ve customized your WooCommerce login popup to look the way you want, you can simply hit Save at the top of your OptinMonster editor:

Click Save for your campaign

If you’re using the OptinMonster plugin, don’t forget to refresh your campaign in your WordPress dashboard like you did earlier:

Refresh Campaigns in you optinmonster plugin

Now we reach the last step: deciding when and where on your site you want users to login.

Step 4: Setting Your Login Popup Display Rules

Today we’re going to use our WooCommerce login popup in 3 ways:

  • Creating a clickable login link for your navigation menu
  • Allowing public access to your store but only letting members move to checkout
  • Giving members the chance to log into your site as soon as they arrive

Let’s briefly look at how to set up each and see their benefits.

Method 1: Creating a Clickable Login Link for Your Navigation Menu

This is the most popular use case for WooCommerce login popups. This is where you allow users to click login in navigation menus or anywhere else on your website with the click of a button.

Then a separate popup appears allowing them to log in without being redirected to a new webpage. It’s excellent for enhancing your users’ experience and simple to set up.

Head over to Display Rules at the top of your editor:

Display Rules OM editor

Change time on page to visitor clicked a MonsterLink™:

Change time on page to MonsterLink

Now you can copy the shareable MonsterLink™ to your clipboard with the click of a button:

MonsterLinks

You now have an embeddable link that can be attached to login button and put into your site’s navigation menu.

Never made a custom header navigational menu? No worries! Check out this helpful resource on how to add a navigation menu in WordPress.

Method 2: Allowing Public Access but Members-Only Checkout

First, go to Display Rules for your login popup campaign. This can be found at the top of your OptinMonster editor:

Display Rules OM editor

Change the first condition from time on page to current URL path:

Select current URL path

In the next field, change is any page to contains:

Change current URL path to contains to restrict sections of your site

Finally, in the field box next to that, enter the word “checkout”:

Add checkout to current url path contains

Then set the following condition to time on page is immediate:

Time on page is immediate

You’re doing this because WooCommerce URLs follow the same pattern. Whenever a shopper wants to check out on a WooCommerce site, the URL will be the following:

www.myonlinestore.com/checkout

The domain name will change depending on the WooCommerce store, but the end of the URL slug will always be “checkout” unless customized. Here’s an example:

WooCommerce Checkout URL

With the display rule you’ve just set for your WooCommerce login popup, customers can immediately log into their account when they reach a checkout page.

The benefit is that if they’ve shopped with you in the past, most of their billing and shipping information will be readily available. You can then streamline the checkout process to reduce shopping cart abandonment.

Method 3: Letting Members Log into Your Store Immediately

You may also want to give members the option to log into your WooCommerce store whenever they reach your site. Doing so is easy. Simply change your first condition to current URL path is any page:

set display rule to current URL path is any page

This will show your login popup to all the traffic that comes to your site and let current members log in or new members sign up.

But you don’t want to annoy your customers by repeatedly showing them the same campaign over and over again. To avoid this, set your next condition to visitor has not seen and campaign:

Visitor has not seen the campaign

And in the next field box, select your WooCommerce login popup campaign (the one you’re currently working on):

Choose visitor has not seen campaign plus your login popup

Now, your users will only see this campaign one time.

Then create a final rule by clicking + AND:

Choose to add a condition with AND

Set your final rule to time on page is immediate:

Click time on page is immediate

The benefit of allowing users to login immediately upon reaching your site is that they can add items to their shopping cart and move to checkout without any interruptions.

Plus, their billing and shipping information will already be available, so everything from cart to checkout moves more quickly.

Now there’s just one more thing to do. Go back to your campaign editor’s homepage and click Display Settings:

Choose display settings

Then change your display settings to on their next visit to the site for users who have both converted and not converted:

Change Display settings to on their next visit to the site

You need to do this so that your login popup will appear each time the same user visits your website. But thanks to the display rules we set earlier, they won’t see the same login popup twice during the same session.

And that’s it! Well… almost. Now you just need to publish your campaign. 😉

You now have a WooCommerce login popup that you can use to enhance your users’ experience and reduce shopping cart abandonment:

WooCommerce Login Popup Demo

Remember, we made a simple WordPress WooCommerce login popup example today. You can customize these campaigns to your brand’s voice and image.

Plus, we only covered 3 use cases. But you can use your WooCommerce login (or signup) popup however you see fit for your site and to help users with an easy login feature.

We hope you enjoyed this article and, if you did, you might also want to check out how to make your popup forms responsive.

You might also be interested in the following posts:

You can also head over to our YouTube channel to get your hands on more tutorials. We’ve got loads of videos that will teach you to drive traffic, boost conversions, and increase sales.

Interested in creating more than just WooCommerce login popups? Join OptinMonster today to see how we can help skyrocket your conversions at every turn of your customers’ journey.

Nathan Thompson
Nathan Thompson is a father, a writer, and a lover of travel (in that order). When he’s not wrestling with his kids, you’ll likely find Nathan giving his eyes a much-needed break from screens with a good book or planning a family trip with his awesome wife.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.