Birthday Sale!

Days
Hours
Min
Sec

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Pagination to Elementor Posts - Featured Blog
Gradient Text - Featured Blog
wordpress-tag-cloud-coming-out-of-pink-computer-sc__61658

How to Display WooCommerce Categories on any Elementor page

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

1

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.

2

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.

3

Mobile-Friendly Category Navigation

Create responsive category layouts optimized for mobile users, ensuring easy access to product sections without overwhelming small screens.

4

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.

5

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.

6

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.

WooCommerce Categories Blog Image 1
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. 

WooCommerce Categories Blog Image 3 scaled
1

Go to Unlimited Elements in the WordPress Dashboard

2

Search for the "Woo Category Grid"

3

Hover over the widget and click install

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
WooCommerce Categories Blog Image 4
1

Select Post Type

Select any of the post type you want to display.

2

Select Taxonomy

Select any of the taxonomy from given options.

  • Product Type
  • Product Visibility
  • Category
  • Product Tag
  • Shipping Class
  • Color
3

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
4

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
5

Max Number of Terms

Type the maximum number of terms you want to display.

6

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
7

Order Direction

Select the order direction from dropdown options.

  • Default
  • Descending
  • Ascending
8

Query ID

Give your Query unique ID to been able to filter it in server side using add_filter() function.

Grid Settings
WooCommerce Categories Blog Image 5
1

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)
2

Custom Image Field (Pro)

Enable the custom image option if needed.

3

Custom Image Field Name

Enter the custom image field name.

4

Number Of Columns

Set the number of columns you want to display in the grid.

5

Grid Gap

Set the gap between grid items.

6

Direction

Choose the direction of grid from left to right or right to left.

7

Show Title

Show/Hide the title.

8

Show Description (Pro)

Show/Hide the description.

9

Show Button (Pro)

Show/Hide the button.

10

Button Text

Type the text to display in the button.

11

Show Number of Products

Show/Hide the number of products.

12

Text Before Number Of Products

Type the text before number of products.

13

Text After Number Of Products

Type the text after number of products.

Sequence Entrance Animation Setting
WooCommerce Categories Blog Image 6
1

Sequence Entrance Animation

Select the sequence entrance animation from the following options:

  • None
  • Apear
  • Scale Down
  • Scale Up
  • From Left
  • From Right
  • From Top
  • From Bottom
WooCommerce Categories Blog Image 2
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.

View More Related Blog Posts

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!