Products in the Same Product Categories as the Current Product in Bricks

This Pro tutorial provides the steps to output WooCommerce products related by the current product's categories when viewing single product pages in Bricks.

We are going to ensure that

• the Section gets rendered only if there is at least 1 related product.
• the "Related Product" heading gets dynamically updated to "Related Products" when there is more than 1 related product.

Bricks builder comes with a Related Products element. This tutorial is meant for the case when you want to instead build the layout of the related product visually using a Query Loop for more control of what info should appear for each product and in what order.

Step 1

Edit your single WooCommerce product template with Bricks.

Copy the following JSON of the fully-built Div from our test site and paste it in your template.