WooCommerce · Elementor
WC Products Categories widget for Elementor
A grid of product categories (image + title), not the products themselves.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A grid of product categories (image + title), not the products themselves.
Woo Shortcode Product Categories widget. Renders product categories using [product_categories] shortcode.
Output depends on WooCommerce objects (products, cart, or account). Empty without WooCommerce data.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “WC Products Categories”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Number of Categories”, “Columns”, “Order By”, “Order”. Style and Content tabs are listed on this page.
When to use it
- A shop homepage category grid.
- A “shop by type” section.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Display Settings — Number of Categories | Leave empty to show all categories. |
| Display Settings — Columns | The chosen value is read in render() and applied on the front end. Options: 1; 2; 3; 4; 5; 6. |
| Display Settings — Order By | The chosen value is read in render() and applied on the front end. Options: Name; Slug; Description; Product Count; Menu Order. Description. |
| Display Settings — Order | The chosen value is read in render() and applied on the front end. Options: Ascending; Descending. |
| Display Settings — Hide Empty Categories | Switcher inspector control (`hide_empty`). |
| Display Settings — Parent Category ID | Enter a parent category ID to show only its children. Leave empty to show all. |
| Display Settings — Specific Category IDs | Enter comma-separated category IDs to display specific categories only. |
| Category Item — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Category Item — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Category Item — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} ul.products li.product-category`. |
| Category Item — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Category Item — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} ul.products li.product-category`. |
| Category Item — Row Gap | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 100). |
| Category Image — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Category Image — Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. |
| Category Title — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Category Title — Hover Color | Writes CSS (a, color) onto the widget’s front-end markup. |
| Category Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} ul.products li.product-category .woocommerce-loop-category__title`. |
| Category Title — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Product Count — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Product Count — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} ul.products li.product-category .count`. |
| Product Count — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Product Count — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Product Count — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which WC Products Categories options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
Does WC Products Categories require WooCommerce?
Yes. Install WooCommerce and add products (or complete a cart) before this widget has anything to show.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related woocommerce widgets
WC Product Category
Products from one WooCommerce category, with style controls.
WC Products
The WooCommerce products shortcode, with King Addons style controls around it.
Quick Product Grid
A compact product grid with simple columns and spacing.
WC Add To Cart Button
A standalone add-to-cart button for a chosen product ID.
WC Cart
The WooCommerce cart shortcode, styled in Elementor. Use on a cart template, not on a random marketing page.
WC Checkout
The checkout shortcode with Elementor styling. Pair it with WooCommerce Builder for a full checkout template.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for WC Products Categories after you activate it.