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 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 Products Grid layout for your WooCommerce products.
Creating a Product Grid
Step 1 — First of all, create your Shop page in JetWooBuilder. In order to do this, please check the following tutorial. So, open the Shop page to which you want to add a Products Grid and drag this widget to the needed section.
Step 2 — After that, navigate to the General Content settings block. Here you can choose Products Preset, select the number of Columns, 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.
Step 3 — 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, Show Products Expert, 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 “Add to Cart” ajax button.
Step 4 — The great thing about the Product Grid widget is that you can Enable Carousel for it and customize it according to your preferences.
Step 5 — 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.
Step 6 — 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.
Step 7 — 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 JetWooBuilder plugin. Hope this tutorial was useful!