The “Woo Category Grid Widget” allows you to display WooCommerce product categories in a stylish grid layout for free in WordPress Elementor websites. This widget helps organize your store by showcasing product categories in a visually appealing and user-friendly format. You can customize the grid layout, columns, spacing, and styling to match your site’s design seamlessly.
Let’s explore the features of the “Woo Category Grid Widget” below.
Elementor Woo Category Grid Tutorial Video
Add a Free Woo Category Grid for Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “WooCommerce Category Grid”
- Hover over the widget in the search results and click install
- Add your “WooCommerce Category Grid” widget to any Elementor Page
General Settings in Elementor Woo Category Grid
Select Post Type
Select any of the post type you want to display.
Select Taxonomy
Select any of the taxonomy from given options.
- Product Type
- Product Visibility
- Category
- Product Tag
- Shipping Class
- Color
Include By
Choose any of the below terms to include the products you want to display.
- Specific Terms
- Children of
- Children of Current Term
- By Search Text
- Only Childless
- Not a Child of Other Term
- Term Meta
Exclude By
Choose any of the following option to exclude the products by specifying terms.
- Specific Terms
- Current Term(for archive only)
- Hide Empty Term
Max Number of Terms
Type the maximum number of terms you want to display.
Order By
Select any of the following option to sort the products.
- Default
- Name
- Slug
- Term Group
- Term ID
- Description
- Parent
- Count-(Number of posts associated)
- Include-(specific term order)
- Meta Value
- Meta Value -Numeric
Order Direction
Select the order direction from dropdown options.
- Default
- Descending
- Ascending
Grid Settings in Elementor Woo Category Grid
Layout
Select the layout of WooCommerce category grid.
- Under
- Overlay (Pro)
- Under Overlay (Pro)
- Partial Overlay (Pro)
- Reveal from Bottom (Pro)
- Side by Side (Pro)
Number of items in row
Set the number of items you want to display in the grid.
Grid Gap
Set the gap between grid items.
Direction
Choose the direction of grid from left to right or right to left.
Show Title
Show/Hide the title.
Show Description (Pro)
Show/Hide the description.
Show Button (Pro)
Show/Hide the button.
Button Text
Type the text to display in the button.
Elementor Woo Category Grid Sequence Entrance Animation Setting
Sequence Entrance Animation
Set the sequence entrance animation.
Elementor Woo Category Grid Widget Styling
Plenty of styling options is included to control every design aspect of the widget. Modify the colors to match your site’s look and feel. You can customize every single detail to perfectly blend with your website design.
Item Styling in Elementor Woo Category Grid
Set the alignment, height, background, padding, radius and border.
Image Styling in Elementor Woo Category Grid
Style the image height, image fit and the image background.
Title Styling in Elementor Woo Category Grid
Style the title color, spacing and typography.
Description Styling in Elementor Woo Category Grid
You can set the description color, spacing, and typography.
Button Styling in Elementor Woo Category Grid
In this section, set the button background color, text color, border, padding and spacing.
Usage Examples of Elementor Woo Category Grid
Here are some live use cases for the WooCommerce Category Grid widget.
Free Elementor Category Grid with Image on Side.
Free Elementor Category Grid with Under Overlap Layout.
Free Elementor Category Grid with Content Reveal from Bottom Layout.
Thank you for using the Woo Category Grid Widget for Elementor! With its customizable layouts and seamless WooCommerce integration, this is the best Woo Category Grid Widget for Elementor, perfect for displaying product categories in a structured and visually appealing way. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
