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:

// Limit the products to only those that are featured.
add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
	if ( $element_id === 'vbxxjs' ) {
		// get the full list of product visibility term ids
		$visibility_term_ids = wc_get_product_visibility_term_ids();

		$tax_query['product_visibility'] = [
			'taxonomy' => 'product_visibility',
			'field'    => 'term_taxonomy_id',
			'terms'    => [ $visibility_term_ids['featured'] ],
		];
		
		$query_vars['tax_query'] = $tax_query;
	}

	return $query_vars;
}, 10, 3 );

Replace vbxxjs with the Bricks ID of the query loop element.

Note: Products set as Hidden will not be output.

Reference

/wp-content/themes/bricks/includes/woocommerce/helpers.php