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

Add the following in child theme's functions.php (w/o the opening PHP tag) or a code snippets plugin:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Instant access to 390+ Bricks code tutorials with BricksLabs Pro