WooCommerce · Elementor
Single Product widget for Elementor
Single Product is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Single Product” in the Elementor panel.
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
Single Product is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Single Product” in the Elementor panel.
Single Product Widget (Free).
render() writes HTML data attributes: data-product_id, data-product_sku, data-quantity.
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 “Single Product”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Use Current Product (Single)”, “Product ID (fallback)”, “Show Image”, “Show Price”. Style and Content tabs are listed on this page.
When to use it
- An Elementor page that needs Single Product.
- A layout in the product grids, cart, checkout, and shop pages group.
- Search the panel for “Single Product” after King Addons is active.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Product — Use Current Product (Single) | Switcher inspector control (`kng_use_current_product`). |
| Product — Product ID (fallback) | Numeric value used in this widget’s render/JS (min 1). |
| Product — Show Image | Switcher inspector control (`kng_show_image`). |
| Product — Show Price | Switcher inspector control (`kng_show_price`). |
| Product — Show Short Description | Switcher inspector control (`kng_show_excerpt`). |
| Product — Show Rating | Switcher inspector control (`kng_show_rating`). |
| Product — Show Add to Cart | Switcher inspector control (`kng_show_add_to_cart`). |
| Animations — Hover Animation | The chosen value is read in render() and applied on the front end. Options: None; Lift; Image Zoom; Tilt; Float; Scale & Fade. |
| Layout — Alignment | Writes CSS `align-items` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Layout — Gap | Writes CSS `gap` onto the widget’s front-end markup. (min 0, max 60). |
| Layout — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-single-product`. |
| Layout — Disable Box Shadow | Switcher inspector control (`kng_disable_card_shadow`). |
| Layout — Disable Box Shadow on Hover | Switcher inspector control (`kng_disable_card_shadow_hover`). |
| Layout — Card Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 50). |
| Layout — Card Border | Switcher inspector control (`kng_card_border`). |
| Text — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-single-product__title`. |
| Text — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Text — Typography (Kng Price Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-single-product__price`. |
| Text — Price Color | Writes CSS `color` onto the widget’s front-end markup. |
| Text — Typography (Kng Excerpt Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-single-product__excerpt`. |
| Text — Excerpt Color | Writes CSS `color` onto the widget’s front-end markup. |
| Add to Cart — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-single-product__cta .button`. |
| Add to Cart — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Add to Cart — Indicator Size | Spacing/size control (min 8, max 40). |
| Add to Cart (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Add to Cart (Normal) — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Add to Cart (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-single-product__cta .button`. |
| Add to Cart (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-single-product__cta .button`. |
| Add to Cart (Hover) — Hover Text Color | Writes CSS (button, color) onto the widget’s front-end markup. |
| Add to Cart (Hover) — Hover Background | Writes CSS (button, background-color) onto the widget’s front-end markup. |
| Add to Cart (Hover) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-single-product__cta .button:hover`. |
| Add to Cart (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-single-product__cta .button:hover`. |
| Add to Cart — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 40). |
| View Cart Link — Spacing From Button | Writes CSS `margin-left` onto the widget’s front-end markup. (min 0, max 60). |
| View Cart Link — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-single-product__cta .added_to_cart`. |
| View Cart Link — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| View Cart Link (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| View Cart Link (Normal) — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| View Cart Link (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-single-product__cta .added_to_cart`. |
| View Cart Link (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-single-product__cta .added_to_cart`. |
| View Cart Link (Hover) — Hover Text Color | Writes CSS (cart, color) onto the widget’s front-end markup. |
| View Cart Link (Hover) — Hover Background | Writes CSS (cart, background-color) onto the widget’s front-end markup. |
| View Cart Link (Hover) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-single-product__cta .added_to_cart:hover`. |
| View Cart Link (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-single-product__cta .added_to_cart:hover`. |
| View Cart Link — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 40). |
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 Single Product 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 Single Product 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
Quick View Product
Quick View Product is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Quick View Product” in the Elementor panel.
WooCommerce Floating Cart Icon
WooCommerce Floating Cart Icon is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “WooCommerce Floating Cart Icon” in the Elementor panel.
360° Product Viewer
360° Product Viewer is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “360° Product Viewer” in the Elementor panel.
Wishlist Button
Wishlist Button is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Wishlist Button” in the Elementor panel.
Wishlist Counter
Wishlist Counter is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Wishlist Counter” in the Elementor panel.
Wishlist Icon
Wishlist Icon is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Wishlist Icon” in the Elementor panel.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Single Product after you activate it.