Our themes relies heavily on two powerful features from Kadence Blocks Pro: the Query Loop and the Query Card.
These tools give you full control over how products, blog posts, or custom content are displayed on your website. Instead of relying on rigid, pre-coded templates, you can visually design exactly how a list of products should look directly within the WordPress editor.
What is the Difference?
To use these tools effectively, it is important to understand the two components:
- The Query Loop (The Engine): This block acts as the “manager.” It decides what content to show. You tell it: “Show me the latest 8 products from the ‘Watches’ category.”
- The Query Card (The Design): This block acts as the “template.” It decides how a single item looks. You design one card (e.g., placing the image at the top and the price at the bottom), and the Query Loop automatically repeats this design for every item in the list.
Key Features
- Dynamic Content: Automatically pull in data like Product Titles, Prices, Featured Images, or Custom Fields without typing them manually.
- Visual Editing: Design your product archives using standard blocks (like Headings, Images, and Buttons) instead of writing PHP code.
- Filtering: Easily sort content by category, tag, author, or date.
- Responsive Control: Adjust the grid layout specifically for mobile, tablet, and desktop views.
How to Use the Query Loop
We use Query Loops for many sections, such as “New Arrivals” or custom product category pages. Here is how you can work with them:
1. Add or Select the Block
In the Gutenberg editor, add a Query Loop block (or select an existing one). When adding a new one, you will be asked to choose a post type. For a shop, you will usually select Products.
2. Configure the Query Settings
With the Query Loop block selected, look at the block settings panel on the right. Here you define the logic:
- Post Type: Ensure this is set to what you want to display (e.g., Products).
- Order By: Sort by Date, Title, Menu Order, etc.
- Filters: Limit the results to specific Categories or Tags (e.g., only show products tagged “Sale”).
- Number of Items: Define how many items should appear on the page.
3. Design the Query Card
This is where the magic happens. Inside the Query Loop, click on the Query Card.
Any changes you make to this one card will immediately reflect on all other items in the loop. You can drag and drop blocks inside the card. For example, if you add a “Kadence Advanced Text” block, you can set it to dynamically display the Product Title instead of static text.
4. Preview and Save
Use the device preview buttons in WordPress to check how your grid looks on mobile phones. Once satisfied, save your page.
Global Linking and Reusability
It is crucial to understand that Query Cards function as global templates. This feature ensures design consistency across your entire site but requires careful handling.
Changes Affect All Instances
A Query Card is often linked to multiple Query Loops throughout your website. For example, you might use the same “Product Card Design” for the “New Arrivals” section on your homepage and the “Best Sellers” list on your About page.
Important: If you edit the design of a Query Card in one location – such as changing a button color or font size – this change is automatically applied to every other Query Loop that uses this specific Query Card. You edit the design once, and it updates everywhere globally.
Best Practice
If you want to create a unique layout for a specific section without affecting the rest of your site, you should create a new Query Card for that specific loop instead of editing an existing one.
Important: Query Instances and Card Assignments
There is a strict relationship between a specific Query Loop instance and its assigned Query Card. If you reuse a specific Query Loop configuration (for example, a saved pattern named “6 Latest Bestsellers”) across multiple pages, it is linked to the specific Query Card you originally selected (e.g., “Product Card 1”).
You cannot simply swap the card for just one instance.
If you edit an instance of the “6 Latest Bestsellers” query on one page and switch the design to “Product Card 2,” this change will automatically apply to every location on your site where that specific “6 Latest Bestsellers” query is used.
The Solution:
If you want to display the same data (the 6 latest bestsellers) but with a different design (Product Card 2) on a specific page, you must create a new, separate Query Loop (e.g., named “6 Latest Bestsellers – Alternate Layout”). This allows you to assign a different card to the new loop without affecting the layout on other pages.
Why We Use This in Our Themes
We chose this method for our themes to give you maximum flexibility. Traditional themes lock you into a specific product grid layout. With the Query Loop system, you can change the position of the “Add to Cart” button, hide the price, or add custom badges without needing a developer.
By combining this with WooCommerce and custom fields, you can build professional, data-driven shop pages that are easy to manage and completely unique to your brand.