Opens in a new tab
27th Oct '22
/
9 comments

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.

top-level-product-categories-bricks

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 access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Stock Quantity Block for WP Grid Builder

Stock Quantity Block for WP Grid Builder

In the unofficial WP Grid Builder Facebook group a user asked: Is it possible to show stock quantity on the card? I can't find it…
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
On Sale Products Bricks Query Loop

On Sale Products Bricks Query Loop

Looking to show only the WooCommerce products that are on sale in Bricks? Set up a query loop, enable the PHP query editor and paste:
Categories:
Pro
Similarly Priced WooCommerce Products Bricks Query Loop

Similarly Priced WooCommerce Products Bricks Query Loop

How to show products priced within a percentage of the current single product's price.
Categories:
Pro
How to Modify Products Element Query in Bricks to Output Child Products

How to Modify Products Element Query in Bricks to Output Child Products

This Pro tutorial provides the steps to limit WooCommerce products output by Bricks' Products element on single product pages to only the children of the…
Is WooCommerce Cart Empty Condition in Bricks

Is WooCommerce Cart Empty Condition in Bricks

Updated on 5 Nov 2024 Looking to conditionally render an element depending on whether the user's cart is empty or not when using WooCommerce? Add…
Pro
Quick View Buttons for Woo Products in Bricks

Quick View Buttons for Woo Products in Bricks

This Pro tutorial provides the steps to set up quickview buttons for products in a Woo (formerly, WooCommerce) products grid using Bricks' Popups and Interactions…
Categories:
Pro
Out of Stock Ribbon for WooCommerce Products in Bricks

Out of Stock Ribbon for WooCommerce Products in Bricks

Show an “OUT OF STOCK” ribbon for WooCommerce products that are output via the Products element on listing pages.
Categories: