WooCommerce · Elementor
WC Product Page widget for Elementor
Renders a WooCommerce product by ID via shortcode, with gallery and button styling.
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
Renders a WooCommerce product by ID via shortcode, with gallery and button styling.
Woo Shortcode Product Page widget. Renders a full single product page using [product_page] 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 Page”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Product Source”, “Product ID”, “Product SKU”, “Color”. Style and Content tabs are listed on this page.
When to use it
- A featured product on a landing page.
- A single-product template block.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including WC Product Page.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Product Selection — Product Source | The chosen value is read in render() and applied on the front end. Options: Current Product (Dynamic); Specific Product ID; Specific Product SKU. |
| Product Selection — Product ID | Enter the numeric ID of the product. |
| Product Selection — Product SKU | Enter the SKU of the product. |
| Product Title — Color | Writes CSS `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}} .product_title`. |
| Product Title — Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. |
| Price — 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}} .product .price`. |
| Short Description — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Short Description — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .product .woocommerce-product-details__short-description`. |
| Product Gallery — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-product-gallery__image img`. |
| Product Gallery — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Product Gallery — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .woocommerce-product-gallery__image img`. |
| 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}} .product .single_add_to_cart_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}} .product .single_add_to_cart_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`). |
| Quantity Input — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Quantity Input — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Quantity Input — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .product .quantity .qty`. |
| Quantity Input — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Quantity Input — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Quantity Input — Width | Writes CSS `width` onto the widget’s front-end markup. (min 40, max 150). |
| Quantity Input — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Product Tabs — Tab Heading Color | Writes CSS `color` onto the widget’s front-end markup. |
| Product Tabs — Active Tab Color | Writes CSS `color` onto the widget’s front-end markup. |
| Product Tabs — Tab Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Product Tabs — Active Tab Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Product Tabs — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .woocommerce-tabs ul.tabs li a`. |
| Product Tabs — Tab Content Color | Writes CSS `color` onto the widget’s front-end markup. |
| Product Tabs — Tab Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Product Tabs — Content Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Product Tabs — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .woocommerce-tabs ul.tabs, {{WRAPPER}} .woocommerce-tabs .panel`. |
| Product Tabs — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Product Meta — Label Color | Writes CSS `color` onto the widget’s front-end markup. |
| Product Meta — Value Color | Writes CSS `color` onto the widget’s front-end markup. |
| Product Meta — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .product_meta`. |
| Product Meta — Spacing | Writes CSS `margin-bottom` 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}} .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. |
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 Page 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 Page 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.
Compare Products Table
A side-by-side comparison table of WooCommerce products the shopper selected.
Quick Product Grid
A compact product grid with simple columns and spacing.
Quick Product Slider
A compact product slider with fewer controls than WooCommerce Grid — for a simple featured row.
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.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for WC Product Page after you activate it.