Up-Sells and Cross-Sells Query Loop in Bricks


Bricks has a "Product up/cross-sells" element that is built in.

If you want more control to visually build your WooCommerce product upsells and cross-sells, it is possible to use the Query Loop feature.

This Pro tutorial provides the steps to set up up-sells and cross-sells in the single product template. We are going to ensure that the Section having the heading and the query loop will be output only if there's at least 1 up-sell product (if showing up-sells) or at least 1 cross-sell product (if showing cross-sells).

Step 1

Edit your single product template with Bricks.

Copy this JSON of the Section labeled "Up-sells" from our test site and paste it.

This will output all products. In the next step, we shall limit these to only up-sells (or cross-sells) of the current product.

Step 2

This is a Pro members-only tutorial.

To get full access, login below or sign up for a Pro Account

Leave the first comment