Organize and categorize the products in Grid format!
The Woo Category Grid will make it easy for viewers to find items easily!
![Screenshot_1.0](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_1.0-2.jpg?lossy=2&strip=1&webp=1)
Content tab → Content
- Hide Empty Category – enable to hide the empty product slots
- Thumbnail Size – select a precise size for showcasing the products
- Include Categories – select the categories you want to show or select all categories to show all the products added
![all categories](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2023/03/all-categories.jpg?lossy=2&strip=1&webp=1)
![2 Products](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2023/03/2-Products.jpg?lossy=2&strip=1&webp=1)
Content tab → Content
- Category Count – select a number of categories for every slide
- Category Offset – pick a number for how many products you want to omit from the first
- Sorted by – choose how you want the products to be sorted
- Order By – There are at least 7 ways to order the products, select the one you prefer
![Product Count](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2023/03/Product-Count.jpg?lossy=2&strip=1&webp=1)
Additionally, you can easily display all of your products by entering “-1” in the product count field if you want to display them all on the same page.
![Screenshot_2](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_2-1.jpg?lossy=2&strip=1&webp=1)
Content tab → Display
- Show Product Count – enable to show product count
- Show Image – enable to show the image
- Category Name Stacked – enable to show the stacked category name
![Screenshot_3](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_3-1.jpg?lossy=2&strip=1&webp=1)
Content tab → Content Background
- Background Color – pick a background color to your liking
![Screenshot_4.0](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_4.0-1.jpg?lossy=2&strip=1&webp=1)
Design tab → Image Settings
- Image Height – adjust the product image height using the slider
- Image Rounded Corners – include rounded corners to the image for all products
- Image Border Styles – add borders to all or particular sides of the image
![Screenshot_4.1](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_4.1-1.jpg?lossy=2&strip=1&webp=1)
Design tab → Image Settings
- Image Border Width – adjust the width of the border you have added
- Image Border Color – add a beautiful color of your choice to the borders
- Image Border Style – select a style for your borders
- Box-shadow – add a box-shadow to the images
![Screenshot_4.2](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_4.2-1.jpg?lossy=2&strip=1&webp=1)
Design tab → Image Settings
- Image Hue – adjust image hue using the slider
- Image Saturation – adjust the intensity of the image
- Image Brightness – configure the brightness of the image
- Image Contrast – include contrast to the image
- Image Invert – use this to shift to an inverted image
- Image Sepia – adjust to apply sepia color tone to the image
- Image Opacity – adjust the opacity of the image
- Image Blur – add blur to the image
- Image Blend Mode – Select from the 16 types of image blend mode for a quick configuration
![Screenshot_5](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_5-2.jpg?lossy=2&strip=1&webp=1)
Design tab → Grid
- Grid Number – adjust the slider to measure the grid number
- Grid Gap – adjust the gap between the elements
![Screenshot_6.0](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_6.0-1.jpg?lossy=2&strip=1&webp=1)
Design tab → Category
- Font – Choose a font. All Google web fonts are available here. You can upload a custom font as well.
- Font Weight – select the weight of the font from Light to Ultra Bold
- Font Style – select a font style from
- Text Alignment – align the text to left, right, or center
- Text Color – pick a color for the text
- Text Size – resize the text
- Letter Spacing – Adjust the spacing between the letters of the text
![Screenshot_6.1](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_6.1-1.jpg?lossy=2&strip=1&webp=1)
Design tab → Category
- Line Height – adjust the space between multiple lines added to the design
- Text Shadow – add a shadow to the text
- Content Wrapper Rounded Corners – include rounded corner by adjusting the four corners
- Box-shadow – add a box-shadow to the element
![Screenshot_6.2](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_6.2-1.jpg?lossy=2&strip=1&webp=1)
Design tab → Category
- Content Wrapper Border Styles – add a border to any side you like or have borders on all four sides
- Content Wrapper Border Width – adjust the width of the border
- Content Wrapper Border Color – select a color for the border
- Content Wrapper Border Style – include a style to the border
![Screenshot_7.0](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_7.0-1.jpg?lossy=2&strip=1&webp=1)
Design tab → Category Settings
- Category Single Rounded Corners – include rounded corner by adjusting the four corners
- Category Single Border Styles – add a border to any side you like or have borders on all four sides
- Category Single Border Width – adjust the width of the border
- Category Single Border Color – select a color for the border
![Screenshot_7.1](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_7.1-1.jpg?lossy=2&strip=1&webp=1)
![Screenshot_7.2](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_7.2.jpg?lossy=2&strip=1&webp=1)
Design tab → Category Settings
- Category Single Border Style – include a style to the border
- Category Single Box-shadow – add a box-shadow to the element
- Box Shadow Horizontal Position – use the slider to adjust the horizontal position
- Box Shadow Vertical Position – adjust the slider to change the vertical position
- Box Shadow Spread Strength – configure the shadow strength
- Shadow Color – pick a color for the shadow
- Box Shadow Position – select the positions of the shadow to be either in the inner or outer