WooCommerce · Elementor
WC Product Category widget for Elementor
Products from one WooCommerce category, with style controls.
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
Products from one WooCommerce category, with style controls.
Woo Shortcode Product Category widget. Renders products from a specific category using [product_category] 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 Product Category”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Category Slug”, “Products Per Page”, “Columns”, “Order By”. Style and Content tabs are listed on this page.
When to use it
- A “shop hoodies” section.
- A campaign page for one category.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Category Settings — Category Slug | Enter the category slug to display products from. |
| Category Settings — Products Per Page | Numeric value used in this widget’s render/JS (default 12, min 1, max 100). |
| Category Settings — Columns | The chosen value is read in render() and applied on the front end. Options: 1; 2; 3; 4; 5; 6. |
| Category Settings — Order By | The chosen value is read in render() and applied on the front end. Options: Date; Title; Price; Popularity; Rating; Random; Menu Order. |
| Category Settings — Order | The chosen value is read in render() and applied on the front end. Options: Ascending; Descending. |
| Product Item — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Product Item — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Product Item — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} ul.products li.product`. |
| Product Item — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Product Item — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} ul.products li.product`. |
| Product Item — Row Gap | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 100). |
| Product Image — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Product Image — Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 50). |
| Product Title — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Product Title — Hover Color | Writes CSS (a, color) onto the widget’s front-end markup. |
| Product Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} ul.products li.product .woocommerce-loop-product__title`. |
| Product Title — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Price — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Price — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} ul.products li.product .price`. |
| Price — Sale Price Color | Writes CSS `color` onto the widget’s front-end markup. |
| Price — Regular Price Color (Strikethrough) | Writes CSS `color` onto the widget’s front-end markup. |
| Price — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Rating — Star Color | Writes CSS (span, color) onto the widget’s front-end markup. |
| Rating — Empty Star Color | Writes CSS (star-rating, color) onto the widget’s front-end markup. |
| Rating — Star Size | Writes CSS `font-size` onto the widget’s front-end markup. (min 8, max 30). |
| Add to Cart Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Add to Cart Button (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Add to Cart Button (Hover) — Text Color | Writes CSS (button, color) onto the widget’s front-end markup. |
| Add to Cart Button (Hover) — Background Color | Writes CSS (button, background-color) onto the widget’s front-end markup. |
| Add to Cart Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} ul.products li.product .button`. |
| Add to Cart Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Add to Cart Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Add to Cart Button — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} ul.products li.product .button`. |
| Add to Cart Button — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Add to Cart Button — Full Width | Switcher inspector control (`button_full_width`). |
| View Cart Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| View Cart Button (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| View Cart Button (Hover) — Text Color | Writes CSS (cart, color) onto the widget’s front-end markup. |
| View Cart Button (Hover) — Background Color | Writes CSS (cart, background-color) onto the widget’s front-end markup. |
| View Cart Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} ul.products li.product a.added_to_cart`. |
| View Cart Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| View Cart Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| View Cart Button — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} ul.products li.product a.added_to_cart`. |
| View Cart Button — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Sale Badge — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Sale Badge — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Sale Badge — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} ul.products li.product .onsale`. |
| Sale Badge — 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 Product Category 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 Product Category 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 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 Product Page
Renders a WooCommerce product by ID via shortcode, with gallery and button styling.
WC Products Categories
A grid of product categories (image + title), not the products themselves.
WooCommerce Grid & Slider
WooCommerce products in a grid, slider, or carousel with query and style controls. This is the main shop loop widget.
Compare Products Table
A side-by-side comparison table of WooCommerce products the shopper selected.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for WC Product Category after you activate it.