Display Conditions

General

In Extras 2.0 we introduced Display Conditions. A very powerful way of conditioning the display of widgets and sections. These conditions range from user login to the current used WordPress template.

Why use Display Conditions?

Elementor lets you create different templates for all pages in the WordPress template hierarchy. But sometimes these layouts can be very similar and you might only need a few changes from one to another. Instead of creating different templates and ending up with huge amounts of duplicate content and having to change it in two places, you can use Display Conditions to hide certain areas depending on the current page.

Example scenario

Let’s say you have two custom post types: conference and concert. For both you need similar layouts with a sidebar on the right side for the single view. On the concert post type you need to show a button “Get Tickets” that you don’t need for the conference post type. Normally, because of that button, you would need to create two different Elementor templates: one for the conference post type, one for concert, with the only difference being the extra button on the concert single view.

With Display Conditions you can create only one template, go to the Button widget and under Advanced > Extras turn on Display Conditions, select “Post Type”, then “is” as the operator and “Concert” as the post type. This means that the Button widget will only show when the current page is a concert post type. That simple!

How it works

Display Conditions currently can be currently applied to Widgets and Sections. For sections, we only hide them using CSS at this point. For widgets you have the option to hide them using CSS or prevent the output of the HTML code all-together.

The conditions can be found under Advanced > Extras. Turn on Display Conditions and a repeater field will appear with a single condition. Each condition has a type, an operator (“is” or “is not“) and a value. The conditions types and their available values are:

1. Visitor
   1. Login status — User is or is not logged in.
   2. User Role — Current logged in user role. This is valid only if the user is logged in.
   3. Operating system — Current operating system used by the visitor
   4. Browser — Current browser used by the visitor
2. Date & Time — If the current date or time
   1. Current date — is between or outside an interval
   2. Time of day — is between or outside of an interval. You can choose to show certain content at night each day, for example.
3. Current Page
   1. Page — current page is one of the selected pages
   2. Post — current post is one of the selected posts
   3. Static Page — is the front page, homepage, blog posts page or 404 page.
   4. Post Type — is a single view of a post type
   5. Post Term — current post has specific terms set
   6. Post Author — current post author is one of the ones specified
4. Current Archive — If the current archive
   1. Taxonomy — is a specific taxonomy archive
   2. Post Type — is a custom post type archive
   3. Date — is a date archive. It can be “day”, “month”, or “year”.
   4. Author — is a specific author archive. You can leave the value empty for all author archive pages.
   5. Search — is a search results page. Moreover, you can show or hide it if the search query contains a certain word. This is powerful because it means you can show content for users based on the interest shown in a specific topic.
5. Advanced Custom Fields — Conditions based on ACF fields. To check if the specified ACF field is set to any value, leave the condition value empty.
6. Pods [coming soon] — Conditions based on Pods fields. To check if the specified ACF field is set to any value, leave the condition value empty.

Mixing Conditions

You are free to add as many conditions as you want. You can also specify wether these conditions should ALL be met, or should ANY of them be met under the Display on control. For the condition types where you can select multiple values, these values have an OR relationship. For example, if you add a condition: “Current Archive Taxonomy” + “is” and select both “Categories” and “Tags”, the element will display on a category archive page OR a tag archive page.