Top-Level Product Categories in Bricks

Updated on 4 Nov 2022.

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:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get full access to all 220+ Bricks tutorials with BricksLabs Pro


  • hongbo hu

    How to add category href links on the image for the title?

    • A

      That is already taken care of.

      After you paste the json code in your Bricks editor, you can see that the Block element has been set to be linked to term archive URL.

  • hongbo hu

    Hello, Sridhar. I am just starting to learn the bricks, and I don’t know where to paste the code in Step 2.

    • A

      You can click anywhere in the canvas (the middle area in the Bricks editor) and paste or click on an empty area in the structure panel on the right and paste.

Leave your comment