Back to contents

JetWooBuilder. Categories Grid widget overview

This tutorial will be your guide in the world of the Categories Grid widget by JetWooBuilder plugin for Elementor.

Looking for the way to display your products on the shop page in a stylish grid? Then, we think you should definitely use the Categories Grid widget included in the JetWooBuilder plugin by Crocoblock.

Pay attention, that you should have at least several WooCommerce products with categories, thumbnails and descriptions to work with the Categories Grid widget.

Step 1 – Open the needed page with the Elementor page builder, find the Categories Grid widget, drag and drop it to the page.

Categories Grid widget

Step 2 – Let’s move to the Elementor panel and look through some of the settings. Navigate to the Content tab > General settings.

Categories Grid General settings

Step 3 – Move on to the Category Presets dropdown and see how your grid can look like in different variations. Depending on the preset you choose the description of the product can be placed in versatile locations.

Step 3 – Move on to the Category Presets dropdown and see how your grid can look like in different variations. Depending on the preset you choose the description of the product can be placed in versatile locations.

Step 4 – Select the number of columns for your grid in the Columns dropdown.

Step 5 – Using the Add gap between columns you can either show or hide a gap between the columns. You can also add a gap between the rows by toggling the Add gap between rows option to Yes.

Step 6 – Specify the number of categories you want to be displayed on the page in the Categories Number field.

Categories Grid settings

Step 7 – You can show the products by all the categories, only parent categories or show by categories IDs in the Show by dropdown.

Step 8 – You can also order the categories by the ascending (ASC) or descending (DESC) order in the Order by dropdown.

Step 9 – The categories can be sorted in several different ways: by name, by IDs or by count in the Sort by dropdown.

Step 10 – Specify the size of the thumbnail images in the Featured Image Size dropdown.

Categories Grid Elementor settings

Step 11 – Enable the Show Categories Title if you want the categories to be displayed in the grid.

Step 12 – Toggle the Show Product Count option to Yes in case you want the number of products to be seen.

Step 13 – Fill in the Count Before Text and Count After Text field with the required information.

Step 14 – Specify the number of words for the description which will be visible using the Description Words Count option.

Step 15 – Add the symbols showcased after the trimmed text in the Trimmed After Text text field.

Step 16 – You can also showcase the products with a carousel, to do so go to the Carousel accordion block and toggle the Enable Carousel option to Yes.

Categories Grid carousel settings

Step 17 – Set the number of slides to scroll in the Slides to Scroll dropdown. There can be either one or two/three/four slides scrolled at a time.

Step 18 – In case you want your users to be able to scroll the carousel by themselves, enable either the Show Arrows Navigation or Show Dots Navigation option.

Step 19 – To make the carousel scroll on its own, switch the Autoplay option on. Set its speed value in the Autoplay Speed field.

Step 20 – In order for the carousel scroll to never stop moving, enable the Infinite Loop option.

Step 21 – Finally, go to the Style tab to adjust the styling options. Here you can design the columns, category items (when normal and on hover), thumbnails, content, title, arrow/dots, etc.

Categories Grid settings in Elementor

So now try to experiment with the available options to find the right combination for you! To learn more about each option, check our Knowledge Base.