Category: Elementor

When building a WooCommerce store with Elementor and JetEngine by Crocoblock, you might want to display related products dynamically based on the current product’s category. In this tutorial, I’ll guide you through creating a custom query using JetEngine Query Builder and implementing it on your single product page.

Step 1: Create an Archive Page for Products

First, you need to create an archive page for your WooCommerce products using Elementor. This page will be designed to display all products, and later we will integrate a related product section.

1. Go to Templates > Theme Builder in WordPress.
2. Click on Add New Template and choose Archive.
3. Use Elementor to design the archive layout according to your needs.
4. Use a Listing Grid (created with JetEngine) to display products.
5. Publish the template and assign it to the product archive.

Step 2: Create a Query in JetEngine Query Builder

Now, let’s create a query that fetches related products dynamically based on the current product’s category.

1. Navigate to JetEngine > Query Builder in the WordPress dashboard.
2. Click Add New to create a new query.
3. Set a name for the query (e.g., “Related Products”).
4. Choose Query Type: Posts Query.
5. In the Post Query section, go to the General tab and:
   • Select Post Type: Products (since we’re working with WooCommerce products).
6. Switch to the Tax Query tab:
   • Click on Add New.
   • Select Taxonomy: product_cat (Product Categories).
   • Set Field: Term ID.
   • Set Terms: Current Terms -> Products Categories.
   • Set Compare operation: IN.
7. Save the query.

Step 3: Add the Query to the Single Product Page

After creating the query, the next step is to display the related products on the single product page using Elementor.

1. Go to Templates > Theme Builder and edit your Single Product Page template.
2. Drag and drop the Listing Grid widget (created with JetEngine) onto the page.
3. In the Query section of the Listing Grid settings:
   • Select Custom Query.
   • Choose the query you created earlier (“Related Products”).
4. Adjust the layout and styling as needed.
5. Save and update the template.

Conclusion

By following these steps, you can dynamically display related products based on the current product’s category using JetEngine Query Builder. This method ensures that your WooCommerce store provides a seamless shopping experience with relevant product recommendations.