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 625 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
[WooCommerce] Sticky on Scroll Add to Cart section in Bricks

[WooCommerce] Sticky on Scroll Add to Cart section in Bricks

Setting up a sticky section that fades in when scrolling down and fades away when scrolled to the top.
Categories:
Pro
Posts Grouped by Authors in Bricks

Posts Grouped by Authors in Bricks

This Pro tutorial for Bricks users provides the steps to loop through users and inside that, through posts whilst setting the inner query's author parameter…
[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:
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:
Pro
WooCommerce Products Live Search in Bricks

WooCommerce Products Live Search in Bricks

This Pro tutorial provides the steps to set up a live search for WooCommerce products in Bricks. Note: Bricks' live search works with any type…
Categories: