WooCommerce · Elementor
Quick Product Slider widget for Elementor
A compact product slider with fewer controls than WooCommerce Grid — for a simple featured row.
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
A compact product slider with fewer controls than WooCommerce Grid — for a simple featured row.
Quick Product Slider Widget (Free).
render() writes HTML data attributes: data-autoplay, data-autoplay-delay, data-autoplay-pause-on-hover, data-autoplay-stop-on-interaction, data-loop, data-navigation, data-pagination, data-product_id.
Content is loaded with WP_Query in PHP (not a hardcoded list in the editor).
Output depends on WooCommerce objects (products, cart, or account). Empty without WooCommerce data.
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 “Quick Product Slider”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Products Number”, “Order By”, “Order”, “Categories (Pro)”. Style and Content tabs are listed on this page.
- Preview the published page. Quick Product Slider Widget (Free).
When to use it
- New arrivals.
- A sale strip.
- Related products under a post.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Quick Product Slider.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Query — Products Number | Free version limited to 12 products. |
| Query — Order By | The chosen value is read in render() and applied on the front end. Options: Date; Title; Price; Popularity; Rating; Random. |
| Query — Order | The chosen value is read in render() and applied on the front end. Options: DESC; ASC. |
| Query — Categories (Pro) | Comma-separated slugs. |
| Slider Settings — Slides Per View | Numeric value used in this widget’s render/JS (default 3, min 1, max 6). |
| Slider Settings — Slides Per View (Tablet) | Numeric value used in this widget’s render/JS (default 2, min 1, max 6). |
| Slider Settings — Slides Per View (Mobile) | Numeric value used in this widget’s render/JS (default 1, min 1, max 6). |
| Slider Settings — Space Between | Numeric value used in this widget’s render/JS (default 20, min 0, max 80). |
| Slider Settings — Slides Per Group | Numeric value used in this widget’s render/JS (default 1, min 1, max 6). |
| Slider Settings — Loop | Switcher inspector control (`kng_loop`). |
| Slider Settings — Autoplay | Passed through to Swiper autoplay. |
| Slider Settings — Autoplay Delay (ms) | Numeric value used in this widget’s render/JS (default 3200, min 1000, max 10000). |
| Slider Settings — Pause on Hover | Passed through to Swiper autoplay. |
| Slider Settings — Stop on Interaction | Passed through to Swiper autoplay. |
| Slider Settings — Transition Speed (ms) | Numeric value used in this widget’s render/JS (default 600, min 100, max 5000). |
| Animations — Hover Animation | The chosen value is read in render() and applied on the front end. Options: None; Small Lift; Lift; Image Zoom; Tilt; Float; Scale & Fade. |
| Navigation — Show Arrows | Passed through to prev/next carousel arrows. |
| Navigation — Position | Selects the value used for prev/next carousel arrows. Options: Outside; Inside. |
| Navigation — Alignment | Selects the value used for prev/next carousel arrows. Options: Top; Center; Bottom. |
| Navigation — Offset | Spacing/size control (min 0, max 80). |
| Navigation — Hide on Tablet | Switcher inspector control (`kng_navigation_hide_tablet`). |
| Navigation — Hide on Mobile | Switcher inspector control (`kng_navigation_hide_mobile`). |
| Navigation — Inside Padding | Spacing/size control (min 0, max 80). |
| Navigation — Arrows Gap | Spacing/size control (min 4, max 80). |
| Pagination — Show Pagination | Passed through to Swiper pagination. |
| Pagination — Position | Swiper `pagination.type` on the front end. Options: Outside; Inside. |
| Pagination — Alignment | Swiper `pagination.type` on the front end. Options: Start; Center; End. |
| Pagination — Offset | Spacing/size control (min 0, max 80). |
| Pagination — Dots Gap | Spacing/size control (min 2, max 36). |
| Display — Show Rating | Switcher inspector control (`kng_show_rating`). |
| Display — Show Price | Switcher inspector control (`kng_show_price`). |
| Display — Show Short Description | Switcher inspector control (`kng_show_excerpt`). |
| Display — Show Add to Cart | Switcher inspector control (`kng_show_add_to_cart`). |
| Display — Show Sale Badge | Switcher inspector control (`kng_show_badge`). |
| Display — Sale Badge Text | Printed in the widget HTML from render(). |
| Display — Excerpt Length (words) | Numeric value used in this widget’s render/JS (default 20, min 5, max 60). |
| Display — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Card — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Card — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-quick-product-slider__card`. |
| Card — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 50). |
| Card — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-quick-product-slider__card`. |
| Card — Disable Box Shadow | Switcher inspector control (`kng_card_shadow_disable`). |
| Card — Disable Box Shadow on Hover | Switcher inspector control (`kng_card_shadow_hover_disable`). |
| Card — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Text — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-quick-product-slider__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-quick-product-slider__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-quick-product-slider__excerpt`. |
| Text — Excerpt Color | Writes CSS `color` onto the widget’s front-end markup. |
| Rating — Empty Color | Writes CSS `color` onto the widget’s front-end markup. |
| Rating — Filled Color | Writes CSS `color` onto the widget’s front-end markup. |
| Rating — Size | Writes CSS `font-size` onto the widget’s front-end markup. (min 10, max 32). |
| Sale Badge — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-quick-product-slider__badge`. |
| Sale Badge — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Sale Badge — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Sale Badge — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-quick-product-slider__badge`. |
| Sale Badge — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-quick-product-slider__badge`. |
| Sale Badge — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 50). |
| Sale Badge — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Sale Badge — Offset Top | Writes CSS `top` onto the widget’s front-end markup. (min 0, max 80). |
| Sale Badge — Offset Left | Writes CSS `left` onto the widget’s front-end markup. (min 0, max 80). |
| Add to Cart — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-quick-product-slider__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-quick-product-slider__cta .button`. |
| Add to Cart (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-quick-product-slider__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-quick-product-slider__cta .button:hover`. |
| Add to Cart (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-quick-product-slider__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-quick-product-slider__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-quick-product-slider__cta .added_to_cart`. |
| View Cart Link (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-quick-product-slider__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-quick-product-slider__cta .added_to_cart:hover`. |
| View Cart Link (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-quick-product-slider__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). |
| Navigation Arrows — Size | Spacing/size control (min 24, max 96). |
| Navigation Arrows — Icon Size | Spacing/size control (min 6, max 28). |
| Navigation Arrows (Normal) — Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Navigation Arrows (Normal) — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Navigation Arrows (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-quick-product-slider__arrow`. |
| Navigation Arrows (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-quick-product-slider__arrow`. |
| Navigation Arrows (Hover) — Icon Color | Writes CSS (arrow, color) onto the widget’s front-end markup. |
| Navigation Arrows (Hover) — Background | Writes CSS (arrow, background-color) onto the widget’s front-end markup. |
| Navigation Arrows (Hover) — Border Color | Writes CSS (arrow, border-color) onto the widget’s front-end markup. |
| Navigation Arrows (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-quick-product-slider__arrow:hover`. |
| Navigation Arrows — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 80). |
| Pagination Dots — Dot Size | Spacing/size control (min 4, max 24). |
| Pagination Dots (Normal) — Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Pagination Dots (Active) — Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Pagination Dots (Active) — Active Width | Spacing/size control (min 4, max 32). |
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 Quick Product Slider 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 Quick Product Slider 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 Product Grid
A compact product grid with simple columns and spacing.
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.
WC Cart
The WooCommerce cart shortcode, styled in Elementor. Use on a cart template, not on a random marketing page.
WC Product Category
Products from one WooCommerce category, with style controls.
WC Product Page
Renders a WooCommerce product by ID via shortcode, with gallery and button styling.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Quick Product Slider after you activate it.