How to Retarget Abandoned Carts with a Promo Popup Using Divi’s Condition Options

Retargeting abandoned carts is an effective marketing technique that incentivizes customers to buy the items they abandoned after adding them to their cart on your website. One effective strategy for bringing those customers back to finish the purchase is to offer a discount on the items they intended to buy. The tricky part is to offer those discounts only to users who have abandoned their carts.

Divi’s condition options include display conditions that allow you to show or hide content based on a user’s WooCommerce cart content and page visits. This condition combo makes it possible to retarget those users who have abandoned their carts with a discount or promo popup.

In this tutorial, we are going to show you how to retarget abandoned carts by creating a smart promo popup that shows on a landing page only if the user has items in their cart and has visited the checkout page.

Let’s get started!

Sneak Peek

Here is a quick look at the promo popup we’ll build in this tutorial.

This promo popup will display on the page if the user has added a product to their cart and visited the checkout page.


Download the Retargeting Abandoned Cart Promo Popup Layout for FREE

To lay your hands on the layout from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download the Files

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the section layout to your Divi Library, navigate to the Divi Library.

Click the Import button.

In the portability popup, select the import tab and choose the download file from your computer.

Then click the import button.

divi notification box

Once done, the section layout will be available in the Divi Builder.

Understanding the Concept

Before getting into the nitty-gritty building process of the tutorial, it might help to understand the basic concept of what we are going to build. The idea is to use the Divi Builder to build a promo popup on an existing landing page. Once the promo popup section is built, we want to add the condition options that will display the section when both of the following conditions are met.

  1. The user has contents in their Cart
  2. The user has visited the Checkout page

This can be done using Divi’s built-in condition options when editing the section (or any Divi Element).

