Back to contents

WooCommerce JetWooBuilder settings. How to create and set the related products and up-sells product page templates

This tutorial uncovers the steps you should take in order to set the related and up-sells product page templates, using JetWooBuider.

JetWooBuider is a perfect plugin which helps to display the WooCommerce products in the most attractive form. With it, you can easily create and set the related and up-selling product templates.

But let’s first make sure we know what are the upsells and related products.

What are WooCommerce upselling and related products?

Upsells are those products that are recommended as additions to the currently viewed products.

Related products are the products that have the same tags or categories as the products that are currently visible on the page. The aim of such products is to display more goods and urge the customers to continue shopping, thus spending much more money.

Follow the instructions carefully and you will find out how to create the related and up-sells product pages. And also how to set them for displaying on the Single Product page.

Setting the related products and up-sells templates

Step 1 — Select the WooCommerce block from the WordPress Dashboard and click the Jet Woo Templates option.

jetwootemplates wordpress dashboard

Step 2 — Click the Add New Template option on the Jet Woo Templates screen.

jetwootemplates setup

Step 3 — Choose the Archive page template in the Add Template dropdown and input a template title (e.g., Up-sell) in the Template Name field.

archive product template setup

Step 4 — Select one of the pre-designed layouts available below that define how the upsells and related products will be displayed as a result.

Step 5 — Then, click the Create Template button. After that, Elementor editor will open and you will be able to customize the appearance of your upsell product. While creating a template don’t forget that this is only one of the products that are to be shown in the grid or listing.

Step 6 — Click the Publish button in order to save the progress and move back to the WooCommerce block and click the Settings option.

Adding upsells products to the Single Product template

Step 1 — Open any product to which you want to add the upsells.

Step 2 — Scroll down and navigate to the Product data > Linked Products block.

woocommerce products setup

Note, that Related products will be displayed in case the products have mutual categories or tags.

Step 3 — Select the products in the Upsells field and save changes.

Customizations

Step 1 — Switch to the Jet Woo Builder tab.

jetwoobuilder settings

Step 2 — Scroll to the Related and Up-Sells Products Template section and select the page you’ve just created to set it as a global related products template.

jetwoobuilder template adjustment

Step 3 — Here you can as well set the Number related and upsell products to show in the Other options block.

jetwoobuilder settings other options

Step 4 — Click the Save changes button and that’s it.

Step 5 — Now you need to open the Single Product page template for editing (to do it go back to WooCommerce > JetWoo Templates) and drop the Single Upsells or Single Related products to the canvas.

woocommerce shop layout

Please, make sure that the product which is shown as a sample when you edit the template has the upsells and the related products set. Then save the changes.

Now, you can go to your website, navigate to the Single Product page and have a look. Enjoy!