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.
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.
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.
There’s an option to Order products by Date, Price, etc.
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.
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.
The great thing about the Product Grid widget is that you can Enable Carousel for it and customize it according to your preferences.
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.
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.
Well done! Now you know how to create a Products Grid layout for your website with the help of the JetWooBuilder plugin. Enjoy!