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:
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 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:
Use the search bar on your Addons page to search for and activate the User Registration Addon:
You can also scroll down through your addon options to find it:
Click Install Addon:
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:
Go back to the left-hand side menu of your WordPress dashboard and click on WPForms:
Create a new form by clicking Add New:
Then choose the pre-built User Login Form template to get started:
Click Create a User Login Form:
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:
But if you need other fields, you can add them from the options on the left-hand side:
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:
In the Description field, enter the following code:
Your Description field should now look like this:
You’ll immediately see that your template gives users the option to recover their forgotten password or to register for an account:
Now we’re almost done with WPForms. We just need to hit SAVE in the upper right-hand corner of your WPForms editor:
And then click EMBED to get the shortcode for our OptinMonster popup:
Then copy the shortcode that appears in the popup window:
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:
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:
Then choose your campaign type. For our WooCommcer login, we’ll choose Popup:
Now it’s time to choose your template. Since you’ll be embedding a custom shortcode from WPForms, choose Canvas:
This is our blank template that allows you to start from scratch.
Name your campaign and assign it to your WooCommerce store site:
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:
And do the same to delete the text Drag block and elements to start building your campaign:
Now you have a totally blank canvas to work from. At the top of your editor, click + Add Blocks:
Scroll down until you see the HTML block:
Drag and drop this element block into your editor:
In the left-hand side menu, you can now insert your shortcode for your User Login Form from WPForms in the HTML field block:
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:
And click Refresh Campaigns:
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:
Then scroll down to where you see the field box where you can enter custom CSS:
Enter this code in the field box:
And this will make your login form look much nicer:
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:
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:
If you’re using the OptinMonster plugin, don’t forget to refresh your campaign in your WordPress dashboard like you did earlier:
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:
Change time on page to visitor clicked a MonsterLink™:
Now you can copy the shareable MonsterLink™ to your clipboard with the click of a button:
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:
Change the first condition from time on page to current URL path:
In the next field, change is any page to contains:
Finally, in the field box next to that, enter the word “checkout”:
Then set the following condition to 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:
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:
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:
And in the next field box, select your WooCommerce login popup campaign (the one you’re currently working on):
Now, your users will only see this campaign one time.
Then create a final rule by clicking + AND:
Set your final rule to 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:
Then change your display settings to on their next visit to the site for users who have both converted and not converted:
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:
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.
