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.
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
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.
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.
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…
Pretty cool stuff! Now that you understand the concept, let’s get to the tutorial, shall we?
What You Need to Get Started
To get started, you will need to do the following:
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.
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.
Section Settings
Next, update the section settings with a custom max-width and padding as follows:
Then give the section a border.
Box Shadow
Once the border is in place, add a box shadow to the section for a little depth:
To give the popup a delayed animation, update the animation style as follows:
This will show the popup section 3 seconds after page load with a nice flip animation.
Under the Advanced tab, update the position so that the section remains fixed at the bottom left of the browser window.
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:
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.
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.
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.
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:
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:
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.
Update the row settings as follows:
Then give the row an absolute position with a higher z index as follows:
The Icon
To create the “X” icon to close the popup, add a new blurb module inside the row.
Take out any default Title or Body text from the blurb content. Then click to use the X icon for the blurb.
Under the design tab, update the following:
Under the Advanced tab, add the following custom CSS class to the blurb:
We will need to target this class with our jQuery later.
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.
Then update the row settings as follows:
To add the Title and Body content, add a new text module inside the new row.
Update the content inside the body area with the following HTML:
Under the design tab, update the text styles as follows:
Creating the Promo Code for the Popup
To create the promo code, add a new text module under the previous one.
Update the body area with the text “Code: Perfumeoff”
Under the design tab, update the following:
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.
Then past the button module under the promo code text module.
Update the button text and alignment as follows:
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.
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.
Then paste the following CSS making sure to wrap the code in the necessary style tags.
Under the last style tag containing the CSS snippet, paste the following jQuery making sure to wrap the code with the necessary script tags.
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!
This content was originally published here.