How to Create Query Builder Listing Template
This guide will provide information about creating a Query for the Listing Grid with Query Builder from the JetEngine plugin.
Before you start, check the tutorial requirements:
- WooCommerce plugin (Free version) installed and activated
- JetEngine plugin installed and activated
In this tutorial, we will create a Listing template for the JetEngine custom query to show featured WooCommerce products via Listing Grid.
There may be a case when you know several Listing Grid widgets need to show items using the same custom query. So, instead of building the custom query, you can create a Listing Template with the “Query Builder” source.
Create Query with Query Builder
Head to WordPress Dashboard and hover over the JetEngine label.
Find and select the Query Builder tool from the list.
![jetengine query builder tab in wordpress dashboard](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_1-1.png)
Click “Add New” to build a new query.
![add new button in the queries list](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_6-1.png)
We want the listing to be for WooCommerce products, so we pick “WC Product Query” as Query Type.
![name and query type in general settings of the query](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_5-1.png)
Choose a Product Status in the General tab if it is needed. In the current case, the “Publish” status will be used.
![product status in the query](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_7-1.png)
Now there is a need to make the query find only featured products.
Proceed to the Specific tab and hit “Add new.”
![specific settings tab](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_4-1.png)
Now let us set the Feature as “Featured.”
![feature setting](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_9-1.png)
Do not forget to set its Status.
![feature status](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_8-1.png)
The basic setup for the query is done. Hit the “Add Query” button to save the changes.
![add query button](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_3-1.png)
Now let’s build a Listing Template.
Create Listing Template with Query Builder Source
Head to WordPress Dashboard > JetEngine > Listings. Press the “Add New” button.
In the opened pop-up, set “Query Builder” as a Listing source. Select a previously created Query from the list, set the Listing item name, and choose a needed page builder in the Listing view selector. Then push the “Create Listing Item” button below.
![query builder listing item pop-up](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_1-1-1.png)
Dynamic Widgets & Dynamic Tag Product Usage
In the Listing template, add a Dynamic Field widget to output a product title using the “Title” option from the “Woocommerce” section of the Object Field list.
![woocommerce title object field](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_21.png)
With the help of the Dynamic Image widget, a “Featured Image” of Woocommerce products can be displayed.
![woocommerce featured image](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_22.png)
You can also use Dynamic Tags to show the data of a product dynamically.
For example, add a Text Editor widget, press the “Dynamic tags” icon and select the “Current Object Field” option from the appeared list.
By selecting the “Categories” option under the “Woocommerce” section of the Field, you can output the product categories of a product.
![woocommerce categories current object field](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_2-1.png)
Using the same dynamic tag, you can also display other fields of a Woocommerce product. Feel free to add Before and After to the dynamic value to apply a needed format.
![advanced settings of the current object field tag](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_31.png)
Another way to show a dynamic option in the Listing Template for a custom query is to use a Shortcode created via JetEngine’s Shortcode Generator.
Following the WordPress Dashboard > JetEngine path, you can find the Shortcode Generator tab, where the shortcode can be generated.
The shortcode may be helpful if you want to use values from two fields with just one widget. In this case, we want to show the following message:
“Hurry up! The product is still (stock_status field) but there are only (stock_quantity field) left!”
![shortcode generator tab](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_34.png)
After generating the shortcodes, we got this result and added it to the Text Editor field.
“Hurry up! The product is still
but there are only left!”
![text editor with generated shortcode](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_35.png)
Display the Listing Grid with the Listing for query on front end
The Listing Template is completed. Now we can output it on a needed page or template using the Listing Grid widget.
A custom query of Query Builder does not need to be applied to the Listing Grid widget since the Listing template itself is built based on the custom query and keeps the custom query data.
So you only need to select the Listing template in the Listing Grid widget.
![listing grid widget settings](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_36.png)
Now the Listing Grid shows Woocoomerce products using the Listing Template based on a custom query created via Query Builder of the JetEngine plugin.
![query builder listing on the front end](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Screenshot_37.png)
That’s all; now you know how to create a Query Builder Listing Template based on the JetEngine plugin functionality for your WordPress website.