Want to showcase your WooCommerce categories in a clean, organized way on any page of your website? With Elementor and the Woo Category Grid widget, it’s easier than ever. This widget allows you to display your WooCommerce product categories in a responsive grid layout that not only enhances your store’s visual appeal but also improves navigation and product discoverability for your visitors. In this guide, you’ll learn exactly how to add and customize WooCommerce categories on any Elementor page—no coding required.
Popular Use Cases for Displaying WooCommerce Categories on an Elementor Website
Shop Landing Pages
Organize posts into tabs such as Travel, Food, or Lifestyle. It helps readers find specific content quickly and improves the overall blog navigation experience.
Homepage Category Highlights
Use category grids on your main shop page to offer a clean overview of your store’s structure, making it easier for users to browse effectively.
Mobile-Friendly Category Navigation
Create responsive category layouts optimized for mobile users, ensuring easy access to product sections without overwhelming small screens.
Mega Menus
Add WooCommerce categories directly into mega menus to create an intuitive navigation structure that helps users quickly explore your store from any page.
Empty Cart Redirects
Redirect users with empty carts to a category grid, encouraging them to continue shopping and explore other product types they might be interested in.
Blog and Content Integration
Enhance blog posts by displaying related product categories, helping readers connect informative content with relevant products directly on the same page.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Adding the Woo Category Grid widget to your Elementor website
To display a category grid, install the Woo Category Grid widget from the Unlimited Elements Widget library.
Step #3: Add the WooCommerce Categories widget to your Elementor page
Now, in the Elementor editor, find the Woo Category Grid widget and drag it to the desired part of your 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
Query ID
Give your Query unique ID to been able to filter it in server side using add_filter() function.
Grid Settings
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)
Custom Image Field (Pro)
Enable the custom image option if needed.
Custom Image Field Name
Enter the custom image field name.
Number Of Columns
Set the number of columns 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.
Show Number of Products
Show/Hide the number of products.
Text Before Number Of Products
Type the text before number of products.
Text After Number Of Products
Type the text after number of products.
Sequence Entrance Animation Setting
Wrapping it Up!
Displaying WooCommerce categories on any Elementor page is a simple yet powerful way to streamline your store’s layout and guide users more effectively. With the Woo Category Grid widget, you can create a visually engaging category section that fits seamlessly into any design. Now that you know how to do it, start organizing your shop like a pro and give your customers a smoother, more intuitive browsing experience.