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.
This is a BricksLabs Pro tutorial.
For full access login below or create your BricksLabs Pro account