How to Use Hidden Filter with Components

Initially, we built a custom “Property Type” taxonomy for the “Properties” Custom Post Type (CPT), added terms, and attached posts to them. This taxonomy will later be used as a source for the Hidden Filter.

Additionally, we add the “Meals” taxonomy, create terms, and attach posts to them. We will use this taxonomy as a source in a Checkbox Filter, which will also be displayed in the component.

Check the detailed guide on How to Create a Custom Taxonomy.

Next, we want to build a Listing item that will be added later in the Component.

Go to WordPress Dashboard > JetEngine > Listings/Components and press the “Add New Item” button.

We leave the default “Posts” Listing source, select “Properties” Custom Post Type in the From post type field, set the Listing item name to “Properties Listing item,” and pick the “Elementor” option as the Listing view (you can use any preferred option).

Click the “Create Listing Item” button to proceed to the editor.

In the editor, we add dynamic widgets that display post metadata.

Once the listing item is ready, press the “Publish” button.

Now, we want to build a filter that will later be added to the Component and applied to the Listing Grid in addition to the Hidden Filter.

Set the Filter Name (here, “Checkboxes Meals”) and select the desired Filter Type. For instance, in this case, we pick the “Checkboxes list” option.

We pick “Taxonomies” as the Data Source and “Meals” as the Taxonomy.

Also, we set the Filter Labels and press the “Update” button to save the filter.

Head to WordPress Dashboard > JetEngine > Listings/Components and press the “Add New Component” button.

Set the Component name (here, “Component”) and select the Component view (here, “Elementor.”)

To proceed to the editor, press the “Create Component” button.

In the editor, add the Hidden Filter widget to the page. 

In the Content settings, select “JetEngine” in the This filter for selector. 

We want to use the “Property Type” taxonomy as the source, so we select the “Taxonomy” Argument Type and set the Name to “property-type,” since that is the Taxonomy Slug set when creating the custom taxonomy.

In the Value field, paste the %component_control_value|select-tax|||% macro, where the “select-tax” part will be used as the Control Name of the “Select” control we will add to the component a little later. You can use any preferred Control Name, so change it accordingly.

Also, set the Query ID that will later connect the filters and the provider. Here, we type the “listing” Query ID, but you can use any preferred one.

Next, we add a Checkboxes Filter to filter content further, not only by the “Property Type” taxonomy in the Hidden Filter, but also by the “Meals” terms.

Pick the created filter in the Select filter field and select the “JetEngine” provider in the This filter for field.

Also, we set the Query ID to “listing” to connect this filter to the Listing Grid.

Make other changes if needed.

Add a Listing Grid widget to the page.

Pick the built Listing and adjust other General settings if needed.

If you have set the Query ID in the filters, let’s connect them to the Listing Grid. 

Open the Advanced tab and paste the same value in the CSS ID field (here, “listing.”)

When all the widgets are added, we press the “settings” button next to the component name.

Open the Component Content Controls tab, then press the added “Text Control” to edit it.

Set the Control Label (here, “Select Taxonomy”) and the Control Value. Here, we set the Control Value that was used in the Hidden Filter macro to pass the selected taxonomy term to the Listing Grid, “select-tax”.

Pick the “Select” Control Type and move to the Options textarea field.

Here, set the needed options in the “1::Red” format, where “1” is the term ID and “Red” is its label.

For example, we add such options:

“bungalow::Bungalow

cottage::Cottage

house::House

resort::Resort

villa::Villa”.

These correspond to the terms’ Slugs and Names (names can be changed if desired, but the slugs should remain the same, as they connect the filter, Listing Grid, and terms).

We also set the “cottage” ID as the Default Value, so this option will be selected by default in the Component settings.

Press the “Publish” button when the component is ready.

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

Find and add the component you have built before to the page. 

You will observe the added component control in the settings. In our case, the Select Taxonomy. In this field, select the desired property type. We leave the default “Cottage.”

Adjust other settings, and whenever you are ready, press the “Publish” button.

Open the built page/template on the front end. Since we set the property type to “Cottage,” we see options associated with this term.

Select one or more filter options to see if it works.

Now, our Listing Grid shows only cottages with the “Self Catering” meal type.