{"id":120402,"date":"2023-06-23T12:15:57","date_gmt":"2023-06-23T06:45:57","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&p=120402"},"modified":"2023-06-26T16:26:03","modified_gmt":"2023-06-26T10:56:03","slug":"set-elementor-display-condition-based-on-shortcode","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/set-elementor-display-condition-based-on-shortcode\/","title":{"rendered":"How to Set Elementor Display Condition Based on Shortcode?"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

To check the complete feature overview documentation of The Plus Addons for Elementor Display Condition extension, click here<\/a>.<\/em><\/p>\n\n\n\n

Requirement  – This extension is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n

\n
LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

\n

Note: This option is for advanced users only.<\/em><\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

First, you have to create your shortcode<\/a> in the functions.php<\/em> file of your theme. <\/p>\n\n\n\n

\n

Note: Any customisation should be done in the child theme.<\/em><\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

For example, we\u2019ve created this shortcode.<\/p>\n\n\n\n

function function_name_unique($atts) {\nreturn 'hello';\n}\nadd_shortcode('my_shortcode', 'function_name_unique');<\/code><\/pre>\n\n\n\n
Here our shortcode name is my_shortcode<\/em> and the value is hello<\/em>.<\/p>\n\n\n\n
To add display conditions based on shortcode, add any Elementor widget on the page. <\/p>\n\n\n\n
1. Go to Advanced<\/strong> > Plus Extras : Display Condition<\/strong>. <\/p>\n\n\n\n
2. Turn on the Display Condition<\/strong> toggle.<\/p>\n\n\n\n
Now you\u2019ll see an option called Keep HTML<\/strong>. Enabling this will hide the content in the frontend if the condition is false but it will remain in the HTML (DOM).<\/p>\n\n\n\n
3. After selecting the appropriate option from the Display When<\/strong> dropdown, go to the Rules<\/strong> section, here you have to set the actual display condition. You can have one or multiple conditions\/rules.<\/p>\n\n\n\n
4. Then click on the Rule<\/strong> tab. Here you\u2019ll find the Shortcode option under the Shortcode <\/strong>label.<\/p>\n\n\n\n
\"display<\/figure>\n\n\n\n
5. Then in the second dropdown, you have two options – <\/p>\n\n\n\n
Is<\/strong> – This will make the statement true.<\/p>\n\n\n\n
Not<\/strong> – This will make the statement false.<\/p>\n\n\n\n
6. Then in the Enter Shortcode<\/strong> field, you have to add your shortcode, here it will be [my_shortcode].<\/p>\n\n\n\n
7. Finally, in the Enter Value<\/strong> field, you have to add the value, which is hello<\/em> as per our example.<\/p>\n\n\n\n
Since the value here and in our shortcode is the same, the content will display here, but if it doesn\u2019t match, then the content will not display.<\/p>\n\n\n\n
If the option is set to Not<\/strong> in the second dropdown, it will reverse the condition.<\/p>\n\n\n\n
Also, read How to Set Elementor Display Condition Based on Woocommerce Product<\/a>.<\/p>\n","protected":false},"author":25,"featured_media":120405,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[565,525],"class_list":["post-120402","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-display-conditions","docs-plus-extras"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/120402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=120402"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/120402\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/120405"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=120402"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=120402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}