fbpx

Need Help?

Here are some good places you cant start.

Join the Community

Whats New?

Get updated about all the good stuff!

WooCommerce Category Grid

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.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “WooCommerce Category Grid”
  3. Hover over the widget in the search results and click install
  4. Add your “WooCommerce Category Grid” widget to any Elementor Page

General Settings #

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

Grid Settings #

1
Layout

Select the layout of WooCommerce category grid.

  • Under
  • Overlay
  • Under Overlay
  • Partial Overlay
  • Reveal from Bottom
  • Side by Side
2
Number of items in row

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

3
Grid Gap

Set the gap between grid items.

4
Direction

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

5
Show Title

Show/Hide the title.

6
Show Description

Show/Hide the description.

7
Show Button

Show/Hide the button.

8
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.

Video Overview #

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!