How to Set Elementor Display Condition Based on Shortcode?

Updated onApril 11, 2026By

Key Takeaways

  • The Plus Addons for Elementor Display Condition extension allows users to add dynamic visibility conditions to shortcode content.
  • Users must create a shortcode in the functions.php file of their theme to utilize the Display Condition feature.
  • Enabling the Keep HTML option hides content in the frontend if the condition is false while keeping it in the HTML (DOM).
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’s installed & activated to enjoy all its powers.

LIVE WIDGET LINK

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’ve created this shortcode.

function function_name_unique($atts) {
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’ll see an option called Keep HTML. Enabling this will hide the content in the frontend if the condition is false but it will remain in the HTML (DOM).

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

4. Then click on the Rule tab. Here you’ll 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. Then in the Enter Shortcode field, you have to add your shortcode, here it will be [my_shortcode].

7. Finally, in the Enter Value field, you have to add the value, which is hello as per our example.

Since the value here and in our shortcode is the same, the content will display here, but if it doesn’t match, then the content will not display.

If the option is set to Not in the second dropdown, it will reverse the condition.

Also, read How to Set Elementor Display Condition Based on Woocommerce Product.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if my shortcode doesn't display content as expected?

If your shortcode isn't displaying content, check that the value you entered in the Enter Value field matches the output of your shortcode. For example, if your shortcode returns 'hello', ensure you input 'hello' in the value field. If they don't match, the content won't display. Additionally, verify that the Display Condition toggle is turned on in the Elementor widget settings.

Can I use the Display Condition extension with other page builders?

The Display Condition extension is specifically designed for use with Elementor and is part of The Plus Addons for Elementor. It does not work with other page builders like Gutenberg, Beaver Builder, or Divi. Ensure you are using Elementor to take advantage of this feature.

What is the purpose of the Keep HTML option in the Display Condition settings?

The Keep HTML option allows you to hide content from the frontend while keeping it in the HTML (DOM). This is useful for maintaining the structure of your page without displaying certain elements based on conditions. If the condition is false, the content will not be visible to users, but it can still be accessed by scripts or other elements on the page.

How do I create a custom shortcode for use with Elementor?

To create a custom shortcode, you need to add a function to your theme's functions.php file. For example, you can define a function like this: function function_name_unique($atts) { return 'hello'; } and then register it with add_shortcode('my_shortcode', 'function_name_unique');. This shortcode can then be used in the Display Condition settings to control visibility based on its output.

What happens if I set the second dropdown to 'Not' in the Display Condition?

Setting the second dropdown to 'Not' reverses the condition. This means that if the shortcode output does not match the value you specified, the content will display. This can be useful for creating conditions where you want to show content only when certain criteria are not met, providing more flexibility in your design.

What are some common mistakes when setting display conditions based on shortcodes?

A common mistake is not ensuring that the shortcode output matches the value specified in the Display Condition settings. Another issue is forgetting to enable the Display Condition toggle, which prevents the conditions from being applied. Always double-check these settings to ensure your content displays as intended.

Last reviewed: April 11, 2026

Related Docs