[WooCommerce] Up-Sells and Cross-Sells Query Loop in Bricks

Updated on 25 Jul 2024

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.

Upsells and cross-sells for products can be set in the Product data meta box in the Linked Products tab.

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).

Edit your single product template with Bricks.

Upsells

Set up a query loop for outputting the products set as upsells for the current product.

Here's a sample JSON of a section you could copy and paste. Delete the Products pagination element after pasting.

This will show the latest 10 products. In the next step, we shall limit these to only up-sells of the current product.

Click on the query icon for your product block and enable PHP query editor.

Paste: