{"id":47011,"date":"2025-02-12T10:07:13","date_gmt":"2025-02-12T10:07:13","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=47011"},"modified":"2025-11-07T08:58:14","modified_gmt":"2025-11-07T08:58:14","slug":"how-to-use-hidden-filter-with-components","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-use-hidden-filter-with-components\/","title":{"rendered":"How to Use Hidden Filter with Components"},"content":{"rendered":"\n

Hidden Filter <\/strong>is the JetSmartFilters<\/em>\u2019 feature that allows modifying the query that has already been applied to its provider. Refer to the Hidden Filter Overview<\/strong><\/a> for more information about its settings.<\/p>\n\n\n\n

In this guide, we will show how to use the Hidden Filter <\/strong>with JetEngine\u2019s <\/em>Component<\/strong><\/a> to dynamically change which posts are displayed in the Listing Grid<\/strong><\/a> based on the value selected in a Component <\/strong>control.<\/p>\n\n\n\n

For instance, you can let users select a taxonomy term within the component and automatically display only the posts associated with that term. You can also adjust the available options in other multi-select filters based on the selected value in the component. This approach maintains query stability even when additional filters are applied within the component.<\/p>\n\n\n

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

This guide is recreated with the BaliRento<\/strong><\/a> dynamic template.<\/p><\/div><\/div>\n\n\n\n

Create Taxonomy<\/h2>\n\n\n\n
\n

Initially, we built a custom \u201cProperty Type\u201d taxonomy for the \u201cProperties\u201d Custom Post Type (CPT)<\/strong>, added terms, and attached posts to them. This taxonomy will later be used as a source for the Hidden Filter<\/strong>.<\/p>\n\n\n\n

Additionally, we add the \u201cMeals\u201d taxonomy, create terms, and attach posts to them. We will use this taxonomy as a source in a Checkbox Filter<\/strong>, which will also be displayed in the component.<\/p>\n\n\n\n

Check the detailed guide on How to Create a Custom Taxonomy<\/strong><\/a>.<\/p>\n\n\n\n

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

Build a Listing Template<\/h2>\n\n\n\n
\n

Next, we want to build a Listing item<\/strong><\/a> <\/strong>that will be added later in the Component<\/strong>.<\/p>\n\n\n\n

Go to WordPress Dashboard > JetEngine > Listings\/Components <\/em><\/strong>and press the \u201cAdd New Item<\/strong>\u201d button.<\/p>\n\n\n\n

We leave the default \u201cPosts\u201d Listing source<\/strong>, select \u201cProperties\u201d Custom Post Type<\/strong> in the From post type <\/strong>field, set the Listing item name <\/strong>to \u201cProperties Listing item,\u201d and pick the \u201cElementor\u201d option as the Listing view<\/strong> (you can use any preferred option).<\/p>\n\n\n\n

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

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

In the editor, we add dynamic widgets<\/a> that display post metadata.<\/p>\n\n\n\n

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

Once the listing item is ready, press the \u201cPublish<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n

Create a Filter<\/h2>\n\n\n\n
\n

Now, we want to build a filter that will later be added to the Component <\/strong>and applied to the Listing Grid <\/strong>in addition to the Hidden Filter<\/strong>.<\/p>\n\n\n\n

Set the Filter Name<\/strong> (here, \u201cCheckboxes Meals\u201d) and select the desired Filter Type<\/strong>. For instance, in this case, we pick the \u201cCheckboxes list<\/a>\u201d option.<\/p>\n\n\n\n

We pick \u201cTaxonomies\u201d as the Data Source <\/strong>and \u201cMeals\u201d as the Taxonomy<\/strong>.<\/p>\n\n\n\n

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

Also, we set the Filter Labels <\/strong>and press the \u201cUpdate<\/strong>\u201d button to save the filter.<\/p>\n\n\n\n

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

Build a Component<\/h2>\n\n\n\n
\n

Head to WordPress Dashboard > JetEngine > Listings\/Components <\/em><\/strong>and press the \u201cAdd New Component<\/strong>\u201d button.<\/p>\n\n\n\n

Set the Component name <\/strong>(here, \u201cComponent\u201d) and select the Component view <\/strong>(here, \u201cElementor.\u201d)<\/p>\n\n\n\n

To proceed to the editor, press the \u201cCreate Component<\/strong>\u201d button.<\/p>\n\n\n\n

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

In the editor, add the Hidden Filter <\/strong>widget to the page. <\/p>\n\n\n\n

In the Content<\/strong> settings, select \u201cJetEngine\u201d in the This filter for <\/strong>selector. <\/p>\n\n\n\n

We want to use the \u201cProperty Type\u201d taxonomy as the source, so we select the \u201cTaxonomy\u201d Argument Type<\/strong> and set the Name <\/strong>to \u201cproperty-type,\u201d since that is the Taxonomy Slug<\/strong> set when creating the custom taxonomy.<\/p>\n\n\n\n

In the Value <\/strong>field, paste the %component_control_value|select-tax|||% macro, where the \u201cselect-tax\u201d part will be used as the Control Name <\/strong>of the \u201cSelect\u201d control we will add to the component a little later. You can use any preferred Control Name<\/strong>, so change it accordingly.<\/p>\n\n\n\n

Also, set the Query ID <\/strong>that will later connect the filters and the provider. Here, we type the \u201clisting\u201d Query ID<\/strong>, <\/strong>but you can use any preferred one.<\/p>\n\n\n\n

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

Next, we add a Checkboxes Filter <\/strong>to filter content further, not only by the \u201cProperty Type\u201d taxonomy in the Hidden Filter<\/strong>, but also by the \u201cMeals\u201d terms.<\/p>\n\n\n\n

Pick the created filter in the Select filter <\/strong>field and select the \u201cJetEngine\u201d provider in the This filter for <\/strong>field.<\/p>\n\n\n\n

Also, we set the Query ID <\/strong>to \u201clisting\u201d to connect this filter to the Listing Grid<\/strong>.<\/p>\n\n\n\n

Make other changes if needed.<\/p>\n\n\n\n

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

Add a Listing Grid<\/strong><\/a> <\/strong>widget to the page.<\/p>\n\n\n\n

Pick the built Listing <\/strong>and adjust other General <\/strong>settings if needed.<\/p>\n\n\n\n

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

If you have set the Query ID <\/strong>in the filters, let\u2019s connect them to the Listing Grid<\/strong>.\u00a0<\/p>\n\n\n\n

Open the Advanced <\/strong>tab and paste the same value in the CSS ID <\/strong>field (here, \u201clisting.\u201d)<\/p>\n\n\n\n

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

When all the widgets are added, we press the \u201csettings<\/strong>\u201d button next to the component name.<\/p>\n\n\n\n

Open the Component Content Controls <\/strong>tab, then press the added \u201cText Control\u201d to edit it.<\/p>\n\n\n\n

Set the Control Label <\/strong>(here, \u201cSelect Taxonomy\u201d) and the Control Value<\/strong>. Here, we set the Control Value <\/strong>that was used in the Hidden Filter <\/strong>macro to pass the selected taxonomy term to the Listing Grid<\/strong>, \u201cselect-tax\u201d.<\/p>\n\n\n\n

Pick the \u201cSelect\u201d Control Type <\/strong>and move to the Options <\/strong>textarea field.<\/p>\n\n\n\n

Here, set the needed options in the \u201c1::Red\u201d format, where \u201c1\u201d is the term ID and \u201cRed\u201d is its label.<\/p>\n\n\n\n

For example, we add such options:<\/p>\n\n\n\n

\u201cbungalow::Bungalow<\/p>\n\n\n\n

cottage::Cottage<\/p>\n\n\n\n

house::House<\/p>\n\n\n\n

resort::Resort<\/p>\n\n\n\n

villa::Villa\u201d.<\/p>\n\n\n\n

These correspond to the terms\u2019 Slugs <\/strong>and Names <\/strong>(names can be changed if desired, but the slugs should remain the same, as they connect the filter, Listing Grid<\/strong>, and terms).<\/p>\n\n\n\n

We also set the \u201ccottage\u201d ID as the Default Value<\/strong>, so this option will be selected by default in the Component <\/strong>settings.<\/p>\n\n\n\n

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

Press the \u201cPublish<\/strong>\u201d button when the component is ready.<\/p>\n<\/div><\/div>\n\n\n\n

Add the Component on the Page\/Template<\/h2>\n\n\n\n
\n

Open the page or template where you want to use the component. In this tutorial, we head to WordPress Dashboard > Pages > Add New<\/em><\/strong> and open the Elementor page builder.<\/p>\n\n\n\n

Find and add the component you have built before to the page.\u00a0<\/p>\n\n\n\n

You will observe the added component control in the settings. In our case, the Select Taxonomy<\/strong>. In this field, select the desired property type. We leave the default \u201cCottage.\u201d<\/p>\n\n\n\n

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

Adjust other settings, and whenever you are ready, press the \u201cPublish<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n

Check the Result<\/h2>\n\n\n\n
\n

Open the built page\/template on the front end. Since we set the property type to \u201cCottage,\u201d we see options associated with this term.<\/p>\n\n\n\n

<\/a><\/div>\n\n\n\n

Select one or more filter options to see if it works.<\/p>\n\n\n\n

Now, our Listing Grid <\/strong>shows only cottages with the \u201cSelf Catering\u201d meal type.<\/p>\n\n\n\n

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

That\u2019s all; now you know how to use JetSmartFilters\u2019 <\/em>Hidden Filter <\/strong>with JetEngine\u2019s <\/em>Components <\/strong>on your WordPress website.<\/p>\n","protected":false},"excerpt":{"rendered":"

Learn how to use JetSmartFilters\u2019 Hidden Filter with JetEngine\u2019s Components feature on your WordPress website.<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[568,420],"yoast_head":"\nHow to Use Hidden Filter with Components \u2014 JetSmartFilters | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to use JetSmartFilters\u2019 Hidden Filter with the Components feature from JetEngine for WordPress websites.\" \/>\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\/jetsmartfilters\/how-to-use-hidden-filter-with-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Hidden Filter with Components \u2014 JetSmartFilters | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to use JetSmartFilters\u2019 Hidden Filter with the Components feature from JetEngine for WordPress websites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-use-hidden-filter-with-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-07T08:58:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/11\/taxonomy-terms-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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-use-hidden-filter-with-components\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-use-hidden-filter-with-components\/\",\"name\":\"How to Use Hidden Filter with Components \u2014 JetSmartFilters | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-02-12T10:07:13+00:00\",\"dateModified\":\"2025-11-07T08:58:14+00:00\",\"description\":\"Learn how to use JetSmartFilters\u2019 Hidden Filter with the Components feature from JetEngine for WordPress websites.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-use-hidden-filter-with-components\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-use-hidden-filter-with-components\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-use-hidden-filter-with-components\/#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 Use Hidden Filter with Components\"}]},{\"@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 Use Hidden Filter with Components \u2014 JetSmartFilters | Crocoblock","description":"Learn how to use JetSmartFilters\u2019 Hidden Filter with the Components feature from JetEngine for WordPress websites.","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\/jetsmartfilters\/how-to-use-hidden-filter-with-components\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Hidden Filter with Components \u2014 JetSmartFilters | Crocoblock","og_description":"Learn how to use JetSmartFilters\u2019 Hidden Filter with the Components feature from JetEngine for WordPress websites.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-use-hidden-filter-with-components\/","og_site_name":"Help Center","article_modified_time":"2025-11-07T08:58:14+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/11\/taxonomy-terms-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-use-hidden-filter-with-components\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-use-hidden-filter-with-components\/","name":"How to Use Hidden Filter with Components \u2014 JetSmartFilters | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-02-12T10:07:13+00:00","dateModified":"2025-11-07T08:58:14+00:00","description":"Learn how to use JetSmartFilters\u2019 Hidden Filter with the Components feature from JetEngine for WordPress websites.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-use-hidden-filter-with-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-use-hidden-filter-with-components\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-use-hidden-filter-with-components\/#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 Use Hidden Filter with Components"}]},{"@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\/47011"}],"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=47011"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=47011"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=47011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}