WooCommerce · Elementor
360° Product Viewer widget for Elementor
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.
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
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.
360 Product Viewer Widget (Free).
render() writes HTML data attributes: data-aspect-ratio, data-autoplay, data-autoplay-mode, data-autoplay-speed, data-drag-axis, data-drag-sensitivity, data-enable-scroll, data-frame.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
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 “360° Product Viewer”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Frame Image”, “Label (optional)”, “Alt Text (optional)”, “Frames”. Style and Content tabs are listed on this page.
When to use it
- An Elementor page that needs 360° Product Viewer.
- A layout in the product grids, cart, checkout, and shop pages group.
- Search the panel for “360° Product Viewer” after King Addons is active.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Frames — Frame Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Frames — Label (optional) | Text inspector control (`kng_frame_label`). |
| Frames — Alt Text (optional) | Text inspector control (`kng_frame_alt`). |
| Frames | Repeater rows; render() loops each item to build the list or slides. |
| Viewer Behavior — Aspect Ratio | Spacing/size control (min 0.5, max 2.5). |
| Viewer Behavior — Start From Frame | Numeric value used in this widget’s render/JS (default 1, min 1, max 200). |
| Viewer Behavior — Autoplay | Written to the `data-autoplay` HTML attribute in render(). Passed through to Swiper autoplay. |
| Viewer Behavior — Autoplay Speed (ms/frame) | Spacing/size control (min 20, max 400). |
| Viewer Behavior — Kng Autoplay Mode (Pro) | Selects the value used for Swiper autoplay. Options: Loop; Ping Pong (Pro). |
| Viewer Behavior — Drag Sensitivity (px/frame) | Spacing/size control (min 2, max 40). |
| Viewer Behavior — Invert Drag Direction | Written to the `data-invert-drag` HTML attribute in render(). |
| Viewer Behavior — Kng Drag Axis (Pro) | The chosen value is read in render() and applied on the front end. Options: Horizontal; Vertical (Pro); Both (Pro). |
| Viewer Behavior — Kng Scroll Wheel (Pro) | Switcher inspector control (`kng_scroll_wheel`). |
| Viewer Behavior — Kng Inertia (Pro) | Spacing/size control (min 0, max 0.3). |
| Viewer UI — Show Drag Hint | Switcher inspector control (`kng_show_hint`). |
| Viewer UI — Hint Text | Printed in the widget HTML from render(). |
| Viewer UI — Show Loader | Switcher inspector control (`kng_show_loader`). |
| Viewer UI — Loader Text | Printed in the widget HTML from render(). |
| Viewer UI — Show Progress | Written to the `data-show-progress` HTML attribute in render(). |
| Viewer UI — Kng Show Zoom (Pro) | Switcher inspector control (`kng_show_zoom`). |
| Viewer UI — Kng Zoom Scale (Pro) | Spacing/size control (min 1.05, max 2.5). |
| Hotspots — Label | Text inspector control (`kng_hotspot_label`). |
| Hotspots — Visible On Frame | Numeric control (default 1, min 1, max 500). |
| Hotspots — Horizontal (%) | Spacing/size control (min 0, max 100). |
| Hotspots — Vertical (%) | Spacing/size control (min 0, max 100). |
| Hotspots — Link (optional) | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Hotspots | Repeater rows; render() loops each item to build the list or slides. |
| Viewer — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Viewer — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Viewer — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 100). |
| Viewer — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-product-360-viewer`. |
| Viewer — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-product-360-viewer`. |
| Viewer — Image Fit | Writes CSS `object-fit` onto the widget’s front-end markup. Options: Contain; Cover. |
| Overlays & Toolbar — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-product-360-viewer__hint, {{WRAPPER}} .king-addons-product-360…`. |
| Overlays & Toolbar — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Overlays & Toolbar — Hint Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Overlays & Toolbar — Loader Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Overlays & Toolbar — Loader Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Overlays & Toolbar — Loader Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Overlays & Toolbar — Progress Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Overlays & Toolbar — Progress Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Overlays & Toolbar — Overlay Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 40). |
| Dot Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Label Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Label Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Dot Size | Spacing/size control (min 8, max 28). |
| Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-product-360-viewer__hotspot-label`. |
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 360° Product Viewer 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 360° Product Viewer 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.
Single Product
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.
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.
Wishlist Lists Switcher
Wishlist Lists Switcher is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Wishlist Lists Switcher” in the Elementor panel.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for 360° Product Viewer after you activate it.