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
Table of Contents
Difficulty
Intermediate
Time
35 Minutes
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
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
Make sure to place this code between opening and closing <script> tags.
Code Module > Text
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!
0 Comments