Divi WooCommerce Category Grid module displays your WooCommerce categories in a fantastic grid with cool effects. With this module, you can display your product categories in a distinctive and tidy way. In this module each grid item includes a ton of options to choose, which you can use to customize everything from typography options to cool call-to-action buttons and so much more.
Adding the Category Grid Module #
Add a New Section and Row #
- Navigate to the visual builder of a page
- Tap the + (plus sign) to start a new section.
- Choose a Regular Section.
- Click the + within section to insert a row.
- Choose your column configuration (e.g., 1, 2).
Add the Category Grid Module #
- Select the gray + button on the row.
- Search for Category Grid.
- Choose the Category Grid Module.
- Set the Category Grid Settings.
Child Components and Child Features #
1. Category Thumbnail #
Purpose: Show the product category images as thumbnails.
Content Tab: #
Component Type: This feature is available for each child component and works the same.
The “Component Type” dropdown prompts you to select the component to be the grid item. You can select component type from the available options, including Category Thumbnail, Category name, Category description, etc.
Use Custom URL:
This feature lets you enter a custom category link. If checked, the URL will go to the supplied destination.
URL Target:
You can choose “In The Same Window” or “In The New Tab” as the URL Target. This is where the link will be opened upon clicking.
Background (This feature is available in the content tab of all child components and works the same.)
Here, you can choose the background settings of the category thumbnail, like the background color, background image, etc.
Admin Label (This feature is available in the content tab of all child components and works the same.)
With this, you can enter a custom label for your components, making it easy to label your layout if you are using more than one component.
Design Tab: #
Image Settings:
This section allows you to set how you would like your category image to be displayed. You have the option to specify the image size and other related settings to fit the thumbnail as you need.
Overlay & Scale:
Modify the decoration that overlays the category thumbnail. You can also apply an overlay background color.
General Styling: #
These features are available for each child component and work the same.
Sizing feature: Set width, height, and alignment.
Spacing feature: Control Margin and padding system.
Border feature: Custom Border of the category grid, like broader color, width, and styles and rounded corners.
Box Shadow effects: Add shadow effects for depth.
Filters feature: Apply filters like hue, brightness, and opacity sliders.
Transform feature: Use Transformations (scaling, rotation, etc.)for dynamic effects.
2. Category Name #
Purpose: Show the name of each of the product categories in the category grid.
Content Tab: #
Category Title Tag:
This option allows you to select the HTML tag for the category name. Choices exist for tags such as h2, h3, or h4, which assist with all the Search Engine Optimization.
Component Display: (This feature is also available in the content tab of Counter Number and Button child components.)
You have control over the component view. It is Block by default, but you can change it to other display options (inline and inline block) according to what you want to achieve in design.
Show Product Counter:
This toggles the ability to display how many products are available within each category directly next to the category title. If disabled, only the category title is shown.
Design Tab: #
Category Name:
This gives you the option to style the category name, such as font size, colour and weight.
3. Category Description #
Purpose: Show the short description of each product category in the category grid.
Content Tab: #
Design Tab: #
Category Description:
Set the typography options for the category description like font size, color, and weight.
4. Counter Number #
Content Tab: #
Prefix:
Here you can add a prefix to the counter number. Empty means no prefix is placed before the counter number.
Suffix:
The suffix is ‘Items’, which will appear after the counter number.
Design Tab: #
Count Number:
Customize the count number font size, weight, color, etc.
Count Number Prefix:
Formats the prefix design of the number, font size, weight, color, etc.
Count Number Suffix:
Customize the look for the suffix “Items”, font size, weight, color, etc.
5. Button #
Purpose: Add a customizable button to a grid which can be linked to a page or a category.
Content Tab: #
Component:
Button Text:
Determines the text to display in the button. Such as “Read More” or any Custom Text.
Button URL:
URL for the button to point to. This could be a link to a category, page, or other type of URL.
Button Target:
Select the button link target. Options include:
In The Same Window – Opens the link in the same tab.
“In The New Tab” – Opens the link in a new tab.
Icon Component:
Show Icon:
This option lets you choose whether or not you want an icon to appear alongside the category button.
Use Image As Icon:
This would allow you to use an image as the icon.
Image:
When you switch to “Use Image as Icon,” the “Add Image” button is displayed. Here you can upload the image which will be as an icon.
Show On Hover:
The icon/image displays when the user hovers over the category button.
Design Tab: #
Icon Element:
You can customize the icon width.
6. Divider #
Purpose: Used to add a simple dividing line between items inside the category grid.
Content Tab: #
Divider Line Height:
It has a slider (set to 3px). You can use this to set the thickness of the divider that delimits items in the category grid.
Design Tab: #
Divider Line:
Offers options for the divider line color and style, such as divider color direction, starting point, etc.
Global Features Of Woo Category Grid Settings #
Content Tab – Woo Category Grid Settings #
The content tab in the Woo category grid has a handful of customization options that allow you to specify how the WooCommerce product categories appear in your grid. You will get options to configure how many categories there are, the layout you want and how the categories will be organized or filtered and many more.
Category Count:
This option sets the number of categories to display in the grid. You can put in a number here (ie, 12) based on how many categories you want to display to your site visitors.
Column:
The Column option enables you to select the number of columns for the grid. You can choose from different column structures (3 Columns, 4 Columns, etc.) to change the overall layout of the grid.
Column Gap:
Column Gap Toggles the Gap between the columns in the grid. The gap between categories is adjustable by an input-slider (for example, 20px), allowing you to play with the visual density of your layout or spacing between category items.
Exclude Categories:
This feature is for when you want to exclude specific categories from the grid. E.g., you can omit the Uncategorized category or any category as you want.
Order By:
The Order By choice is how you want the categories to be sorted in the grid. You can select name, count, or slug to sort categories.
Order:
Allows you to specify if the categories should be sorted in ascending or descending order.
Show Only Parent Categories:
This toggle is a way to display only Parent Categories and omit any subcategories. When enabled, you will only see the main level categories in the grid.
Show Empty Categories:
This setting controls whether empty categories are shown on the grid. If you activate this option, empty categories will be displayed.
Offset Number:
The Offset Number option allows you to skip a defined number of categories from the beginning of the grid. For instance, when you input 2, it will hide the first two categories, and the grid will begin from the 3rd category.
Background #
Customize the background display of the WooCommerce category grid by setting a background color, image or style. It allows you to customize the grid design so that it fits on your website and matches your site’s look.
Admin Label #
The Admin Label is suitable for locating/managing the category grid in the WordPress admin panel. Administrators/developers can find/grab the grid component faster than other elements
Design Tab – Woo Category Grid Settings #
The Design tab in the Woo Category Grid module lets you customize how the category grid appears on your site. You can adjust the look and feel of the grid and its items.
Category Item: #
Allows customization of the appearances of individual category items, Such as wrapper background, font, weight, etc.
Additional Spacing: #
This is use to give full control of the padding in your category items. which improves the look and balance of the category grid.
Sizing: #
This is where you control the size of your entire category grid and your category items. You can make the items display in the grid as big or small as you want.
Spacing: #
Changes the distance between the category items. You can close in or spread the gap between categories for a tighter or more spread-out look.
Border: #
Add borders to the category grid items.
Box Shadow: #
This option will add a shadow around the category grid items that will provide some depth and distinguish them from the background. The shadow can have a blur, spread, color, and position of your preference.
Filters Effect: #
Hue, brightness, and opacity sliders to make the category grid more appealing.
Transform: #
You can rotate and scale the category grid items. This can be used to produce dynamic, interactive visual effects that will help your site feel more contemporary and engaging.
Animation: #
Intermittent animations when the user interacts with the category grid. For instance, categories could fade in or slide in from the side when the page is loaded or when users hover over them.
Advance Tab #
Woo Category Grid Settings
The Advanced section of the Woo Category Grid module offers more customization for those who’d like to have more control over the behaviour and visibility of the category grid, as well as how the user will interact with it. These are mostly for those who know a bit of web development or who want to make fine-tuned adjustments. It offers options such as adding CSS IDs or classes, using its own custom CSS for design adjustments, and setting conditions for when the category grid is displayed.