How to Set Elementor Display Condition Based on Shortcode?

Table Of Content

Suppose you are using custom shortcodes to display content on your site. In that case, you can use the Display Condition extension of The Plus Addons for Elementor to add dynamic visibility conditions on your shortcode content.

To check the complete feature overview documentation of The Plus Addons for Elementor Display Condition extension, click here.

Requirement  – This extension is a part of The Plus Addons for Elementor, make sure it is installed & activated to enjoy all its powers.

Best Used For:

  • Membership sites showing exclusive content blocks only to logged-in users with a specific shortcode condition
  • Sites using custom shortcodes to evaluate dynamic data values and conditionally reveal widgets or sections
  • Developer-built sites where shortcode output drives visibility logic for A/B testing or personalisation

Note: This option is for advanced users only.

First, you have to create your shortcode in the functions.php file of your theme. 

Note: Any customisation should be done in the child theme.

For example, we have created this shortcode.

function function_name_unique() {
return 'hello';
}
add_shortcode('my_shortcode', 'function_name_unique');

Here our shortcode name is my_shortcode and the value is hello.

To add display conditions based on shortcode, add any Elementor widget on the page.

1. Go to Advanced > Plus Extras : Display Condition.

2. Turn on the Display Condition toggle.

Now you will see an option called Keep HTML. Enabling this will hide the content on the front end if the condition is false but keep it in the HTML (DOM). Use this when you need the element to remain accessible to scripts or screen readers even when not visible.

3. After selecting the appropriate option from the Display When dropdown, go to the Rules section to set the actual display condition. You can add one or multiple conditions.

4. Then click on the Rule tab. You will find the Shortcode option under the Shortcode label.

5. Then in the second dropdown, you have two options – 

Is – This will make the statement true.

Not – This will make the statement false.

6. In the Enter Shortcode field, add your shortcode, for example [my_shortcode].

7. In the Enter Value field, add the expected output value, which is hello in this example.

Since the value in the field matches the shortcode output, the content will display. If the values do not match, the content will not appear.

If the option is set to Not in the second dropdown, the condition is reversed.

Also, read How to Set Elementor Display Condition Based on WooCommerce Product. For URL-based visibility rules, see How to Set Elementor Display Condition Based on URL String or Parameters.

Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

Related Docs