Displaying related products is a really great idea when it comes to offering more products, in which the visitor might also be interested, at Single Post page or any other page of your website.
However, when you look for a way to do it, you don’t have too many options, especially if you’re up to creating a Single Product Page template. Sometimes things might turn out even a bit more difficult when you need to add related products to, say, Single Post template.
Yet, there is a tool that can definitely assist you in showcasing WooCommerce related products. It’s called JetEngine, and it’s already inside CrocoBlock package, so you don’t need to do any extra moves to get things done.
In this post we wanted to share the detailed instruction on adding related WooCommerce products to the Single Post page template built with Elementor. Feel free to follow the instruction below in order to display the related products.
Adding Related Products Using SKU
- Once you’re up to this task, make sure you’ve updated JetEngine plugin to v.1.1.1 or higher. It is needed in order for you to get access to more specific options that will allow you more freedom in displaying dynamic related WooCommerce products.
- Download the metabox using this link to your hard drive. It contains the JSON template for the new meta box with the repeaters inside it.
- Navigate to “JetEngine > Listings” and build the template for the single product (with the dynamic thumbnail image, link and other content). Save the template in order to preserve the changes.
- Now let’s navigate to “Products” in WordPress Dashboard. Here fill in the SKU for each of the products that exist on your site. The SKU field you need to fill in is located in “General > Inventory” block in the “Product Data”.
- After all the SKU IDs are created, please, navigate to the post where you want to add the related products. Here specify the Product SKU for each of the products in “Related Products List” repeater.
- Now we’re ready to add a listing to the “Single post” template. In order to do it, please, navigate to “CrocoBlock > My Library” (or, in case you’re using Elementor PRO, this can be done in “Elementor > My Templates”).
- Create a new template for the Single Post using the necessary content widgets. Then, drop the Listing Grid widget to the template in order to display the listing that features WooCommerce Products on the Single post page.
- In “Content > General > Listing” select the template for the single product you’ve created with JetEngine. Specify the needed number of columns, posts number to show, etc.
- Click Posts Query block and here add a new item by clicking “+Add item” button.
- Select Meta Query in the “Posts Query Type” dropdown.
- Enter the Key value for the query. It should be _sku in case you need to query the products by SKU. Please, note, that this is the default meta key for all the SKU fields in the database.
- Select In operator and define the value for the operator using %jet_related_products% macros code. Please, note that this is a custom macros, and in order for it to work you need to add the code available here to the functions.php file located in the theme’s folder.
- Now you need to set the “Widget Visibility” settings. In case the post hasn’t got any product SKU in the meta fields you don’t need the field to show anything (by default, it displays the recently added products). In order to avoid it just select “Hide Widget if > Query Is Empty” from the dropdown to hide the query in such cases. You can also select “Hide if no related option” and in the case the listing doesn’t show up unless there are any related products that satisfy the set query.
Adding Related Products Using Product ID
Another way to display the related products is to use the product ID. To do it, please, follow the steps described below.
- First, please, create a new listing item to use when you’d be displaying related products with JetEngine.
- Create a new meta box (similar to the one available in the sample as JSON for the SKU). E.g., we can create a new meta box with ‘related-products-list’ ID and here add a repeater with Text type field and name it ‘product_id’.
- Now let’s navigate to the posts to which we’ll be adding the related products using IDs. Fill in the product IDs in the corresponding fields.
You can view the ID for each of the product by just hovering over each of the products on “Products > All Products” in WordPress Dashboard.
- Then open the Single post template for editing and here drop Listing Grid widget to the page’s structure.
- Specify the template for the single product you’ve created with JetEngine.
- Open Posts Query block and here add a new item by clicking “+Add item” button.
- Select Posts Parameters in the “Posts Query type” dropdown and input the macros %jet_related_products% in the Include posts by IDs field. Here you can learn more about the way you can work with macros codes when using JetEngine plugin for Elementor.
- Now the related products are displayed for the post. And you can also tweak the product listing visibility in “Widget Visibility” block.
Hoping this tutorial will help you add the related products to the Single Post pages built with Elementor.