The WooCommerce Category Grid widget lets you showcase your WooCommerce categories in a grid layout on any Elementor page. This widget lets you easily display your WooCommerce products categories on your Elementor page with plenty of customization options. You can turn on or off any part of the WooCommerce Category Grid to make the widget look exactly how you want and suit your website needs.
Let’s look at each of the options in the “WooCommerce Category Grid Widget” below.
Install WooCommerce Category Grid Widget for Elementor #
This widget requires Unlimited Elements PRO 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 #
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 #
Layout
Select the layout of WooCommerce category grid.
- Under
- Overlay
- Under Overlay
- Partial Overlay
- Reveal from Bottom
- Side by Side
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
Show/Hide the description.
Show Button
Show/Hide the button.
Button Text
Type the text to display in the button.
WooCommerce 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 #
Set the alignment, height, background, padding, radius and border.
Title Styling #
Style the title color, spacing and typography.
Description Styling #
You can set the description color, spacing, and typography.
Button Styling #
In this section, set the button background color, text color, border, padding and spacing.
Usage Examples #
Here are some live use cases for the WooCommerce Category Grid widget.
Cateogry Grid with under overlap layout.
Category Grid with the reveal from bottom layout.
