WooCommerce · Elementor
WC Products widget for Elementor
The WooCommerce products shortcode, with King Addons style controls around it.
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
The WooCommerce products shortcode, with King Addons style controls around it.
Woo Shortcode Products widget. Renders the standard WooCommerce [products] shortcode with configurable parameters.
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”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Products Type”, “Products Limit”, “Columns”, “Order By”. Style and Content tabs are listed on this page.
When to use it
- A classic products block on a custom layout.
- A shop-style section on a landing page.
- A category teaser.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including WC Products.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Query Settings — Products Type | The chosen value is read in render() and applied on the front end. Options: All Products; Recent Products; Sale Products; Best Selling Products; Top Rated Products; Featured Products. |
| Query Settings — Products Limit | Numeric value used in this widget’s render/JS (default 12, min 1, max 100). |
| Query Settings — Columns | The chosen value is read in render() and applied on the front end. Options: 1; 2; 3; 4; 5; 6. |
| Query 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. |
| Query Settings — Order | The chosen value is read in render() and applied on the front end. Options: Ascending; Descending. |
| Query Settings — Pagination | Switcher inspector control (`paginate`). |
| Filter — Category Slug | Enter comma-separated category slugs to filter products. |
| Filter — Tag Slug | Enter comma-separated tag slugs to filter products. |
| Filter — On Sale Only | Switcher inspector control (`on_sale`). |
| 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 Item — Column Gap | Writes CSS (margin-right, margin-left) 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 — Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 50). |
| Price — Color | Writes CSS `color` onto the widget’s front-end markup. |
| 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 — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} ul.products li.product .price`. |
| Price — Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 50). |
| 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). |
| Rating — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| 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, {{WRAPPER}} ul.products li.product a.add_to…`. |
| 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, {{WRAPPER}} ul.products li.product a.add_to…`. |
| 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_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 — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Sale Badge — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Pagination — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Pagination — Active/Hover Color | Writes CSS (a, color, background-color) onto the widget’s front-end markup. |
| Pagination — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} nav.woocommerce-pagination ul li a, {{WRAPPER}} nav.woocommerce-pagination …`. |
| Pagination — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Pagination — Active Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Pagination — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} nav.woocommerce-pagination ul li a, {{WRAPPER}} nav.woocommerce-pagination …`. |
| Pagination — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Pagination — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Pagination — Spacing Between | Writes CSS `margin` onto the widget’s front-end markup. (min 0, max 30). |
| Pagination — Top Margin | Writes CSS `margin-top` onto the widget’s front-end markup. (min 0, max 100). |
| Result Count & Ordering — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Result Count & Ordering — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-result-count`. |
| Result Count & Ordering — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Result Count & Ordering — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Result Count & Ordering — Typography (Ordering Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-ordering select`. |
| Result Count & Ordering — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-ordering select`. |
| Result Count & Ordering — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Result Count & Ordering — Padding | Writes CSS `padding` 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 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 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
WooCommerce Grid & Slider
WooCommerce products in a grid, slider, or carousel with query and style controls. This is the main shop loop widget.
WC Product Category
Products from one WooCommerce category, with style controls.
Quick Product Grid
A compact product grid with simple columns and spacing.
WC Cart
The WooCommerce cart shortcode, styled in Elementor. Use on a cart template, not on a random marketing page.
WC Products Categories
A grid of product categories (image + title), not the products themselves.
Quick Product Slider
A compact product slider with fewer controls than WooCommerce Grid — for a simple featured row.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for WC Products after you activate it.