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.
Step 2 — Click the Add New Template option on the Jet Woo Templates screen.
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.
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.
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.
Step 1 — Switch to the Jet Woo Builder tab.
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.
Step 3 — Here you can as well set the Number related and upsell products to show in the Other options block.
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.
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!