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).

Check Elementor Display Conditions Feature demo page.

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.

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 is 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.

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.

• Device: Show/hide Elementor content based on visitor’s device. You can select desktop or small screens (Tablet & Mobile).

• 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.

• Day: Show/hide Elementor content for visitors on selected day(s). You can select days from Sunday to Saturday.

• Date: Show/hide Elementor content for visitors on a specific date.

• Date Range: Show/hide Elementor content for visitors on a selected period. You can set a starting date and end date.

• Time Range: Show/hide Elementor content for visitors on a selected period time. You can set a starting time and end time.

• Location: Show/hide Elementor content based on visitor’s country.

• Login Status: Show/hide Elementor content based on user login status. For logged-out users you can change Is to Is Not.

• 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.

• Role: Show/hide Elementor content based on visitor’s role: Administrator, Editor, Author, etc.

• 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.

• 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.

• 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.

• Website Static Pages: Show/hide content on Homepage, Frontpage, Blog Page, or 404 page.

• 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.

• 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.

• 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.

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. Check the demo page for more defailts.
• Current Product Categories: Show/hide Elementor content in WooCommerce product page based on the categories of the current product. Check the demo page for more defailts.
• Current Product Price: Show/hide Elementor content in WooCommerce product page based on the price of the current product. Check the demo page for more defailts.
• Current Product Stock: Show/hide Elementor content in WooCommerce product page based on the stock quantity of the current product. Check the demo page for more defailts.
• 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. Check the demo page for more defailts.
• Purchased/In Cart Categories: Show/hide Elementor content based on the categories of the items in WooCommerce shopping cart. Check the demo page for more defailts.
• Date Of Last Purchase: Show/hide Elementor content based on the date of WooCommerce last purchase. Check the demo page for more defailts.
• Amount in Shopping Cart: Show/hide Elementor content based on the total amount of the items in WooCommerce shopping cart. Check the demo page for more defailts.
• Products in Cart: Show/hide content if WooCommerce Shopping Cart contains the selected product(s). Check the demo page for more defailts.

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.

• 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.

• 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.

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.

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”.

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. Check out the rest of our unique features in Premium Addons plugin.

If you still need any further assistance, feel free to contact Premium Addons support team. 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.