How to Create a Cart Abandonment Popup for WooCommerce (Step-by-Step)

This guide shows how to catch a shopper who is about to leave your store with items still in their cart, and stop them with a cart abandonment popup right before they go.

This setup is built for On Exit Intent (Notifal Pro). The popup appears when the shopper moves to leave the page, not after a timer delay. That is the moment cart recovery works best.

In store tests with this same approach, Notifal recovered at least 4% of visitors who were about to leave with items in their cart. After you go live, check results in Notifal analytics.

If you have not set up live sales notifications yet, see How to Add a WooCommerce Sales Notification first. Then come back here for cart abandonment.

For more strategies and designs, browse Prevent Cart Abandonment on notifal.com.

What you will learn

• How to install Notifal and import a Prevent Cart Abandonment template
• How to customize popup copy with live cart tags ({cart_item_count}, {cart_total})
• How to set display rules so only shoppers with a non-empty cart see the popup
• Optional page targeting: all pages, cart only, or cart and checkout
• Exact Timing and Behavior settings for an exit-intent cart abandonment popup
• How to test the popup, and a bonus idea for returning visitors

Before you start

You will need:

• WordPress with WooCommerce installed and active
• Notifal installed (and Notifal Pro for On Exit Intent)
• A store where visitors can add products to the cart
• A WooCommerce coupon ready if your template includes a discount code (create it under WooCommerce → Coupons)

1. Install Notifal

If Notifal is not installed yet:

1. In WordPress, go to Plugins → Add New.
2. Search for Notifal.
3. Click Install Now, then Activate.

Notifal is free to install from the WordPress plugin directory. Activate Notifal Pro as well if you use exit intent.

2. Find a cart abandonment template

1. Go to Notifal → OnPage Notifications.
2. Open the template library (Add New or Explore Pre-created Notifications).
3. Filter by use case: Prevent Cart Abandonment.

You will see templates built specifically to stop shoppers from abandoning their cart. Pick the design you like.

Browse more: Prevent Cart Abandonment templates.

3. Import the template

1. Click View Details and Import on the template you chose.
2. Click Import HTML Builder (recommended for new marketplace templates) and wait for the success message.
3. Back in OnPage Notifications, find the new notification with Draft status.
4. Click the Edit icon to open the notification editor.

Elementor and Block Editor imports are available on some older designs. For most new templates, use HTML Builder.

More detail: Importing a Template from the Marketplace.

4. Edit the template content

1. Open the Template tab.
2. Click Edit Selected Template.

This is where you write the popup message shoppers will see.

Example copy (video setup)

A strong cart abandonment message uses live cart tags and a clear offer:

Wait! Don't forget your cart!
You have {cart_item_count} items in your cart worth {cart_total}.
You've got 10 minutes to lock in a 10% discount on this cart — after that, this code will no longer be valid!

Many Prevent Cart Abandonment templates already include:

• A short countdown timer (for example 10 minutes)
• A button to copy the discount code
• A button that sends the shopper straight to checkout (use {cart_checkout_url} as the link)

{cart_item_count} and {cart_total} are replaced with the shopper's real cart data when the popup shows. You can confirm this in the template preview.

Match your brand

Click any element in the HTML Builder to change colors, text, spacing, and buttons. If you prefer not to style it yourself, open a ticket at notifal.com/support and the Notifal team can match your brand colors.

When you finish, save the template and return to the notification editor.

More tag ideas: Cart Tags (WooCommerce) and Combining Dynamic Tags: Creative Examples.

5. General settings

In the General tab:

1. Turn on Enable Notification.
2. Add an admin label such as Cart Abandonment Popup so you can find it easily when your list grows.

Leave other general options at their defaults for now.

6. Display rules

Display rules decide who can see this popup. For cart abandonment, the required rule is simple: only show it to shoppers who already have something in their cart.

Required rule: Cart is not empty

1. Go to the Display Rules tab.
2. Click Add Your First Rule.
3. Set Target Type to WooCommerce Cart.
4. Set Cart Condition to Cart is not empty.
5. Click Save Rule.

If the cart is empty, this popup should never appear. That alone is enough for the video setup: the exit-intent popup can fire on any page where the shopper has items in their cart.

Full reference: Cart Display Rules (WooCommerce).

Optional: limit by page

You do not have to add a page rule. Cart not empty + exit intent already works store-wide.

If you want tighter control, add a Pages rule:

Optional Pro targeting

With Pro and Multiple Display Rules with AND/OR, you can also:

• Show only to Guests (keep discounts away from logged-in buyers who were likely to purchase anyway)
• Require a cart total above a threshold (for example greater than 50)
• Combine cart + page + user rules for one precise segment

See User Display Rules (Pro).

7. Content source

Skip this tab for this setup.

The popup in this tutorial uses cart tags ({cart_item_count}, {cart_total}, {cart_checkout_url}). Those read the live cart session. You do not need a product or order content source.

Only configure Content Source if your template also uses product tags like {product_name} or {product_image}. In that case, see Cart-Based Content Source.

8. Appearance

You can leave Appearance at the template defaults. Adjust anything that better matches your store.

