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:
► bit.ly/3foiRWg
-------------
Template used:
Only Books - Dynamic Bookstore Template for Elementor
► bit.ly/3h0yeET
-------------
Choose Crocoblock subscription:
►bit.ly/3DOnIta
-------------
☕LIKED THIS VIDEO? BUY JULIA A COFFEE
► www.buymeacoffee.com/JuliaMcHale
-------------
► 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
►bit.ly/3Ufh0C0
JetEngine playlist
► • JetEngine | Tutorials
------
Join us here:
► FB Community: / crocoblockcommunity
► Facebook: / crocoblock
► Twitter: / mrcrocoblock
► Instagram: / mrcrocoblock
► LinkedIn: / crocoblock

[@pixelgap]

Thank you. Straight forward and clear tutorial.

[@juancarlosrodriguez5022]

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

[@Crocoblock]

Thank you so much for your feedback! We glad you like it 🙂

[@hex699]

@@Crocoblock Instead of just replying to the great comments! answer so many questions of people who have already have issues and questions just like me!

[@imrulkaisar]

Thanks CrocoBlock. This is very important feature for me.

[@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

[@victorbardolle6038]

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.

[@wasiqkhan886]

nice and helpful

[@mateocardenasmusic]

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!

[@nene1092]

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

[@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?)

[@Aziz-Ahmed-UK]

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

[@Atractiondj]

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

[@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

[@Crocoblock]

Thank you for your feedback! The Layout switcher for Listing grid widget is on our roadmap. So stay tuned 😉

[@colinh2203]

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

[@monopen7838]

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?

[@aaronsterling-ce6du]

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.

[@mbh1156]

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

[@serusok]

Б'ютіфульно!

[@OfirCohen-ir6lm]

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

[@Crocoblock]

well, it's not clear enough from your description, so could you please proceed to our support team? crocoblock.com/help-center/

[@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! 😊

[@nomer9998]

How to add filters to such a listing? It doesn't work correctly for me

[@Mahalweb]

you should put a course on udemy ornized from zero like build 5 or 10 different website im still learning crocoblock but i still didnt get it very well and on youtube video not organised for base level to advanced

[@Abdulwppixel]

Hi, I am looking for a solution of Displaying only on sale products in jetengine listing grid. Anyone with a solution please?

[@AndresBurbano]

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

[@Crocoblock]

Hi! Thank you for your feedback ☺ Please, contact our support on this issue - crocoblock.com/help-center/

[@lakoresto6169]

We need JetEngine and JetSmartFilters to be fully compatible with Bricks 😢

[@user-mz1qn6di6r]

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!

[@Crocoblock]

Hi! Thank you for your feedback 🙂 Please, check the following tutorials: crocoblock.com/knowledge-base/articles/creating-custom-post-type-archive-template-with-jetengine-listing-grid/ crocoblock.com/knowledge-base/articles/how-to-create-an-archive-page-for-the-custom-taxonomy/ crocoblock.com/knowledge-base/articles/how-to-choose-the-needed-post-relations-and-set-them-with-jetengine-plugin/ If you'll face any difficulties, please contact our support crocoblock.com/help-center/

[@SuccessfulMindandBody]

How did you manage to shorten the timer? it is impossible

[@norbgs07]

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.

[@Crocoblock]

We kindly ask you to contact our support team to check your settings and provide a solution crocoblock.com/help-center/

[@willysotocruz1703]

☹Sorry I can't find the countdown widget in Jet Engine

[@morlibittan3107]

How I can add quantity text with the add to cart. where can I find help on this?

[@Crocoblock]

Hello! Contact our support team please for clarification of your question- crocoblock.com/help-center/.

[@qinpra]

Hey everyone. Need help 👋 I set the number of post to 3 but not working like in 5:54 anyone aware how to solve this?

[@Crocoblock]

Hello! If you enabled the Custom Query for this listing grid prnt.sc/nmWzH68StKF1, set the number of posts in Pagination tab of the Post query, please.

[@amitjangra6454]

Does Jet engine work with oxygen builder?

[@Crocoblock]

Hey Amit, no, unfortunately we don't have integration with Oxygen.

[@orelhassid]

What about variable products?

[@Crocoblock]

variable products can be shown in the Product Grid or Product List widgets only crocoblock.com/knowledge-base/tips-and-tricks/fail-to-add-variation-swatches-to-jetwoobuilder-products-grid-or-list/

[@Pedant_Patrol]

I'm having trouble with updating my JetEngine plugin. Any help?

[@Crocoblock]

Please get in touch with support team, they will help you to solve the issue: support.crocoblock.com/support/home/

[@Pedant_Patrol]

@@Crocoblock- Thanks!

[@clonerf1895]

timer not working in new elementor update?

[@Crocoblock]

The widget should work fine with the latest version of Elementor. Could you please contact our support team crocoblock.com/help-center/ so we could check this issue on your website and give you a solution?

[@IulianH]

How to list products by current category ?

[@Crocoblock]

If you display products with the help of the Listing Grid widget, you should enable this toggle prnt.sc/sEBozi-qL-0N to display correct products on the current category page.

[@Mahalweb]

why dont make a video how to build the template from zero all the website

[@Crocoblock]

Hi! Thank you for your feedback! Could you please specify in what template are you interested in?

[@Mahalweb]

@@Crocoblock this one that you working on it only book or any template but should video all template all part not just some parts like this one i like video from 0 to finish the website

[@nomer9998]

it's a good idea to understand how everything works, you need to watch the whole youtube