Elementor Display Conditions Tutorial

Premium Display Conditions for Elementor page builder is a new global feature in Premium Addons for Elementor that helps you to show/hide any Elementor widget, column, or section dynamically depending on a list of condition rules such as Browser, Operating System, Login Status, Device Type, etc. Not just that, you can also display content to the visitors based on the page URL parameters, WooCommerce shopping cart, or WooCommerce product data (Current Product Categories, Number of Items in WooCommerce shopping cart, Date of Last Purchase, Total Amount of Items in the shopping cart, etc), or ACF (Choice, Text, or True/False fields).

Click here to check Elementor Display Conditions Feature demo page.

Introducing Display Conditions for Elementor Page Builder
Elementor Display Conditions

Requirements:

  • You will need Premium Addons free plugin installed and activated on your website.
  • Premium Addons Pro is required for:
    • URL Referrer and URL String Display Conditions.
    • WooCommerce Display Conditions.
    • Advanced Custom Fields Display Conditions
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

How to Enable Display Conditions Feature for Elementor?

Make sure that Display Conditions feature is enabled by navigating to WP Dashboard -> Premium Addons for Elementor -> Global Features tab. Then, enable Display Conditions feature for Elementor.

Activate Display Conditions for Elementor Feature From Premium Add-ons Settings Page in WP Dashboard
Enable Display Conditions for Elementor Feature

How to Use the Display Conditions Feature for Elementor?

Premium Display Conditions for Elementor can be applied on any Elementor element. To apply conditions on your Elementor elements, please follow the steps below:

First, navigate to your Elementor widget, column or section settings > Advanced tab > Display Conditions.

  • Enable Display Conditions: Enable this option to apply Elementor Display Conditions on this element.
  • Action: Select whether you want to show or hide the element based on the selected display conditions.
  • Display When: Select when this action should be triggered. When all conditions are met or any condition met.
  • Conditions: Here you can set the conditions and set the values to compare.

You can add conditions as many as required by clicking on Add Item button.

Elementor Display Conditions Options
Elementor Display Conditions Options

Available Conditions in Elementor Display Conditions

We’ve added many conditions in Premium Display Conditions to make sure you find the condition you are looking for. Below, you can find all the available conditions in Premium Addons for Elementor and Premium Addons Pro plugins.

Free Display Conditions for Elementor

Here’s a list of the available conditions in Premium Addons for Elementor plugin:

  • Browser: Show/hide Elementor content based on the visitor’s browser. You can select from Opera, Microsoft Edge, Google Chrome, Safari, Mozilla Firefox and Internet Explorer.
Show/hide Elementor Element On Specific Browser Display Condition
Browser Display Condition for Elementor Page Builder
  • Device: Show/hide Elementor content based on visitor’s device. You can select desktop or small screens (Tablet & Mobile).
Show/hide Elementor Element On Specific Device Display Condition
Device Display Condition for Elementor Page Builder
  • Operating System: Show/hide Elementor content based on visitor’s operating system. You can select from Windows, MacOs, Linux, iPhone, Android, BlackBerry, OpenBSD, SunOS, QNX, BeOS and OS/2.
Show/hide Elementor Element On Specific Operating System Display Condition
Operating System Display Condition for Elementor Page Builder
  • Day: Show/hide Elementor content for visitors on selected day(s). You can select days from Sunday to Saturday.
Show/hide Elementor Element On Specific Day Display Condition
Day Display Condition for Elementor Page Builder
  • Date: Show/hide Elementor content for visitors on a specific date.
Show/hide Elementor Element On Specific Date Display Condition
Date Display Condition for Elementor Page Builder
  • Date Range: Show/hide Elementor content for visitors on a selected period. You can set a starting date and end date.
Show/hide Elementor Element On Date Range Display Condition
Date Range Display Condition for Elementor Page Builder
  • Time Range: Show/hide Elementor content for visitors on a selected period time. You can set a starting time and end time.
