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 any of the post type you want to display.
Select any of the taxonomy from given options.
- Product Type
- Product Visibility
- Product Tag
- Shipping Class
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
Choose any of the following option to exclude the products by specifying terms.
- Specific Terms
- Current Term(for archive only)
- Hide Empty Term
Type the maximum number of terms you want to display.
Select any of the following option to sort the products.
- Term Group
- Term ID
- Count-(Number of posts associated)
- Include-(specific term order)
- Meta Value
- Meta Value -Numeric
Select the order direction from dropdown options.
Grid Settings #
Select the layout of WooCommerce category grid.
- Under Overlay
- Partial Overlay
- Reveal from Bottom
- Side by Side
Set the number of items you want to display in the grid.
Set the gap between grid items.
Choose the direction of grid from left to right or right to left.
Show/Hide the title.
Show/Hide the description.
Show/Hide the button.
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.