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..

Side-by-side WooCommerce Quantity and Add to Cart in Bricks

Side-by-side WooCommerce Quantity and Add to Cart in Bricks

Looking to position the quantity input field and Add to cart button next to each other instead of one below the other in Bricks? Add…
Categories:
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:
How To Remove the Featured Image from WooCommerce Product Gallery

How To Remove the Featured Image from WooCommerce Product Gallery

Product Gallery on single product pages in WordPress include the product's featured image by default. If you are looking to exclude it so only the…
Categories:
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
Top-Level Product Categories in Bricks

Top-Level Product Categories in Bricks

How to show top-level WooCommerce product categories in Bricks using a query loop.
Categories: