How to Create a WooCommerce Exit-Intent Popup for Your Checkout Page

Do you want to improve the customer’s checkout experience on your website? Adding a popup to your WooCommerce checkout page can immediately boost your sales.

You can easily add an exit-intent popup to your WooCommerce checkout page with OptinMonster in five steps. It will show your offer to a shopper who starts to leave before paying, so you get another chance to reduce cart abandonment.

But these popups only work if they are customized and targeted at the right customers at just the right time. I’ll walk you through everything you need to set up so you can increase your WooCommerce sales.

Why Add an Exit-Intent® Popup to Your WooCommerce Checkout Page?

A WooCommerce checkout page popup is a lightbox that appears on your checkout page when a shopper is about to leave or stops moving through the checkout process. You use it to give them a reason to finish the order.

I’ll show you how to build a popup like this one on your own website:

Checkout page popups work because they respond to the most common reasons people abandon their WooCommerce carts.

In other words, they get to the heart of why your WooCommerce store is losing sales.

More often than not, customers abandon their shopping carts when:

• A product’s cost is too high.
• They aren’t ready to buy.
• Their purchase doesn’t qualify for free shipping.

An exit-intent popup only shows up once a shopper is already leaving your checkout page. So it gives you a last chance to answer one of those reasons.

We run an exit-intent popup on OptinMonster’s checkout page, and we’ve also used a one-time discount code in it. So, I’ll show you firsthand how this can work for your online store.

How to Create a WooCommerce Checkout Page Popup With Exit-Intent®

With OptinMonster, you can add a popup to your WooCommerce checkout page without touching your theme or your checkout template. I’ll show you how to build one that triggers right as a shopper is about to leave.

Plus, it has advanced targeting features just for WooCommerce sites. These targeting rules let you control when and where a popup appears on your website, and who can see it.

Once your store is connected on the Growth plan, those rules can trigger the popup on the product a shopper is viewing, the number of items in their cart, the cart total, or whether the cart contains a given product. I’ll cover the connection in Step 5.

For example, Scott Wyden Imagery used OptinMonster’s targeting features to recover 21% of abandoned carts and grew his email list by 3x:

Step 1: Create Your Campaign

First, you’ll need to log in to your OptinMonster account, and then click Create New Campaign in your dashboard.

Next, choose your campaign type. OptinMonster has six of them, including:

• Lightbox Popups
• Floating Bars
• Inline Campaigns
• Fullscreen Welcome Mats

For this tutorial, I’ll use Popup, because a popup appears over the checkout page your visitor is already looking at.

Next comes the template. OptinMonster has 700+ templates that work on every device, so I recommend narrowing the list first by opening the Industry filter and choosing eCommerce/Retail.

I’ll use Get a Discount Code, which is a Yes/No template that asks the visitor whether they want a code before it asks for an email address.

On the next screen, give your campaign a name and choose the website you want to load it on.

Then, click Start Building, and the campaign builder will open with your template ready to edit.

Step 2: Customize Your WooCommerce Checkout Popup

Your campaign opens in OptinMonster’s drag-and-drop builder with the template already in place.

Simply click any part of the popup to edit it directly in the editor, which covers the header text, the fonts, the background colors, and the buttons.

To use a picture of your own products, you can click the image and change or delete it from the options on the left.

I recommend spending most of your time on the offer itself. Put your discount code into the campaign’s Success view with a Text block, because that’s the view your visitor sees after they sign up.

I’d also add a countdown timer, so the code comes with a deadline. You’ll find the Countdown block in the Blocks panel on the left of the builder, and you just need to drag it onto the popup where you want it:

Our guide on how to create a countdown timer in WordPress has the full setup.

I built one into a floating bar for a Black Friday sale, and I’d make the deadline a real date rather than a timer that resets. A deadline only works if it’s true.

When the design looks right, you can preview the popup on your own website in Step 5. Next, I’ll show you how to set the display rules, so your popup only appears on the checkout page and only when a visitor is about to leave.

Step 3: Set the Display Rules

Today, I’ll show you 2 of OptinMonster’s display rules that are most common with online stores:

• Exit-Intent® Technology, which is available on Pro plans and higher.
• InactivitySensor™, available on Plus plans and higher.

Exit-Intent®

OptinMonster’s Exit-Intent® Technology detects when a visitor’s mouse moves toward the edge of the browser window, which is usually the moment before they close the tab or switch away.

An exit intent popup with a targeted offer can encourage your shopper to complete their purchase.

It helped Shockbyte more than double its sales conversion rate with popups like this:

To apply the Exit-Intent® rule to your popup, go to the Display Rules tab:

The Default Ruleset already has two rules, time on page and current URL path, and you’ll need to change both.

Above the rules, the Conditions step reads If ALL of the following conditions are true at the same time. Leave that toggle on ALL, because the checkout page and the exit both have to be true:

On the current URL path rule, change the operator from is any page to contains, which reveals a Rule Value box:

For instance, if your WooCommerce checkout page contains the slug ‘www.mywebsite.com/jeans/checkout,’ then you’ll need to enter ‘checkout’ as the value in the box.

Keep in mind that the URL Path rule can’t read anything after a ? or a # in a URL. So your order pay and order received pages need the URL parameter rules instead.

Once that’s set, click the time on page rule, open the When (Triggers) category in the rule picker, and choose Exit-Intent®:

Now pick the devices the rule runs on, and set Exit-Intent® Sensitivity to Low, Medium or High. On desktop, that setting is a distance in pixels from the sides of the browser window, from 1 pixel on Low to 150 on High.

I’d leave it on Medium, which is 50 pixels. Low only fires once the shopper has almost gone. High reaches 150 pixels and catches mouse moves that are not exits, like reaching for a browser tab or a password manager, which on a checkout page means discounting a shopper who was already paying.

There is no mouse to follow on a phone. So Mobile Exit-Intent® triggers on a quick scroll up the page, and its sensitivity is a percentage of the screen height.

Your popup will now appear when a shopper tries to leave your WooCommerce checkout page.

Our case study with Storyly reports an 80% higher conversion rate on their Contact Sales form from the same kind of stack – one page, exit intent, desktop only.

For more exit popup tips, see our guide on exit popup hacks.

InactivitySensor™

OptinMonster’s InactivitySensor™ detects the lack of visitor activity and triggers a popup.

This is helpful because many customers start having second thoughts about buying after landing on your checkout page. You can trigger a targeted offer to help those ‘fence-sitters’ finish the checkout.

For your WooCommerce store, you could also offer a special coupon code or live chat help to finish the transaction.

A visitor can’t be inactive and exiting at the same time, so an ALL ruleset with both triggers will never pass. I suggest giving each trigger its own ruleset. Back in the Display Rules tab, click Add a New Ruleset and name it:

The new ruleset opens on the same default rules, so set the current URL path to contains ‘checkout’ again.

Then, click on When from the dropdown and select InactivitySensor™ (Seconds of Inactivity):

The rule starts at 60 seconds of inactivity. I recommend a shorter time on mobile than on desktop, because many phone screens dim on their own after 30 to 60 seconds, so a 60-second rule on a phone can fire after the screen has already gone dark.

So you could split it by device: one ruleset for mobile visitors inactive for at least 10 seconds, and another for desktop visitors at 60 seconds.

Next, I’ll show you how to connect the campaign to your email marketing tool so that you can manage your leads in one place.

Step 4: Integrate With an Email Service Provider

OptinMonster connects to the most popular email marketing services, and the integrations page has the full list. Once you’ve connected yours, OptinMonster adds every email address your checkout popup collects to your list automatically.

In the campaign builder, open the Integrations tab and click Add a New Integration:

Search for your email marketing service or pick it out of the grid, then click Connect.

The exact steps change from one provider to the next. For yours, read our guide on how to connect your email service provider with OptinMonster.

Once you’ve connected Mailchimp, you can also add those subscribers to a specific group from the Integrations view. That keeps your checkout signups separate from the rest of your list, and our guide on lead segmentation best practices covers what to do with them next.

Keep in mind that if you don’t see yours on the list, you can get started with Monster Leads. Monster Leads is OptinMonster’s internal lead storage tool. It lets you store your lead data, export it, and send individual emails from your existing email client.

It doesn’t send any emails on its own, though, so you’ll still be doing that part yourself.

Step 5: Save and Publish Your Campaign

You need to publish your checkout popup.

First, click the Save button at the top right of the campaign builder so you don’t lose your work:

Then open the Publish tab and set Publish Status to Publish:

Both the OptinMonster and WooCommerce plugins need to be active on your website. Here’s a simple guide on how to install a WordPress plugin.

Connecting WooCommerce needs a Growth subscription and a Shop Manager or Administrator role.

In your WordPress dashboard, go to OptinMonster > Settings and click Auto-Generate Keys + Connect WooCommerce:

If the keys don’t generate, add them by hand from WooCommerce > Settings > Advanced > REST API instead.

That connection also adds the WooCommerce cart rules to the builder, like # of Items in WooCommerce Cart and WooCommerce Cart Total.

I suggest opening the campaign’s Output Settings in the plugin next and ticking Checkout Page under Load on WooCommerce Pages.

Output Settings control where your embed code goes, and a display rule only works where that code already is. So, the rule from Step 3 can only work on pages where that box is ticked:

Make sure Conversion Tracking is on too, because that’s what counts each submit-button click as a conversion.

The Live Site Inspector’s Test button in the Publish view is worth clicking too, so you can confirm the popup appears on your checkout page:

For full details, see our guide on how to integrate OptinMonster with WooCommerce.

WooCommerce Exit-Intent® Popup FAQs

Your Checkout Page Popup Is Live

That’s it. Your popup will now appear on your checkout page when a shopper looks like they are about to leave.

I suggest trying it yourself before you promote the offer. Open your own checkout page on a desktop, move your cursor up toward the browser bar, and you should see the popup the way a shopper will.

Get started with OptinMonster on Pro for Exit-Intent®, or Growth if you want the WooCommerce cart rules as well.

You might also find our other eCommerce guides helpful:

• eCommerce Store Optimization Guide
• eCommerce Popup Examples That Actually Convert
• How To Recover Abandoned Carts
• How To Add a Buy Now Pay Later Payment Method in WordPress
• What Is the Difference Between Upsell vs Cross Sell?
• Best WordPress Page Builders