Time Range Display Condition in Elementor Panel
Time Range Display Condition in Elementor Page Builder
  • Location: Show/hide Elementor content based on visitor’s country.
Show/hide Elementor Element By User Location Display Condition
Location Display Condition for Elementor Page Builder
  • Login Status: Show/hide Elementor content based on user login status. For logged-out users you can change Is to Is Not.
Show/hide Elementor Element By Login Status Display Condition
Login Status Display Condition for Elementor Page Builder
  • Returning Visitor: This condition helps you Show/hide Elementor content if the visitor of the current is a returning visitor which means he visited the current page before.
Show/hide Elementor Element By Return Visitor Display Condition
Return Visitor Display Condition for Elementor Page Builder
  • Role: Show/hide Elementor content based on visitor’s role: Administrator, Editor, Author, etc.
Show/hide Elementor Element By User Role Display Condition
User Role Display Condition for Elementor Page Builder
  • Post: Show/hide Elementor content for visitor on specific post(s). If you are building a Single Post template, you can use this option to show content on specific posts.
Show/hide Elementor Element On Specific Post Display Condition
Post Display Condition for Elementor Page Builder
  • Post Type: Show/hide Elementor content for visitor based on the post type. If you are building a Single Post template using Elementor Pro, you can use this option to show content for a specific post type.
Show/hide Elementor Element By Post Type Display Condition
Post Type Display Condition for Elementor Page Builder
  • Page: Show/hide Elementor content for visitor on specific page(s). If you are building a Page template, you can use this option to show content on specific pages.
Show/hide Elementor Element On Specific Page Display Condition
Page Display Condition for Elementor Page Builder
  • Website Static Pages: Show/hide content on Homepage, Frontpage, Blog Page, or 404 page.
Show/hide Elementor Element By Static Pages Display Condition
Static Pages Display Condition for Elementor Page Builder
  • Site Language: Show/hide Elementor content based on the current website language. If you are building a multi-language website, you can use this option to show content for a specific language.
Show/hide Elementor Element By Site Language Display Condition
Site Language Display Condition in Elementor Page Builder
  • String in URL: Show/hide content if the URL contains a specific string. This is useful if you have a Elementor template used on multiple pages, or using Elementor header and footer, you can show content on specific page(s) only by checking if the current page URL slug contains a specific string.
Show/hide Elementor Element By String in URL Display Condition
String in URL Display Condition for Elementor Page Builder
  • Shortcode: Run a shortcode and compare the returned value with the value in the display conditions and show/hide content based on that. For example, run a shortcode that returns the number of comments posted by the current user in the last 24 hours, and hide the comment box if the number of comments was more than 10.
Show/hide Elementor Element By Shortcode Display Condition
Shortcode Display Condition for Elementor Page Builder

Premium Display Conditions for Elementor

Elementor Display Conditions feature is compatible with Advanced Custom Fields and WooCommerce plugins which will extend your options. Also, you can show/hide content based on the parameters passed through the page URL.

Those conditions require Premium Addons Pro plugin installed and activated on your website.

WooCommerce Display Conditions for Elementor

The conditions below can be used to show/hide Elementor content on WooCommerce shopping cart, WooCommerce checkout, or any other page on your website.

  • Current Category Page: Show/hide Elementor content in WooCommerce category page based on the current WooCommerce product category. Click here for more details.
  • Current Product Categories: Show/hide Elementor content in WooCommerce product page based on the categories of the current product. Click here for more details.
  • Current Product Price: Show/hide Elementor content in WooCommerce product page based on the price of the current product. Click here for more details.
  • Current Product Stock: Show/hide Elementor content in WooCommerce product page based on the stock quantity of the current product. Click here for more details.
  • Purchased/In Cart Orders: Show/hide content based on the number of items that the visitor already purchased or is still in WooCommerce shopping cart. Click here for more details.
  • Purchased/In Cart Categories: Show/hide Elementor content based on the categories of the items in WooCommerce shopping cart. Click here for more details.
  • Date Of Last Purchase: Show/hide Elementor content based on the date of WooCommerce last purchase. Click here for more details.
  • Amount in Shopping Cart: Show/hide Elementor content based on the total amount of the items in WooCommerce shopping cart. Click here for more details.
  • Products in Cart: Show/hide content if WooCommerce Shopping Cart contains the selected product(s). Click here for more details.

