Stand with Ukraine. Fight for freedom and democracy

Back to contents

JetWooBuilder: Products Grid Widget Overview


There are different ways to organise your E-store layout. One of them is a grid one. Reading this tutorial will help you know how to use Products Grid widget with JetWooBuilder plugin.

Products Grid is an amazing widget from the JetWooBuilder plugin. With this widget, you can create beautiful products grid layouts and use a products carousel, displaying WooCommerce products.

Continue reading to learn how to create a stunning Products Grid for your WooCommerce website.

First of all, you need to create your Shop page using JetWooBuilder. In order to do this, please check the following Shop Page creation tutorial.

When it is done, open the Shop page in the Elementor page builder, seek the Products Grid widget in the widget menu and drag it to the needed section.

Products Grid widget

After that, navigate to the General settings block. Here you can choose Products Preset and select the number of Columns. You can use the breakpoints feature to adjust the number of columns to any available device. This feature also works for Elementor Custom Breakpoint.

Additionally, enable Equal Column Height, and Add gaps between columns and rows.

JetWooBuilder Products Grid

Also, you’re able to Use Current Query. This option works only on the shop archive page and allows you to display products for current categories, tags, and taxonomies.

You can also select Products Number and Query products by different criteria, such as Featured, Sale, etc.

JetWooBuilder Products Grid settings

There’s an option to Order products by Date, Price, etc.

JetWooBuilder Products Grid in Elementor

Moreover, there’s an opportunity to Show Products Title, select Title Trim Type, and the number of Title Words. By the way, you can choose the Featured Image Size, Show Badges, Set sale badge text, choose Excerpt Trim Type and the number of words in it, Show Products Categories, Tags, Price, Rating, SKU and Add To Cart Button.

products grid widget settings in elementor

What is more, you’re able to Use default ajax add to cart styles. This option enables default WooCommerce styles for the “Add to Cart” AJAX button.

Finally, you can define the Not found message and Show Compare, Wishlist, and Quick View buttons. It is possible to set the order of the buttons so that more important will be placed higher.

Products Grid widget General settings

The great thing about the Product Grid widget is that you can Enable Carousel for it and customize it according to your preferences.

JetWooBuilder Products Grid options

Another option in the Content settings block is Quick View. Here you can choose the Button Icon and Button Label Text, and select the Icon Position.

JetWooBuilder Products Grid Elementor settings

Afterward, you can change the appearance of your grid in the Style settings block. Display your products in the most appealing way with a huge amount of different settings for every item.

When you’ve finished with customization, click on the “Publish” button, and enjoy the result.

JetWooBuilder Products Grid in action

Well done! Now you know how to create a Products Grid layout for your website with the help of the JetWooBuilder plugin. Enjoy!