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

by | Oct 13, 2021 | Etcetera | 0 comments

Retargeting deserted carts is a good advertising method that incentivizes consumers to shop for the pieces they deserted after including them to their cart to your website online. One efficient technique for bringing the ones consumers again to complete the acquisition is to provide a cut price at the pieces they supposed to shop for. The difficult section is to provide the ones reductions best to customers who’ve deserted their carts.

Divi’s situation choices come with show stipulations that help you display or disguise content material in keeping with a consumer’s WooCommerce cart content material and web page visits. This situation combo makes it imaginable to retarget the ones customers who’ve deserted their carts with a cut price or promo popup.

On this educational, we’re going to display you the way to retarget deserted carts by way of growing a sensible promo popup that presentations on a touchdown web page provided that the consumer has pieces of their cart and has visited the checkout web page.

Let’s get began!

Sneak Peek

Here’s a fast have a look at the promo popup we’ll construct on this educational.

This promo popup will show at the web page if the consumer has added a product to their cart and visited the checkout web page.

Obtain the Retargeting Deserted Cart Promo Popup Structure for FREE

To put your palms at the format from this educational, you’re going to first want to obtain it the use of the button under. To achieve get right of entry to to the obtain it is very important subscribe to our Divi Day-to-day e mail checklist by way of the use of the shape under. As a brand new subscriber, you’re going to obtain much more Divi goodness and a unfastened Divi Structure pack each Monday! In the event you’re already at the checklist, merely input your e mail deal with under and click on obtain. You’re going to now not be “resubscribed” or obtain additional emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:earlier than { border-top-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:earlier than { border-top-color: clear !vital; border-left-color: #ffffff !vital; }
@media best display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than { border-top-color: #ffffff !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 sturdy { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !vital;}

Download For Free

Obtain For Loose

Sign up for the Divi Publication and we will be able to e mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus heaps of different wonderful and unfastened Divi assets, guidelines and tips. Apply alongside and you’re going to be a Divi grasp very quickly. In case you are already subscribed merely sort to your e mail deal with under and click on obtain to get right of entry to the format pack.

You could have effectively subscribed. Please test your e mail deal with to verify your subscription and get get right of entry to to unfastened weekly Divi format packs!

To import the segment format on your Divi Library, navigate to the Divi Library.

Click on the Import button.

Within the portability popup, choose the import tab and make a choice the obtain document out of your pc.

Then click on the import button.

divi notification box

As soon as finished, the segment format will probably be to be had within the Divi Builder.

Figuring out the Thought

Sooner than coming into the nitty-gritty construction technique of the educational, it would lend a hand to grasp the fundamental thought of what we’re going to construct. The theory is to make use of the Divi Builder to construct a promo popup on an current touchdown web page. As soon as the promo popup segment is constructed, we wish to upload the situation choices that can show the segment when either one of the next stipulations are met.

  1. The consumer has contents of their Cart
  2. The consumer has visited the Checkout web page
See also  How to Display a Login Form for Non-Logged In Users Only

This can also be finished the use of Divi’s integrated situation choices when modifying the segment (or any Divi Component).

As soon as the situation choices are set for that segment (or promo popup), we will now retarget customers who’ve deserted their cart by way of exhibiting the popup on every occasion they’ve met the stipulations. The method would cross one thing like this…

  1. The consumer visits the touchdown web page with out the promo popup displayed
  2. The consumer provides contents to their Cart (assembly situation #1)
  3. The consumer visits the Checkout web page (assembly situation #2) however for no matter reason why, the consumer doesn’t whole the checkout procedure and leaves.
  4. Then later the consumer revisits the touchdown web page that now presentations the promo popup which redirects them to your entire the checkout procedure with a cut price.

Lovely cool stuff! Now that you know the idea that, let’s get to the educational, we could?

What You Wish to Get Began

expanding corner tabs

To get began, it is very important do the next:

  1. In the event you haven’t but, install and activate the Divi Theme.
  2. Create a brand new web page in WordPress and use the Divi Builder to edit the web page at the entrance finish (visible builder).
  3. Make a choice the choice “Construct From Scratch”.

After that, you’re going to have a clean canvas to begin designing in Divi.

Retargeting Deserted Carts with a Promo Popup the use of Divi’s Situation Choices

Phase 1: Importing the Premade Touchdown Web page

For this educational, we’re going to upload the promo popup to the touchdown web page of a Divi website online. To jumpstart this procedure, we’re going to import the Perfumery Touchdown Web page format from throughout the Divi Builder.

To try this, open the settings menu and click on the Upload From Library icon. Then seek and in finding the Perfumery Structure Pack and click on to make use of the Perfumery Structure Web page Structure.

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

Phase 2: Construction a Fastened Segment because the Promo Popup Container

As soon as the touchdown web page is loaded. Scroll to the ground of the web page and upload a brand new common segment under the footer segment of the web page.

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

Segment Settings

Width and Padding

Subsequent, replace the segment settings with a customized max-width and padding as follows:

  • Max Width: 500px
  • Padding: 10px height, 10px backside

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

Border

Then give the segment a border.

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

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

Field Shadow

As soon as the border is in position, upload a field shadow to the segment for somewhat intensity:

  • Field Shadow: see screenshot
  • Field Shadow Blur Energy: 38px
  • Shadow Colour: rgba(203,146,116,0.6)

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

Animation

To offer the popup a not on time animation, replace the animation taste as follows:

  • Animation Taste: Turn
  • Animation Course: Left
  • Animation Period: 3000ms

This may display the popup segment 3 seconds after web page load with a pleasing turn animation.

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

Place

Underneath the Complex tab, replace the location in order that the segment stays fastened on the backside left of the browser window.

  • Place: Fastened
  • Location: Backside Left

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

CSS Magnificence

Sooner or later, we’re going to upload a clickable “X” icon that can shut/disguise the popup. We want to upload a customized CSS Magnificence to the segment with a view to goal it with jQuery.

Input the next CSS Magnificence:

  • CSS Magnificence: et-promo-popup

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

Phase 3: Including Situation Choices to Segment

As soon as the segment (our popup container) is constructed, we’re in a position so as to add the situation choices that can show the segment when either one of the next stipulations are met.

  1. The consumer has contents of their Cart
  2. The consumer has visited the Checkout web page
See also  Switching Your Logo on a Sticky Header in Divi

Show Situation 1: Cart Contents

First, we’re going to upload a show situation that can show the segment/popup on every occasion the consumer has contents of their cart.

To try this, cross to the complex tab beneath the segment settings. Then click on the plus icon so as to add a brand new situation.

Within the dropdown menu, choose the Cart Contents situation.

Within the Cart Contents settings popup, be certain the choice Show Handiest If Consumer’s Cart is ready to “Has Merchandise”.

Then save adjustments.

NOTE: This situation is restricted to Divi websites the use of WooCommerce.

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

Show Situation 2: Web page Talk over with

Subsequent, we’re going to upload a show situation that can show the segment/popup on every occasion the consumer has visited a particular web page, which, on this case, would be the Checkout web page on a WooCommerce website online.

To try this, cross to the complex tab beneath the segment settings. Then click on the plus icon so as to add a brand new situation.

Within the dropdown menu, choose the Web page Talk over with situation.

Within the Cart Contents settings popup, be certain the choice Show Handiest If Consumer is ready to “Has Visited a Particular Web page”. Then choose the Checkout web page from the checklist of pages within the popup.

Then save adjustments.

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

Show If All Prerequisites Are True

Since now we have a couple of stipulations in play, we will make a choice to show the segment if any or all stipulations are true.

On this case, it is smart to show the promo popup when all stipulations are true (the consumer has contents of their cart and they’ve visited the check-out web page).

Underneath Show Prerequisites, choose the next:

  • Show if all stipulations are true

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

At this level, the situation capability we’re searching for is already in position to turn the segment best when a consumer has cart contents and has visited the checkout web page. Now, all we want to do is fill the segment with the content material had to create the promo.

Phase 4: Developing the Promo Popup Content material

To create the content material for the promo popup, we’re going to upload 4 modules:

  1. A blurb module with a clickable X icon so customers can shut the popup
  2. A textual content module for the name and frame textual content
  3. Every other textual content module for the promo code
  4. And a button module that can redirect to the checkout web page so customers can whole the acquisition.

Developing the “X” Icon to Shut the Popup

The Row for the Icon

Sooner than we upload the “X” icon blurb, upload a brand new one-column row to the segment.

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

Replace the row settings as follows:

  • Gutter Width: 1
  • Width: 100%
  • Padding: 0px height, 0px backside

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

Then give the row an absolute place with a better z index as follows:

  • Place: Absolute
  • Z Index: 12

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

The Icon

To create the “X” icon to near the popup, upload a brand new blurb module within the row.

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

Take out any default Identify or Frame textual content from the blurb content material. Then click on to make use of the X icon for the blurb.

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

Underneath the design tab, replace the next:

  • Icon Colour: #ddd
  • Icon Font Measurement: 40px

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

  • Width: 40px
  • Module Alignment: proper
  • Top: 40px

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

Underneath the Complex tab, upload the next customized CSS magnificence to the blurb:

  • CSS Magnificence: et-close-popup-icon

We can want to goal this magnificence with our jQuery later.

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

Developing the Identify and Frame Textual content for the Popup

The opposite modules we’re going to upload will desire a separate row. Upload a brand new one-column row beneath the former row containing the blurb icon.

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

Then replace the row settings as follows:

  • Gutter Width: 1
  • Width: 100%
  • Padding: 0px height, 20px backside, 40px left, 40px proper

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

So as to add the Identify and Frame content material, upload a brand new textual content module within the new row.

See also  How to Fix the 403 Forbidden Error for WordPress Websites

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

Replace the content material within the frame space with the next HTML:

<h2>Get 20% Off!</h2>
Use the next coupon code all through checkout to get 20% off your fragrance order whilst you purchase nowadays! This be offering is best to be had for a restricted time.

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

Underneath the design tab, replace the textual content types as follows:

  • Textual content Font Weight: Semi Daring
  • Textual content Textual content Measurement: 18px
  • Textual content Line Top: 1.8em
  • Textual content Alignment: Middle
  • Heading 2 Font: Cormorant Garamond
  • Heading 2 Font Weight: Medium
  • heading 2 Textual content Colour: #000
  • Heading 2 Textual content Measurement: 54px (desktop), 38px (pill and call)

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

Developing the Promo Code for the Popup

To create the promo code, upload a brand new textual content module beneath the former one.

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

Replace the frame space with the textual content “Code: Perfumeoff”

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

Underneath the design tab, replace the next:

  • Textual content Font Weight: Semi Daring
  • Textual content Textual content Colour: #cb9274
  • Textual content Textual content Measurement: 16px
  • Textual content Letter Spacing: 2px
  • Textual content Alignment: Middle

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

  • Margin: 15px height, 15px backside
  • Padding: 15px height, 15px backside
  • Border Width: 4px
  • Border Colour: #f4e8dc
  • Border Taste: Dashed

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

Developing the Button for the Popup

With a purpose to create the button, reproduction the button module of probably the most current buttons at the premade format.

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

Then previous the button module beneath the promo code textual content module.

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

Replace the button textual content and alignment as follows:

  • Button Textual content: Use Coupon at Checkout
  • Button Alignment: Middle

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

Don’t disregard so as to add a hyperlink to the checkout web page. To try this, you’ll use upload a dynamic web page hyperlink because the button hyperlink URL on your current checkout web page.

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

Customized Code to Shut the Popup When Clicking the “X” Icon

For our ultimate step, we want to upload a handy guide a rough snippet of CSS and jQuery to near the popup when clicking the “X” icon.

So as to add the code, upload a brand new code module beneath the button.

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

Then paste the next CSS ensuring to wrap the code within the essential taste tags.

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

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

Underneath the remaining taste tag containing the CSS snippet, paste the next jQuery ensuring to wrap the code with the essential script tags.

(serve as ($) {
  $(record).in a position(serve as () {
    $(".et-close-popup-icon").on("click on", serve as() {
      $(".et-promo-popup").slideUp("sluggish");
    })
  });
})(jQuery);

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

Ultimate End result

These days, the promo popup will stay hidden till you’ve effectively met each stipulations set with Divi’s situation choices at the segment. This implies you’ll have to upload a product on your cart after which consult with the checkout web page. After that, return to the touchdown web page we simply constructed and you’re going to see the promo popup 3 seconds after web page load.

Here’s what the promo popup looks as if when visiting the web page after assembly the stipulations.

This is the popup on cellular.

And here’s an instance of the method a consumer would undergo earlier than seeing the promo that effectively retargets them to complete the checkout procedure.

Ultimate Ideas

Divi’s conditional choices open the door for heaps of alternatives to show content material in strategic tactics. The promo popup that we constructed on this educational is excellent for retargeting deserted carts. However there are such a large amount of extra tactics to fine-tune the stipulations to suit your personal wishes or construct a fully new procedure for retargeting deserted carts. I’d love to listen to your concepts!

I sit up for listening to from you within the feedback.

Cheers!

.inline-code{padding: 0px 4px; coloration: pink; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!vital} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);show:block;margin: 0 auto;}

The submit How to Retarget Abandoned Carts with a Promo Popup Using Divi’s Condition Options gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment