{"id":47086,"date":"2025-02-19T15:26:35","date_gmt":"2025-02-19T15:26:35","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=47086"},"modified":"2025-02-20T11:31:27","modified_gmt":"2025-02-20T11:31:27","slug":"how-to-operate-with-dynamic-visibility-via-shortcodes","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-operate-with-dynamic-visibility-via-shortcodes\/","title":{"rendered":"How to Operate with Dynamic Visibility via Shortcodes"},"content":{"rendered":"\n

In this guide, we will look through the process of JetEngine<\/em>\u2019s shortcode generation in order to show certain widgets\/blocks\/elements in case a certain condition is met, namely if the price of the tour exceeds $1500 on the tour website.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

This guide is based on the Travengo<\/strong> dynamic template<\/a> by Crocoblock.<\/p><\/div><\/div>\n\n\n\n

Also, check the Dynamic Visibility Overview<\/a><\/strong> to know how to manage the visibility conditions.<\/p>\n\n\n\n

Generate a Shortcode<\/h2>\n\n\n\n
\n

Head to WordPress Dashboard > JetEngine > JetEngine <\/em><\/strong>and open the Shortcode Generator <\/strong>tab.<\/p>\n\n\n\n

Here, select the preferred option in the Shortcode <\/strong>field. <\/strong>Now, we pick the \u201cJetEngine Condition\u201d option.<\/p>\n\n\n\n

Next, we select the \u201cEnclosing (e.g. [shortcode attrs]…content[\/shortcode])\u201d option as the Tag Enclosing Type <\/strong>to be able to paste the needed text inside of the shortcode.<\/p>\n\n\n\n

Then, we leave the default \u201cShow element if condition met\u201d Visibility Condition Type<\/strong>.<\/p>\n\n\n\n

In the Condition <\/strong>field, select the needed option. In this case, we pick the \u201cGreater than\u201d option.<\/p>\n\n\n\n

In the Field<\/strong>, paste the Name\/ID <\/strong>of the meta field<\/a> value that should be compared. In this case, we paste the \u201c_pricing\u201d value.<\/p>\n\n\n\n

Then, we paste the \u201c1500\u201d in the Value <\/strong>field so the text will be visible only when the price exceeds the mentioned value.<\/p>\n\n\n\n

Next, we leave the following Context <\/strong>and Data type <\/strong>fields default.<\/p>\n\n\n\n

Ultimately, copy the shortcode.<\/p>\n\n\n\n

\"enclosing<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Use Shortcode in Elementor<\/h2>\n\n\n\n
\n

Proceed to the place where you want to use the generated shortcode. For instance, we want to use it in JetEngine<\/em>\u2019s Listing template<\/strong><\/a>, so we head to WordPress Dashboard > JetEngine > Listings\/Components <\/em><\/strong>and press the \u201cAdd New Item<\/strong>\u201d button.<\/p>\n\n\n\n

In the Setup Listing Item <\/strong>pop-up, we leave the default \u201cPosts\u201d Listing source<\/strong>, choose the \u201cTour\u201d option in the From post type <\/strong>selector (it is the Custom Post Type<\/strong><\/a> created beforehand), set the \u201cListing Tours\u201d Listing item name, <\/strong>and leave the default \u201cElementor\u201d Listing view<\/strong>.<\/p>\n\n\n\n

Click the \u201cCreate Listing Item<\/strong>\u201d button to open the editor.<\/p>\n\n\n\n

\"elementor<\/a><\/div>\n\n\n\n

Fill the listing with the needed widgets. In our case, we have added different dynamic widgets, namely Dynamic Link<\/strong><\/a>, Dynamic Image<\/strong><\/a>, and Dynamic Fields<\/strong><\/a>.<\/p>\n\n\n\n

Next, add a Shortcode <\/strong>widget to the page. <\/p>\n\n\n\n

In the Enter shortcode <\/strong>field, paste the copied shortcode and change the \u201cAdd your content here…\u201d text inside it into the text you need.<\/p>\n\n\n\n

For instance, we have the following shortcode:<\/p>\n\n\n\n

[jet_engine_condition jedv_condition=\"greater-than\" jedv_field=\"_pricing\" jedv_value=\"1500\"]VIP Offer[\/jet_engine_condition]<\/code><\/pre>\n\n\n\n
\"shortcode<\/a><\/div>\n\n\n\n
Save the listing item by pressing the \u201cPublish<\/strong>\u201d button.<\/p>\n\n\n\n
Proceed to the page where you want to use the created Listing template<\/strong>. For instance, we go to WordPress Dashboard > Pages <\/em><\/strong>and open the \u201cHome\u201d page in the editor.<\/p>\n\n\n\n
Here, find and put the Listing Grid <\/strong>widget on the page. <\/p>\n\n\n\n
Select the needed Listing <\/strong>and adjust other settings if needed.<\/p>\n\n\n\n
\"listing<\/a><\/div>\n\n\n\n
Make other changes to the page and press the \u201cPublish<\/strong>\u201d button whenever ready.<\/p>\n<\/div><\/div>\n\n\n\n
Use Shortcode in Gutenberg (Block Editor)<\/h2>\n\n\n\n
\n
The customization process in Gutenberg (Block Editor) is similar to the one in Elementor<\/a>.<\/p>\n\n\n\n
For instance, let\u2019s assume we want to create the Listing item<\/strong>, but this time, it is in Gutenberg. So, in the WordPress Dashboard > JetEngine > Listing\/Components <\/em><\/strong>directory, we press the \u201cAdd New Item<\/strong>\u201d button.<\/p>\n\n\n\n
In the Setup Listing Item <\/strong>pop-up, we leave the default \u201cPosts\u201d Listing source<\/strong>, choose the \u201cTour\u201d option in the From post type <\/strong>selector, set the \u201cListing Tours – Blocks (Gutenberg)\u201d Listing item name<\/strong>, <\/strong>and pick the \u201cBlocks (Gutenberg)\u201d Listing view<\/strong>.<\/p>\n\n\n\n
Press the \u201cCreate Listing Item<\/strong>\u201d button to proceed to the editor.<\/p>\n\n\n\n
\"gutenberg<\/a><\/div>\n\n\n\n
In the editor, add content to your listing. For instance, we add dynamic blocks, namely Dynamic Link<\/strong><\/a>, Dynamic Image<\/strong><\/a>, and Dynamic Fields<\/strong><\/a>.<\/p>\n\n\n\n
Next, we add the Shortcode <\/strong>block to the page. <\/p>\n\n\n\n
In the Enter shortcode <\/strong>field, paste the copied shortcode. For instance, we paste the same shortcode as in Elementor previously.<\/p>\n\n\n\n
\"shortcode<\/a><\/div>\n\n\n\n
Now, you can add the Listing Grid <\/strong>to the needed page, like in the chapter about Elementor<\/a>.<\/p>\n<\/div><\/div>\n\n\n\n
Use Shortcode in Bricks<\/h2>\n\n\n\n
\n
Let\u2019s generate one more shortcode, but this time it will be self-closing, so it can be later used in Bricks to set the dynamic visibility of the needed element.<\/p>\n\n\n\n
Go to WordPress Dashboard > JetEngine > JetEngine <\/em><\/strong>and open the Shortcode Generator <\/strong>tab.<\/p>\n\n\n\n
In the Shortcode <\/strong>field, we select the \u201cJetEngine Condition\u201d option. Next, we pick the \u201cSelfclosing (e.g.) [shortcode attrs])\u201d Tag Enclosing Type <\/strong>and the \u201cGreater than\u201d Condition<\/strong>.<\/p>\n\n\n\n
In the Field<\/strong>, set the Name\/ID <\/strong>of the meta field that should be used for comparison. Here, we place the \u201c_pricing\u201d value. The Value <\/strong>is set to \u201c1500,\u201d and the Context <\/strong>and Data type <\/strong>is left default.<\/p>\n\n\n\n
Then, copy the generated shortcode.<\/p>\n\n\n\n
\"self-closing<\/a><\/div>\n\n\n\n
Now, we want to create the Listing item <\/strong>in Bricks. So, in the WordPress Dashboard > JetEngine > Listing\/Components <\/em><\/strong>directory, we press the \u201cAdd New Item<\/strong>\u201d button.<\/p>\n\n\n\n
In the Setup Listing Item <\/strong>pop-up, we leave the default \u201cPosts\u201d Listing source<\/strong>, choose the \u201cTour\u201d option in the From post type <\/strong>selector, set the \u201cListing Tours – Bricks\u201d Listing item name, <\/strong>and select the \u201cBricks\u201d Listing view<\/strong>.<\/p>\n\n\n\n
Press the \u201cCreate Listing Item<\/strong>\u201d button to proceed to the editor.<\/p>\n\n\n\n
\"bricks<\/a><\/div>\n\n\n\n
In the editor, add content to your listing. For instance, we add dynamic elements, namely Dynamic Link<\/strong>, Dynamic Image<\/strong>, and Dynamic Fields<\/strong>.<\/p>\n\n\n\n
Next, we add a Heading <\/strong>with the \u201cVIP Offer\u201d text. When the element is selected, press the \u201cConditions<\/strong>\u201d button.<\/p>\n\n\n\n
\"heading<\/a><\/div>\n\n\n\n
Hit the \u201cplus<\/strong>\u201d button.<\/p>\n\n\n\n
In the Select condition <\/strong>dropdown, find the JET ENGINE <\/strong>section and select the \u201cDynamic Visibility\u201d option.<\/p>\n\n\n\n
In the appeared Compare <\/strong>field, pick the \u201cCondition is met\u201d option.<\/p>\n\n\n\n
In the Value <\/strong>field, paste the copied shortcode.<\/p>\n\n\n\n
\"heading<\/a><\/div>\n\n\n\n
Ultimately, save the page.<\/p>\n\n\n\n
Now, you can add the Listing Grid <\/strong>to the needed page, like in the chapter about Elementor<\/a>.<\/p>\n<\/div><\/div>\n\n\n\n
Check the Result<\/h2>\n\n\n\n
\n
Open the just-edited page on the front end.<\/p>\n\n\n\n
As you can observe, the added text is now visible next to the items when the condition is met, namely, when the price is higher than $1500.<\/p>\n\n\n\n
\"listing<\/a><\/div>\n<\/div><\/div>\n\n\n\n
That\u2019s all; now you know how to operate with Dynamic Visibility <\/strong>via JetEngine <\/em>shortcodes on your WordPress website.<\/p>\n","protected":false},"excerpt":{"rendered":"
This tutorial is about operating with Dynamic Visibility of widgets\/blocks\/elements via JetEngine\u2019s shortcodes for WordPress.<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[406],"yoast_head":"\nHow to Operate with Dynamic Visibility via Shortcodes \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"From this guide, you will find out how to manage Dynamic Visibility with the help of JetEngine\u2019s shortcodes for WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-operate-with-dynamic-visibility-via-shortcodes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Operate with Dynamic Visibility via Shortcodes \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"From this guide, you will find out how to manage Dynamic Visibility with the help of JetEngine\u2019s shortcodes for WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-operate-with-dynamic-visibility-via-shortcodes\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-20T11:31:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/02\/enclosing-shortcode-generator-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-operate-with-dynamic-visibility-via-shortcodes\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-operate-with-dynamic-visibility-via-shortcodes\/\",\"name\":\"How to Operate with Dynamic Visibility via Shortcodes \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-02-19T15:26:35+00:00\",\"dateModified\":\"2025-02-20T11:31:27+00:00\",\"description\":\"From this guide, you will find out how to manage Dynamic Visibility with the help of JetEngine\u2019s shortcodes for WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-operate-with-dynamic-visibility-via-shortcodes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-operate-with-dynamic-visibility-via-shortcodes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-operate-with-dynamic-visibility-via-shortcodes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Operate with Dynamic Visibility via Shortcodes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Operate with Dynamic Visibility via Shortcodes \u2014 JetEngine | Crocoblock","description":"From this guide, you will find out how to manage Dynamic Visibility with the help of JetEngine\u2019s shortcodes for WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-operate-with-dynamic-visibility-via-shortcodes\/","og_locale":"en_US","og_type":"article","og_title":"How to Operate with Dynamic Visibility via Shortcodes \u2014 JetEngine | Crocoblock","og_description":"From this guide, you will find out how to manage Dynamic Visibility with the help of JetEngine\u2019s shortcodes for WordPress.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-operate-with-dynamic-visibility-via-shortcodes\/","og_site_name":"Help Center","article_modified_time":"2025-02-20T11:31:27+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/02\/enclosing-shortcode-generator-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-operate-with-dynamic-visibility-via-shortcodes\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-operate-with-dynamic-visibility-via-shortcodes\/","name":"How to Operate with Dynamic Visibility via Shortcodes \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-02-19T15:26:35+00:00","dateModified":"2025-02-20T11:31:27+00:00","description":"From this guide, you will find out how to manage Dynamic Visibility with the help of JetEngine\u2019s shortcodes for WordPress.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-operate-with-dynamic-visibility-via-shortcodes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-operate-with-dynamic-visibility-via-shortcodes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-operate-with-dynamic-visibility-via-shortcodes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Operate with Dynamic Visibility via Shortcodes"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/47086"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=47086"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=47086"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=47086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}