24th Aug '23
/
2 comments

Featured Products in Bricks Query Loop

This Pro tutorial shows how WooCommerce products that are marked featured can be output in a Bricks query loop.

Note: The built-in Products element comes with a control for showing just the Featured products. But if you want more customizability w.r.t how the products are shown, a query loop is typically used.

On the front end after implementing the tutorial:

There are at least two ways of marking products as featured:

  1. by clicking on the star icon in the products list admin screen
  2. by clicking on "Edit" under "Catalog visibility: undefined, Featured" in the Publish meta box when editing individual products and ticking "This is a featured product".

Step 1

Edit your template/Page with Bricks.

Add a Section and inside its Container, a Block.

Since the element on which query loop is enabled becomes the repeating item, you may want to wrap it in a Container.

Enable query loop.

Post type: Products

Posts per page: -1 (to show all the featured products)

Add a Post Title linked to the post permalink or a Basic Text element in the Block having:

{post_title:link}

Step 2

Add the following in child theme's functions.php or a code snippets plugin:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 610 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

[WooCommerce] Product Category Image Background in Bricks

[WooCommerce] Product Category Image Background in Bricks

How to set up the product category thumbnail image as the background of a Section.
Categories:
Pro
Posts Published in the Last x Days in Bricks

Posts Published in the Last x Days in Bricks

Updated on 1 Feb 2024 This Pro tutorial shows how to limit the posts output by either the Posts element or a Query Loop in…
Pro
[WooCommerce] Sale price dates in Bricks

[WooCommerce] Sale price dates in Bricks

Outputting start and end sale price dates (if set) for WooCommerce products.
Categories:
Appending WooCommerce Endpoint Names To My account Page Titles in Bricks

Appending WooCommerce Endpoint Names To My account Page Titles in Bricks

Adding the WooCommerce endpoint names, “Orders”, “Downloads” after the WooCommerce ‘My account’ Page’s title text at the various endpoint URLs.
Categories:
Condition based on WooCommerce Product Attributes in Bricks

Condition based on WooCommerce Product Attributes in Bricks

How to display elements only when a specific WooCommerce product attribute is selected.
Categories:
Bricks single mode – Limiting the number of posts to 1 in the editor

Bricks single mode – Limiting the number of posts to 1 in the editor

Creating a "Single Mode" for Bricks query loops to make sure only one post is rendered in the builder.
Pro
Related FAQs on Product pages Based on Product Category Taxonomy in Bricks

Related FAQs on Product pages Based on Product Category Taxonomy in Bricks

On product pages, we show all the FAQs associated with the current WooCommerce product's product categories.
Categories:
Pro
Similarly Priced WooCommerce Products Bricks Query Loop

Similarly Priced WooCommerce Products Bricks Query Loop

How to show products priced within a percentage of the current single product's price.
Categories: