Part 3: Adding Conditional Logic​

With the Last Few Pages complete in our quest to Clone Any Online Store using just Divi and WooCommerce, we are ready to start adding some dynamic sales content using one of Divi’s latest features, Conditional Display Logic. While we will be applying this here to show and hide certain content based on what phase you are in a sale focussed around Black Friday, the knowledge you’ll learn can be used to achieve a number of awesome dynamic features on your Divi site.

Divi has been showering us with tons of new features, it is almost too hard to keep up, but one feature that will really help your site stand out is the new(ish) Conditional Display Logic added in their 4.11 Update. Now, with this installment on How to Clone Any Online Store we start to depart from looking at the Abercrombie & Fitch site and start focussing on extending our site’s features while learning more about some of Divi’s newer capabilities.

We will be creating 3 creative elements targeting a Black Friday sale with the intent of boosting the sales because we don’t want to miss out on potential revenue.

They are:

Creating a Header Promo Bar that will show in the time leading up to the sale

Adding a Sales Banner that will only show during the sale

Displaying an Abandoned Cart Offer to customers that added a product to their cart and visited the checkout page without checking out

Video Tutorial

Snippet 2: Vertically Center Modules in Row Column

Sometimes things just look better when they are vertically centered, and if you look at our inspiration, their header also centers the text and buttons vertically. It is pretty interesting that this is not a native Divi feature as it is just one easy line of CSS code.

Let’s take a look.

Column 1 > Advanced > Custom CSS > Main Element

Snippet 15: Turn cursor into pointer when icon is hovered

Because the icon is not normally something one would interact with, we need to tell the browser to alert the user that this closing “X” icon is clickable. This short CSS snippet does just that!

Make sure to place this code between opening and closing <style> tags.

Code Module > Text

Snippet 16: Javascript to close offer when the icon is clicked

We need to add a little bit of JavaScript skills to tell the browser to close our Abandoned Cart Offer once the user has seen it. This code will “listen” for a click on the “X” icon we added earlier, then close out the offer.

Make sure to place this code between opening and closing <script> tags.

Code Module > Text

Sometimes when you do not add text to an element in a Divi module, it retains some of the spacing or padding, that is what happened here. We left the title field blank, our counter did not align quite right, so we need to hide the container with the code below to make sure things look perfect.

Countdown Time > Advanced > Custom CSS > Title

When your site decides to start spitting some 500 errors…

Conclusion

Folks, we are really getting to the end of our Tutorial Series on How to Clone Any Online Store here. Today we showed you how you can transform any boring site into a dynamic powerhouse that will help you convert more by marketing to your customers at the right moments.

While you can do so much with these features baked right into Divi, you could go even further with important sales tools like Order Bumps, Custom Checkout Fields, and Thank Pages found in BodyCommerce. Never miss out on a sale again!

Definitely head to our Youtube Channel and subscribe to make sure you don’t miss a single thing because this is going to be valuable for you and your design agency!

Catch you folks next week!