Building WooCommerce Products Listings with JetEngine

To build a fully functional WooCommerce products listing and display it on the frontend you’ll need one JetEngine plugin only.

💡 Tip. Make sure you have the JetEngine Query Builder module activated.

Proceed with this tutorial to know how to:

✅ Use Query to create WooCommerce query listing
✅ Pull the data from WooCommerce, using Dynamic Tag widget
✅ Display the newly created WooCommerce product listing in a listing grid on a specific page
✅ Style the product price with a CSS class
✅ Add a timer with a countdown to boost sales

Stay tuned not to miss more cool and useful tutorials from Kate and Julia!
-------------
The code to use:

.listing-price {
color: var ( —e-global-color-accent );
}

.listing-price ins {
text-decoration: none;
border-bottom: none;
font-style: normal;
}
-------------
Get JetEngine plugin:

-------------
Template used:

Only Books — Dynamic Bookstore Template for Elementor

-------------
Choose Crocoblock subscription:

-------------
☕LIKED THIS VIDEO? BUY JULIA A COFFEE
-------------

► TIMESTAMPS

00:00 Brief overview
00:36 Building a WooCommerce Product Query Listing
05:14 Displaying the listing template in the listing grid
07:20 Adding a timer with a countdown
11:07 Creating custom WooCommerce badges

-------------
JetEngine Knowledge Base

JetEngine playlist
——————

Join us here:

[juancarlosrodriguez]

I'll never get tired of saying this... Crocoblock rocks! Thanks for the tutorial, Juliet, and God bless.

[pixelgap]

Thank you. Straight forward and clear tutorial.

[imrulkaisar]

Thanks CrocoBlock. This is very important feature for me.

[victorbardolle]

There are 2 issues with the timer countdown and the sale badge :
- Timer countdown works with UTC time if you use the meta key "date on sale to". It means the end of the timer is not set at your local timezone (but the sale price is).
- The sale badge works with on sale products, but if you plan a sale date ahead of time, the badge is still displaying because the meta key "plain sale price" exist but the sale hasn't started yet.

[kookito]

Thanks for the video, could you make another explaining the queries for featured products, related products, up/cross sells etc...even with mixed categories...thx

[nene]

Thank you very much the video is excellent, but I had 2 doubts

1- How could I show a badge for the products that are part of specific product categories? What options would you use in Dynamic Visibility?
2- How do I show only one or some product categories or subcategories in the product listing?


Thank you very much for your reply

[OfirCohen-irlm]

Hi, Thank you.
However I would like to know what you setup in "Image Size > Kava-thumb-justify" and how you do it.
Thanks

[macabe]

Thanks for this tutorial. Do you guys know if there is a way to display a discount percentage badge instead of the regular price? I think that looks nicer and it would be great to have it!

[Aziz-Ahmed-UK]

Is there any option to display the listing posted date as in “Time Ago" format? like 3 hours ago etc.

[samuelepellizzari]

Super useful and pretty straightforward tutorial! Thanks @Crocoblock! How about adding and alternate layout option to the listing grid? I know it can be achieved with JetTabs, but then I should make a different section with a different query on every page I need it. Instead, an alternate layout option would allow to show the same contents, selected by the same query, but in two different ways (think of showing the book’s excerpts, for instance), only by pressing a button

[colinh]

Works great, but can't use on Archive pages. Is there another step to use on Archive Pages?

[AndresBurbano]

Thnaks!. This is Great. How can I use it with related productos? Thank you again.

[Atractiondj]

Will be great to create shop without woo but with cart, check out without payment gateway

[dionstr]

Thanks for the tutorial. I can not find out how to create an archive products template and to show the related posts of each taxonomy automatically. How this can be done? Please help!

[aaronsterling-cedu]

I just bought your plugins and now I'm conflicted. I have created most of my designs with elementor pro. Now, 1- should I create all woo pages with woobuilder, or should I stick to elementor theme builder. All I want to do is add smart filters in my products archive page in elementor theme template.

[simeon.benevrekov]

Can we use woo jet smart filters with the listing grid ? Is there any disadvantages to use the “listing grid” widget for shop templates and not the “products grid” widget ?
Great tutorial! 😊

[mbh]

my products has variables how can i add that one also i would want to show the list only to that category. I am using woocommerce

[norbgs]

I followed your instructions exactly. There is1 issues that I'm struggling with. When someone writes a review & I approve it, I can see the review in the "Reviews Listing" element, but it does not update the "Rating" element aka the stars.

[monopen]

I created a listing to show woocommerce products. everything is work but i have an issue: listing grid don't show placeholder image. so the grids that is without image, height is smaller than another grid. what should i do?

[StevenHoste]

Does the add to cart button created here work with variable products? (as in: will it have a dropdown menu to select the variation?)