Divi has added various conditional logic options to your website so that you can display content based on whether a specified condition has been met or not.
What this means in simple terms is that “If this happens, then do this”.
For example, you could achieve the following conditional statements;
- If this user is logged in, then show them this text module with content only for registered and logged-in users.
- If it is Black Friday then display a banner linking to the Black Friday Sales page.
- If the user has this WooCommerce product added to their cart, then offer them a 5% discount code.
- If the user is on an Apple device show an advert for the Apple store.
The Divi condition options allow you to display or hide any modules, sections, rows, or columns based on the conditional options you select.
In this article, we’ll look at the new Divi condition options and see what they can do.
How to use the Divi conditional options
Step 1 – In your module, sections, columns, and rows Advanced options tab you will see a section called Conditions. This is where you can add any number of custom conditions that will apply to that element.
Just click on the plus icon to start adding a condition.
Step 2 – Once you have clicked on the plus icon you will see a full list of conditional logic presets that you can choose from. Each will have their own specific rules once you select an option.
The list of all the Display Conditions options available will include;
- User Status – Logged In Status / User Role
- Interaction – Date & Time / Page/Post Visit / Product Purchase / Cart Contents / Number Of Views
- Device – Browser / Operating System / Cookie
- Post Information – Post Type / Post Category/ Post Tag/ Author
- Website Location – Tag Page / Category Page / Date Archive / Search Results / Post Types / Posts/Pages
Create a weekly banner using the conditional options
To show you how these conditions work in a real example I will show you how to add a banner that displays every Friday to let customers to your restaurant website know that there is a happy hour from 7-10 pm with a 50% discount on all cocktails. As the promo finishes at 10 pm we will also remove the banner at 10 pm.
We will add this banner to the homepage, but you can use the Divi Theme Builder to add the same section with its conditional statement to display on all pages.
Step 1 – Open up your homepage and add a new section to hold your banner. In the example below I have a section with a single column row and a text module. This is our banner that will now display on our homepage every day of the week
Step 2 – In order for our banner to only display on Fridays we need to add a conditional statement to the section. To do this we can click on the section settings and then on the Advanced tab. Scroll down to the Conditions section and click on the tab to reveal the + icon.
Step 3 – Click on the + icon and you will see the full list of conditional options available to add. For this example, we need to scroll down to the Interaction group and click on the Date & Time link.
Step 4 – Once you click on the Date & Time option you will then see a range of options specific to this condition. At the top of the popup, you will see a dropdown with “Display Only If Current Date”. In this dropdown, you need to select the option that says “Is On SPecific Day(s) Of The Week”. You can then use the checkboxes by the days of the week and select Friday.
Step 5 – The last step is to hide the banner each Friday at 10 pm when the Happy Hour ends. To do this you will need to change the All Day option switch from YES to NO. When you do this you will then see the options to set a start and finish time. Leave the From Hour as 00 hours but change the Until Hour to 22, so that the banner will not display from 10 pm every Friday.
Conditional logic in the Divi contact form module
Conditional logic has been integrated into the Divi Contact form module for a couple of years now and can be used as a standalone feature or in conjunction with the newly added sitewide conditional logic options.
The conditional logic options that are built into the contact form module allow you to display or hide contact form fields based on the choices your visitors select in the form. This means that you can dynamically adjust your form questions and fields based on the users’ previous selections. This is a very solid solution for your contact form and for many users means that you do not need to choose a 3rd party contact form for your Divi website.
Conditional logic is a hugely useful option for Divi users that was previously only available via a 3rd party Divi plugin. This new full feature option has been rolled into Divi and is a great update for us all.
The above example shows the most basic of uses, but when multiple conditional logic statements are made together you can create some truly powerful websites.
Have you used the conditional options within Divi yet? Let us know what you used it for in the comments below.