For more information about WooCommerce Display Conditions, please check this article.

Advanced Custom Fields Display Conditions for Elementor

  • ACF Choice: Show/hide content based on multiple choice custom fields.
    • ACF Field: Select ACF fields such as Select, Checkbox, Radio buttons.
    • Value: Set values to show or hide elements.
Show/hide Elementor element based on Advanced Custom Field Choice
Advanced Custom Fields Choice Display Condition in Elementor Page Builder
  • ACF Text: Show/hide content based on text custom field.
    • ACF Field: Select ACF fields such as text, textarea, wysiwyg, number, range, email, URL, and password custom field types.
    • Value: Set values to show or hide element.
Show/hide Elementor element based on Advanced Custom Field Text
Advanced Custom Fields Text Display Condition in Elementor Page Builder
  • ACF True/False: Show/hide content based on True/False custom field type.
    • ACF Field: Select ACF field such as True/False custom field type.
    • Value: Select value to show or hide element True or False.
Show/hide Elementor element based on Advanced Custom Field Boolean
Advanced Custom Fields Ture/False Display Condition in Elementor Page Builder

How to use URL Parameters in Elementor Display Conditions?

With URL Parameters option, you can show/hide content based on parameters passed through the page link URL such as https://mywebsite.com/?param=value. You can insert more than one parameter, but each parameter should be added in a new line.

Let’s assume that we are running Google campaigns on a website and need to show a promotion code to visitors coming from a specific campaign with link: https://mywebsite.com/?utm_campaign=newsletter. We’ll use Elementor Alert Box widget to create a popup that includes the discount code and use URL Referrer display conditions to show the popup for that campaign only.

  1. Head up to Alert Box widget settings > Advnaced tab > Display conditions.
  2. Switch on Enable Display Conditions.
  3. From Action option select Show Element.
  4. In Display When option, you can select All Conditions Are Met if you’ve multiple conditions you want to meet to perform that action. Otherwise, if you just want to show/hide the element with any condition met, select Any Condition is Met.
  5. Select Is from list, so that action will trigger if this condition is met.
  6. In Value text box, we will enter our parameter and its value. So, it will be utm_campaign=newsletter.

Please note: you can add more conditions by clicking on Add New button.

Available Options for URL Referrer Display Condition for Elementor
Configure Display Conditions Options to Show Alert Box on Specific URL Parameter

Now, you can save the page, then try to visit https://mywebsite.com/?utm_campaign=newsletter. You should see the discount popup only if “utm_campaign” parameter is set to “newsletter”.

Show Alert Box In Elementor Based On Page URL Parameters
Elementor Alert Box Triggered on Specific URL Parameter

Conclusion

Premium Addons for Elementor Display Conditions feature helps you to show or hide Elementor elements by certain conditions as we have covered above. This new feature allows you to go beyond Elementor without installing too many plugins on your WordPress website to add dynamic content for Elementor. There are a bunch of examples of feature usage, you can create a membership website where you can show full page content for logged-in users only or show some content based on user role and much more.

We hope we were able to help you through this guide. You can check out the rest of our Unique features for Elementor from here.

If you still need any further assistance, feel free to contact Premium Addons support team from here. We would be more than glad to help 😁


Join the Community

You’re most welcome to join our Facebook group and YoutTube channel to get updates about new features, improvements, and bug fixes.

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 25+ Elementor Widgets Totally Free of charge.

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.