Once the condition options are set for that section (or promo popup), we can now retarget users who have abandoned their cart by displaying the popup whenever they have met the conditions. The process would go something like this…

  1. The user visits the landing page without the promo popup displayed
  2. The user adds contents to their Cart (meeting condition #1)
  3. The user visits the Checkout page (meeting condition #2) but for whatever reason, the user doesn’t complete the checkout process and leaves.
  4. Then later the user revisits the landing page that now displays the promo popup which redirects them to the complete the checkout process with a discount.

Pretty cool stuff! Now that you understand the concept, let’s get to the tutorial, shall we?

What You Need to Get Started

expanding corner tabs

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme.
  2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
  3. Choose the option “Build From Scratch”.

After that, you will have a blank canvas to start designing in Divi.

Retargeting Abandoned Carts with a Promo Popup using Divi’s Condition Options

Part 1: Uploading the Premade Landing Page

For this tutorial, we are going to add the promo popup to the landing page of a Divi website. To jumpstart this process, we are going to import the Perfumery Landing Page layout from within the Divi Builder.

To do this, open the settings menu and click the Add From Library icon. Then search and find the Perfumery Layout Pack and click to use the Perfumery Layout Page Layout.

retargeting abandoned carts with a promo popup using divi's condition options

Part 2: Building a Fixed Section as the Promo Popup Container

Once the landing page is loaded. Scroll to the bottom of the page and add a new regular section below the footer section of the page.

retargeting abandoned carts with a promo popup using divi's condition options

Section Settings

Width and Padding

Next, update the section settings with a custom max-width and padding as follows:

  • Max Width: 500px
  • Padding: 10px top, 10px bottom

retargeting abandoned carts with a promo popup using divi's condition options

Border

Then give the section a border.

  • Border Width: 15px
  • Border Color: #f6f4f2

retargeting abandoned carts with a promo popup using divi's condition options

Box Shadow

Once the border is in place, add a box shadow to the section for a little depth:

  • Box Shadow: see screenshot
  • Box Shadow Blur Strength: 38px
  • Shadow Color: rgba(203,146,116,0.6)

retargeting abandoned carts with a promo popup using divi's condition options

Animation

To give the popup a delayed animation, update the animation style as follows:

  • Animation Style: Flip
  • Animation Direction: Left
  • Animation Duration: 3000ms

This will show the popup section 3 seconds after page load with a nice flip animation.

retargeting abandoned carts with a promo popup using divi's condition options

Position

Under the Advanced tab, update the position so that the section remains fixed at the bottom left of the browser window.

  • Position: Fixed
  • Location: Bottom Left

retargeting abandoned carts with a promo popup using divi's condition options

CSS Class

Eventually, we are going to add a clickable “X” icon that will close/hide the popup. We need to add a custom CSS Class to the section in order to target it with jQuery.

Enter the following CSS Class:

  • CSS Class: et-promo-popup

retargeting abandoned carts with a promo popup using divi's condition options

Part 3: Adding Condition Options to Section

Once the section (our popup container) is built, we are ready to add the condition options that will display the section when both of the following conditions are met.

  1. The user has contents in their Cart
  2. The user has visited the Checkout page

Display Condition 1: Cart Contents

First, we are going to add a display condition that will display the section/popup whenever the user has contents in their cart.

To do this, go to the advanced tab under the section settings. Then click the plus icon to add a new condition.

In the dropdown menu, select the Cart Contents condition.

In the Cart Contents settings popup, make sure the option Display Only If User’s Cart is set to “Has Products”.

Then save changes.

NOTE: This condition is specific to Divi sites using WooCommerce.

retargeting abandoned carts with a promo popup using divi's condition options

Display Condition 2: Page Visit

Next, we are going to add a display condition that will display the section/popup whenever the user has visited a specific page, which, in this case, will be the Checkout page on a WooCommerce site.

To do this, go to the advanced tab under the section settings. Then click the plus icon to add a new condition.

In the dropdown menu, select the Page Visit condition.

In the Cart Contents settings popup, make sure the option Display Only If User is set to “Has Visited a Specific Page”. Then select the Checkout page from the list of pages in the popup.

Then save changes.

retargeting abandoned carts with a promo popup using divi's condition options

Display If All Conditions Are True

Since we have multiple conditions in play, we can choose to display the section if any or all conditions are true.

In this case, it makes sense to display the promo popup when all conditions are true (the user has contents in their cart and they have visited the check-out page).

Under Display Conditions, select the following:

  • Display if all conditions are true

retargeting abandoned carts with a promo popup using divi's condition options

At this point, the condition functionality we are looking for is already in place to show the section only when a user has cart contents and has visited the checkout page. Now, all we need to do is fill the section with the content needed to create the promo.

Part 4: Creating the Promo Popup Content

To create the content for the promo popup, we are going to add four modules:

  1. A blurb module with a clickable X icon so users can close the popup
  2. A text module for the title and body text
  3. Another text module for the promo code
  4. And a button module that will redirect to the checkout page so users can complete the purchase.

Creating the “X” Icon to Close the Popup

The Row for the Icon

Before we add the “X” icon blurb, add a new one-column row to the section.

retargeting abandoned carts with a promo popup using divi's condition options

Update the row settings as follows:

  • Gutter Width: 1
  • Width: 100%
  • Padding: 0px top, 0px bottom

retargeting abandoned carts with a promo popup using divi's condition options

Then give the row an absolute position with a higher z index as follows:

  • Position: Absolute
  • Z Index: 12

retargeting abandoned carts with a promo popup using divi's condition options

The Icon

To create the “X” icon to close the popup, add a new blurb module inside the row.

retargeting abandoned carts with a promo popup using divi's condition options

Take out any default Title or Body text from the blurb content. Then click to use the X icon for the blurb.

retargeting abandoned carts with a promo popup using divi's condition options

Under the design tab, update the following:

  • Icon Color: #ddd
  • Icon Font Size: 40px

retargeting abandoned carts with a promo popup using divi's condition options

  • Width: 40px
  • Module Alignment: right
  • Height: 40px

retargeting abandoned carts with a promo popup using divi's condition options

Under the Advanced tab, add the following custom CSS class to the blurb:

  • CSS Class: et-close-popup-icon

We will need to target this class with our jQuery later.

retargeting abandoned carts with a promo popup using divi's condition options

Creating the Title and Body Text for the Popup

The other modules we are going to add will need a separate row. Add a new one-column row under the previous row containing the blurb icon.

retargeting abandoned carts with a promo popup using divi's condition options

Then update the row settings as follows:

  • Gutter Width: 1
  • Width: 100%
  • Padding: 0px top, 20px bottom, 40px left, 40px right

retargeting abandoned carts with a promo popup using divi's condition options

To add the Title and Body content, add a new text module inside the new row.

retargeting abandoned carts with a promo popup using divi's condition options

Update the content inside the body area with the following HTML:

<h2>Get 20% Off!</h2>
Use the following coupon code during checkout to get 20% off your perfume order when you buy today! This offer is only available for a limited time.

retargeting abandoned carts with a promo popup using divi's condition options

Under the design tab, update the text styles as follows:

  • Text Font Weight: Semi Bold
  • Text Text Size: 18px
  • Text Line Height: 1.8em
  • Text Alignment: Center
  • Heading 2 Font: Cormorant Garamond
  • Heading 2 Font Weight: Medium
  • heading 2 Text Color: #000
  • Heading 2 Text Size: 54px (desktop), 38px (tablet and phone)

retargeting abandoned carts with a promo popup using divi's condition options

Creating the Promo Code for the Popup

To create the promo code, add a new text module under the previous one.

retargeting abandoned carts with a promo popup using divi's condition options

Update the body area with the text “Code: Perfumeoff”

retargeting abandoned carts with a promo popup using divi's condition options

Under the design tab, update the following:

  • Text Font Weight: Semi Bold
  • Text Text Color: #cb9274
  • Text Text Size: 16px
  • Text Letter Spacing: 2px
  • Text Alignment: Center

retargeting abandoned carts with a promo popup using divi's condition options

  • Margin: 15px top, 15px bottom
  • Padding: 15px top, 15px bottom
  • Border Width: 4px
  • Border Color: #f4e8dc
  • Border Style: Dashed

retargeting abandoned carts with a promo popup using divi's condition options

Creating the Button for the Popup

In order to create the button, copy the button module of one of the existing buttons on the premade layout.

retargeting abandoned carts with a promo popup using divi's condition options

Then past the button module under the promo code text module.

retargeting abandoned carts with a promo popup using divi's condition options

Update the button text and alignment as follows:

  • Button Text: Use Coupon at Checkout
  • Button Alignment: Center

retargeting abandoned carts with a promo popup using divi's condition options

Don’t forget to add a link to the checkout page. To do this, you can use add a dynamic page link as the button link URL to your existing checkout page.

retargeting abandoned carts with a promo popup using divi's condition options

Custom Code to Close the Popup When Clicking the “X” Icon

For our final step, we need to add a quick snippet of CSS and jQuery to close the popup when clicking the “X” icon.

To add the code, add a new code module under the button.

retargeting abandoned carts with a promo popup using divi's condition options

Then paste the following CSS making sure to wrap the code in the necessary style tags.

.et-close-popup-icon:hover { cursor: pointer;
}

retargeting abandoned carts with a promo popup using divi's condition options

Under the last style tag containing the CSS snippet, paste the following jQuery making sure to wrap the code with the necessary script tags.

(function ($) { $(document).ready(function () { $(".et-close-popup-icon").on("click", function() { $(".et-discount-popup").slideUp("slow"); }) });
})(jQuery);

retargeting abandoned carts with a promo popup using divi's condition options

Final Result

Currently, the promo popup will remain hidden until you have successfully met both conditions set with Divi’s condition options on the section. This means you will have to add a product to your cart and then visit the checkout page. After that, go back to the landing page we just built and you will see the promo popup 3 seconds after page load.

Here is what the promo popup looks like when visiting the page after meeting the conditions.

Here is the popup on mobile.

And here is an example of the process a user would go through before seeing the promo that successfully retargets them to finish the checkout process.

Final Thoughts

Divi’s conditional options open the door for tons of opportunities to display content in strategic ways. The promo popup that we built in this tutorial is great for retargeting abandoned carts. But there are so many more ways to fine-tune the conditions to fit your own needs or build a completely new process for retargeting abandoned carts. I’d love to hear your ideas!

I look forward to hearing from you in the comments.

Cheers!

Posted by WordPress Guru