How to use WC Category Widget of Sky Addons for Elementor

The Sky Addons WC Category widget displays your WooCommerce product categories in a responsive grid with four built-in layout styles. It pulls categories directly from WooCommerce using a flexible query builder, supports responsive columns, and lets you show or hide the category image, title, description text, and product count. This documentation will guide you through the process of using the WC Category Widget to create an attractive category browsing section on your WooCommerce store.

Features:

1. Four Layout Styles: Choose from Style 1 through Style 4 to change how the image, title, and content are arranged within each category card.
2. Responsive Grid: Set 1–6 columns independently for desktop, tablet, and mobile with responsive row and column gap controls.
3. WooCommerce Query Builder: Filter categories by parent, include/exclude specific terms, set an item limit, and control the ordering — all without writing code.
4. Image Size Control: Select any registered WordPress image size for the category thumbnail.
5. Toggle Display Elements: Independently show or hide the category image, title, description text, and product count per category.
6. Full Style Tab: Style the card, image, content wrapper, title, and text sections independently — with normal and hover states for card background, box shadow, and border.

Insert WC Category Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for WC Category in the widget panel and drag it onto the canvas.

Configure Layout

The Layout section in the Content tab controls the overall grid structure.

1. Layout: Choose Style 1, 2, 3, or 4 to change the arrangement of image and content within each card.
2. Columns: Set the number of grid columns (1–6) for desktop, tablet, and mobile independently.
3. Row Gap / Column Gap: Control the spacing between grid rows and columns in px or em. Responsive.
4. Image Size: Select a registered image size (Thumbnail, Medium, Large, Full, etc.) for the category images.

Configure Query

The Query section controls which categories are fetched and how they are ordered.

1. Use the global terms query builder to filter by parent category, include or exclude specific categories by name, set an Item Limit, and choose an Order By and Order (ASC/DESC).
2. Leave filters empty to display all product categories in the default WooCommerce order.

Configure Additional Options

The Additional section controls what information appears inside each category card.

1. Show Title: Toggle the category name on or off. When on, choose the Title HTML Tag (h1–h6, p, span, div).
2. Show Image: Toggle the category thumbnail image on or off.
3. Show Text: Toggle the category description on or off.
4. Show Count: Toggle the product count in parentheses next to the title (e.g. “T-Shirts (12)”). Only visible when Show Title is on.

Style Your WC Category

Use the Style tab to customize every visual element.

1. Item:
   Set text alignment (Left/Center/Right/Justified), padding, border (style/width/color), border radius, and overflow. Use Normal/Hover tabs for background (solid or gradient), box shadow, and hover border color.
2. Image:
   Control image wrapper width, height, padding, margin, border, border radius, box shadow, and CSS filters (blur, brightness, contrast, saturation).
3. Content:
   Set background, padding, margin, border, border radius, and box shadow for the content wrapper that holds the title and description.
4. Title:
   Control spacing (margin-top from image) plus all global title style controls — typography, color, hover color.
5. Text:
   Control typography and color for the category description text.

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page to see your WC Category widget in action.

Best Practices

1. Add a thumbnail image to each WooCommerce category in Products > Categories — the widget falls back to a placeholder when no image is set.
2. Use the Item Limit in the Query section when you have many categories but only want to feature the top-level or most popular ones on a homepage.
3. Set mobile columns to 1 or 2 and increase to 3–4 for desktop so category cards are comfortably tappable on small screens.
4. Keep category descriptions short if you enable Show Text — long descriptions overflow the card on narrow column widths.

Troubleshooting

1. No categories appear in the widget. Make sure WooCommerce is active, products exist, and at least one product category has been created in Products > Categories.
2. Category images show a grey WooCommerce placeholder. Go to Products > Categories, edit each category, and upload a thumbnail image in the Category Image field.
3. The product count shows 0 even though products exist. Make sure each product is assigned to the category and has a Published status. Draft products are not counted by WooCommerce term counts.

Frequently Asked Questions

Can I show subcategories only, without the top-level categories?

Yes. In the Query section, set a Parent category filter to the parent term. Only that category’s direct children will appear in the grid.

Does clicking a category card go to the category archive page?

Yes. Both the image and the title are wrapped in links that point to the WooCommerce category archive URL.

Can I display categories from a custom taxonomy instead of product_cat?

The widget is built specifically for the product_cat taxonomy. For other taxonomies, use the Sky Addons post grid or taxonomy widgets.

What happens if a category has no description?

When Show Text is on but the category has no description, the text area simply renders empty — no placeholder text or error is shown.

Can I use this widget on a page other than the shop?

Yes. The widget works on any page, including homepages, landing pages, and custom shop layouts. Place it anywhere in your Elementor page.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the WC Category widget:

• WC Category Carousel: Show the same category data in a sliding carousel instead of a static grid.
• WC Products: Pair a category grid with a product grid below it for a complete shop section on any page.

Conclusion

The WC Category widget gives you a clean, fully styled grid for presenting WooCommerce product categories — with flexible querying, responsive columns, and independent control over every visual element. If you have any questions or need help, visit the Sky Addons support center.