How to Set Elementor Display Condition Based on Shortcode?

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 widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.

Before You Start

• Edition: Pro — Display Condition is part of The Plus Addons for Elementor Pro. It does not exist in the free plugin.
• Switch it on. It is off by default. Go to The Plus Addons > Extensions and turn on Display Condition.
• Where it appears: the Advanced tab of any Elementor widget, section or container — not only The Plus Addons widgets.

The editor always shows everything. Conditions are applied only on the published page, so check the result in a private window — logged out if the rule is about login status.

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 > Display Condition.

2. Turn on the Display Condition toggle.

Now you will see Keep HTML, which is on by default. While it is on, an element whose conditions are not met is still sent to the browser and hidden with CSS, so its content can be read in the page source. Turn it off for anything private — members-only details, prices for logged-in customers — so the element is not sent at all.

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 – The rule passes when the condition is met.

Not – Reverses the rule: it passes when the condition is not met.

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.

How the Match Works

The rule runs your shortcode and compares what it returns with Enter Value, character for character. hello matches hello, but not Hello, hello with a trailing space, or <p>hello</p>.

Make the shortcode return a short, predictable word such as yes or no, and compare against that.

Limitations

• Exact match only. No contains, greater than or less than.
• The shortcode runs on every page view, so keep it fast.
• Pro only. Display Condition is not in the free plugin.

Troubleshooting

The element never shows

The output differs from Enter Value — often by case, spaces or HTML the shortcode adds. Output the shortcode on a test page to see exactly what it returns.