One optional upgrade: turn on Audio if you want a short sound the moment the exit-intent popup appears. Use a built-in sound or upload your own. Keep it subtle so it feels helpful, not alarming.

See Display Types: Toast, Popup, Topbar, Floating and Notification Audio.

9. Timing (the key section)

Timing is what makes this a true cart abandonment popup. Set show timing to On Exit Intent, not After Delay.

1. Go to the Timing tab.
2. Apply these settings:

Why these values

• On Exit Intent shows the popup when the shopper moves to leave (mouse toward the tab bar or close control on desktop).
• Manual Close Only keeps the offer on screen until they act or close it on purpose.
• Max Shows Per Session = 1 gives one recovery chance per visit, not a repeating loop.
• Respect User Dismissal means if they close it, it stays closed for that session.
• Pause / Resume on Tab keeps exit-intent tracking accurate when the shopper switches tabs and comes back.
• Prevent Multiple Instances stops this popup from stacking with another copy of itself.

Critical dismiss setting

Turn Dismiss on Click Outside off.

If a shopper accidentally clicks the dimmed backdrop, the popup must not disappear. They should only close it with the close icon (or your CTA).

More detail: When Should the Notification Show?, Frequency and Session Limits, Advanced Timing (Pro), and User Interaction Dismiss Options (Pro).

10. Behavior

In the Behavior tab (including Advanced Behavior):

Tab Badge is especially useful after the popup appears. If the shopper switches tabs to compare prices, the browser tab can signal that something is waiting. See Tab Badge Behavior (Pro).

Adjust copy, colors, and small details to match your brand after these core settings are in place.

11. Save and test

1. Save the notification.
2. On Notifal → OnPage Notifications, turn Status on.
3. Open your store in an incognito / private browser window.
4. Add a product to the cart.
5. Stay on a page where your display rules allow the popup (any page with a non-empty cart if you followed the video default).
6. Move your mouse toward the top of the browser (tab bar / close area) to trigger exit intent.

You should see the cart abandonment popup with live item count, cart total, countdown (if your template includes one), and checkout / copy-code actions.

Also try switching browser tabs. With Tab Badge enabled, the tab title should change and nudge the shopper to come back.

If nothing appears

Check these in order:

• Notification Status is on and Enable Notification is on
• Cart Tags are enabled under Settings
• Cart is not empty in your test session
• Display rules match the page you are on
• Show Timing is On Exit Intent (Pro is active)
• You have not already dismissed the popup in this session (Max Shows Per Session = 1)

Checklist

• [ ] Installed and activated Notifal (and Pro for exit intent)
• [ ] Enabled Cart Tags under Notifal Settings
• [ ] Imported a Prevent Cart Abandonment template
• [ ] Customized copy with {cart_item_count} and {cart_total}
• [ ] Created the WooCommerce coupon if the template shows a discount code
• [ ] Enabled the notification and added an admin label
• [ ] Set display rule: Cart is not empty
• [ ] Optional: limited pages (cart only, or cart + checkout), or left store-wide
• [ ] Skipped Content Source (cart tags only)
• [ ] Set Timing to On Exit Intent, Manual Close Only, Max Shows = 1
• [ ] Turned Dismiss on Click Outside off
• [ ] Turned on Prevent Page Scroll, Maintain State on Refresh, and Tab Badge (Pro)
• [ ] Tested in incognito with items in the cart

Bonus: returning visitors who come back later

The exit-intent popup catches shoppers before they leave. What if they leave anyway and return two days later with items still in the cart?

A strong follow-up is a small Floating Bar (Top Bar) that shows once to shoppers who:

1. Have items in their cart (Cart is not empty)
2. Are a returning visitor (not a first-time visitor)

Message idea: a gentle reminder that they left something in their cart, with a link to {cart_url} or {cart_checkout_url}.

Use Users display rules for return visitors (Pro) and keep frequency to one show. See User Display Rules (Pro) and Display Types.

That returning-visitor bar is a separate notification from the exit-intent popup. Run both together for stronger recovery.

Why this setup works

Shoppers with items in the cart already decided they want something. The only gap is completing checkout. An exit-intent cart abandonment popup meets them at the exact moment they try to leave, with live cart totals and a clear next step.

Notifal tracks clicks and revenue per notification, so you can measure how much this popup recovers. See Understanding Metrics (CTR, Conversions, Revenue).

Need help with your store?

If you want help matching brand colors, offers, or targeting rules, open a support ticket at notifal.com/support. The Notifal team can review your setup.

What to read next

Related documentation

• Prevent Cart Abandonment use cases , strategies and template ideas
• Cart Tags (WooCommerce) , live cart dynamic tags
• Cart Display Rules (WooCommerce) , cart not empty and cart total rules
• When Should the Notification Show? , exit intent and other triggers
• Advanced Timing (Pro) , pause/resume and prevent multiple instances
• Tab Badge Behavior (Pro) , browser tab title nudge
• User Interaction Dismiss Options (Pro) , dismiss on click outside and related controls
• What Is Notifal? (Free vs Pro) , Pro features including exit intent

Watch Me Do It: WooCommerce

1. How to Add a WooCommerce Sales Notification
2. How to Create a Cart Abandonment Popup for WooCommerce (Step-by-Step) (you are here)