Top-Level Product Categories in Bricks

Updated on 18 Mar 2024.

This Pro tutorial provides the steps to show top-level WooCommerce product categories in Bricks using a query loop.

We shall output the product category image and name linked to the product category archive in a grid.

Step 1

Let us first define a custom function that returns the product category image.

Add this in your child theme‘s functions.php or a code snippets plugin:

function bl_get_product_category_image_url() {
	$thumbnail_id = get_term_meta( BricksQuery::get_loop_object_id(), 'thumbnail_id', true );
	
	return wp_get_attachment_url( $thumbnail_id );
}

Step 2

Copy this Section’s code and paste in the Bricks editor:

Here are the important bits:

Set the query type as “Terms”.
Number as 0 to ensure that *all* the matching product categories are fetched.
Parent as 0 to specify that only top-level terms be pulled.

The Image element’s source is being set to

{echo:bl_get_product_category_image_url}

References

https://developer.wordpress.org/reference/classes/wp_term_query/__construct/

https://wordpress.stackexchange.com/a/157821

https://woocommerce.com/document/woocommerce-display-category-image-on-category-archive/