Please note that creating this popup requires our Exit Intent premium feature.
Many of your site’s visitors may add an item to their cart and make it to the checkout page. However, you will find many will close the browser tab before they complete the purchase.
You’re not alone! Almost 69% of customers abandon their shopping carts. You can increase your site’s revenue just by getting more people to complete the purchase they originally wanted.
Use this 6-step guide to create a popup that optionally offers a discount code that gets shown when someone is about to your checkout page.
Step 1: Create Your Discount Code (Optional)
First, log in to your WordPress admin and go to the “Coupon” page in the “WooCommerce” menu.
Now, add a new coupon. You can choose to use your own custom code, such as “BUYNOWSAVE5′ or you can click the “Generate coupon code” button to get a randomized code.
Enter in your description. If you have many coupons, you may want to enter something such as “Popup Maker Cart Abandonment” or similar to make it easier to find.
Depending on your average order revenue is, you may decide to offer a fixed discount, such as $5 USD off the order, or a percentage discount. For our coupon, we will offer a 5% discount if they complete their order now.
You will want to experiment with the amount to see if there is a different value that works better on your site, but 5% or 10% is a good starting place.
For our cart abandonment purposes, we won’t modify any of the other coupon settings.
Your coupon settings may look similar to the screenshot below.
Step 2: Creating Your Content
Let’s create a new popup. To get started, go to the “Add Popup” link in the “Popup Maker” menu. Alternatively, you can click the “Add New Popup” button on the “All Popups” page.
On the new popup page, enter the name for the popup. The name is for internal use only to find the popup in the list of popups. No site visitor will see this name. I’ll use “Cart Abandonment Popup.”
Then, enter the title, which will be the main headline in the popup. You can leave this blank if you do not need a headline. I’ll use “Save 5% If You Buy Now!”
Next, enter the content of the popup. Be sure to add the coupon code so your customers can use it!
Step 3: Adding Triggers and Cookies
Now that we have our content added, it’s time for us to set up our triggers and cookies. The triggers are what causes the popup to open. For this popup, we want to open it when someone is about to leave our site.
By default, the popup will open for the site visitor every time they try to abandon the checkout page. We probably don’t want that. We may only want to show the popup until the site visitor takes some action, such as closes the popup, and then prevent the popup from opening again. To do this, we use cookies.
First, click the “Add New Trigger” button in the “Targeting” section of the popup settings.
In the popup that opens, choose “Exit Intent” as the trigger. Make sure the “Prevent popup from showing to visitor again using a cookie?” option is checked.
For the “Stop showing popup once visitor takes this action:”, we want to choose “On Popup Open.” This will cause the cookie to be set when the popup opens, which ensures the visitor only sees this once regardless of the action they may take.
Then, click the “Add” button.
On the next screen, you will see a setting to adjust the exit intent trigger. There are a variety of techniques that you can use, which you can read over in our exit intent methods documentation.
For this popup, I recommend using “Mouse Leave”, “Lost Browser Focus”, and “Mobile Scroll”. On the “Advanced” tab, you can fine-tune these settings, if needed. For this popup, we will keep the defaults there.
Now that our trigger is set up, we can click the “Add” button.
Our trigger and cookie are now set up!
Step 4: Targeting Your Checkout Page
By default, Popup Maker will open our popup on all pages, posts, products, and everywhere else and to all visitors. To adjust where the popup opens, we use the “Targeting” settings. For this popup, we want to only open on the checkout page.
Switch to the “Targeting” tab of the popup settings. Click on the “Choose a condition” dropdown.
There are many conditions you can choose from, including targeting the home page, only posts, only pages, or specific pages. For this popup, I am going to select the “Checkout Page” option in the “WooCommerce” section.
Alternatively, we could select “Pages: Selected” and entered in our checkout page.
Once selected, new “And” and “Or” options will appear. You can use these to target multiple areas of your website with the same popup. For this popup, I will not use those since I am only targeting visitors on the checkout page.
Step 5: Adjust Display Settings
Now that we have a way for the popup to open (triggers) and we have told the popup what pages to load on (targeting), we can adjust what the popup looks like using the “Display” settings.
Popup Maker provides many granular settings so you can fine-tune your popup. For this popup, we want a simple popup that appears in the middle of the screen.
Now, go to the “Display” settings tab. You will see “Display Presets” first. Along the top will be links for other display settings, including size, animation, and position.
For this popup, I am going to use a large, center popup to make sure they see it. To help us get started, we will click on the “Center Popup” display preset.
Once clicked, a message will appear saying the display settings have been updated.
All that is left is to click the “Appearance” link. This will let us select the “theme” which controls the visual appearance of your popup, including colors, spacing, and fonts. Popup Maker comes with several built-in themes, and you can also create your own themes that match your site.
For this popup, I am going to choose the “Cutting Edge” theme.
Step 6: Publish
Now that we have our popup set up, it’s time to publish and check it out. First, click publish to save your popup.
Next, add a product to your cart and go to the checkout page. Try to exit the page, and you should see the popup appear.
Once the popup opens, our cookie will be set. This may make it difficult to view changes to your popup.
If you edit or change the popup, you can go back to the page you are targeting and use Popup Maker’s admin menu to open the popup.
Your cart abandonment popup is now ready!
