WooCommerce · Elementor
WooCommerce Grid & Slider widget for Elementor
WooCommerce products in a grid, slider, or carousel with query and style controls. This is the main shop loop widget.
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
WooCommerce products in a grid, slider, or carousel with query and style controls. This is the main shop loop widget.
render() writes HTML data attributes: data-ajax-filter, data-atc-animation, data-atc-animation-time, data-atc-fade-out-in, data-atc-popup, data-atcompare-animation, data-atcompare-animation-time, data-atcompare-fade-out-in.
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.
get_script_depends() enqueues: lightgallery-lightgallery.
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 “WooCommerce Grid & Slider”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Query Products”, “Order”, “Order By”, “Categories”. Style and Content tabs are listed on this page.
- Preview the published page. render() writes HTML data attributes: data-ajax-filter, data-atc-animation, data-atc-animation-time, data-atc-fade-out-in, data-atc-popup, data-atcompare-animation, data-atcompare-animation-time, data-atcompare-fade-out-in.
When to use it
- A homepage featured-products row.
- A custom shop section.
- A cross-sell slider.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including WooCommerce Grid & Slider.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Query — Query Products | Selects the value used for WP_Query posts_per_page. Options: Dynamic; Manual; Current Query; Featured (Pro); On Sale (Pro); Upsell (Pro); Cross-sell (Pro). |
| Query — Order | The chosen value is read in render() and applied on the front end. Options: Ascending; Descending. |
| Query — Order By | The chosen value is read in render() and applied on the front end. Options: Default; Date; Sales; Rating; Price - Low to High; Price - High to Low; Random (Pro). |
| Query — Categories | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| Query — Tags | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| Query — Exclude Products | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| Query — Select Products | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| Query — Products Per Page | WP_Query `posts_per_page` — how many posts are fetched (default 9, min 0). |
| Query — Offset | WP_Query `posts_per_page` — how many posts are fetched (default 0, min 0). |
| Query — Not Found Text | Printed in the widget HTML from render(). |
| Query — Randomize Query | Switcher inspector control (`query_randomize`). |
| Query — Exclude Items without Thumbnail | When this switch is on, render() outputs the wrapped markup. |
| Query — Exclude Out Of Stock | When this switch is on, render() outputs the wrapped markup. |
| Layout — Select Layout | Selects the value used for WP_Query posts_per_page. Options: FitRows - Equal Height; List Style; Slider / Carousel; Masonry - Unlimited Height (Pro). |
| Layout — Last Element to Bottom | Switcher inspector control (`stick_last_element_to_bottom`). |
| Layout — Last Element Position | Writes CSS `div` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Layout — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Layout — Columns | The chosen value is read in render() and applied on the front end. Options: One; Two; Three; Four (Pro); Five (Pro); Six (Pro). |
| Layout — Alignment | The chosen value is read in render() and applied on the front end. Options: Left; Right; ZigZag. |
| Layout — Width | Spacing/size control (min 0, max 100). |
| Layout — Distance | Spacing/size control (min 0, max 100). |
| Layout — Horizontal Gutter | Spacing/size control (min 0, max 150). |
| Layout — Vertical Gutter | Spacing/size control (min 0, max 150). |
| Layout — Show Sorting (Pro) | Switcher inspector control (`layout_sort_and_results_count`). |
| Layout — Show Filters | Switcher inspector control (`layout_filters`). |
| Layout — Show Pagination | Please note that Pagination doesn't work in editor. |
| Layout — Filters & Load More Experiment | When this switch is on, render() outputs the wrapped markup. |
| Layout — Open Links in New Tab (Pro) | Switcher inspector control (`open_links_in_new_tab`). |
| Layout — Select Animation | The chosen value is read in render() and applied on the front end. Options: Default; Zoom; Fade (Pro); Fade + SlideUp (Pro). |
| Layout — Animation Duration | Numeric value used in this widget’s render/JS (default 0.3, min 0, max 5). |
| Layout — Animation Delay | Numeric value used in this widget’s render/JS (default 0.1, min 0, max 5). |
| Layout — Columns (Carousel) | Selects the value used for prev/next carousel arrows. Options: One; Two; Three (Pro); Four (Pro); Five (Pro); Six (Pro). |
| Layout — Slides to Scroll | Numeric value used in this widget’s render/JS (default 2, min 1, max 10). |
| Layout — Gutter | Writes CSS `margin-left` onto the widget’s front-end markup. (min 0, max 50). |
| Layout — Navigation | Switcher inspector control (`layout_slider_nav`). |
| Layout — Select Icon | Selects the value used for prev/next carousel arrows. Options: Angle; Angle Double; Arrow; Arrow Circle; Arrow Circle Alt; Long Arrow; Chevron. |
| Layout — Pagination | Switcher inspector control (`layout_slider_dots`). |
| Layout — Pagination Layout | Options: Horizontal; Vertical (Pro). |
| Layout — Infinite Loop | Switcher inspector control (`layout_slider_loop`). |
| Layout — Effect | The chosen value is read in render() and applied on the front end. Options: Slide; Fade. |
| Layout — Effect Duration | Numeric value used in this widget’s render/JS (default 0.7, min 0, max 5). |
| Upsell / Cross-sell Title — Heading | Printed in the widget HTML from render(). |
| Upsell / Cross-sell Title — Title HTML Tag | The chosen value is read in render() and applied on the front end. Options: H1; H2; H3; H4; H5; H6; div; span…. |
| Grid Elements — Select Element | The chosen value is read in render() and applied on the front end. |
| Grid Elements — Location | Options: Above Media; Over Media; Below Media. |
| Grid Elements — Display | Options: Inline; Seperate Line; Custom Width. |
| Grid Elements — Element Width | Writes CSS `width` onto the widget’s front-end markup. (min 0, max 100). |
| Grid Elements — Vertical Align | Options: Top; Middle; Bottom. |
| Grid Elements — Horizontal Align | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Grid Elements — Title HTML Tag | The chosen value is read in render() and applied on the front end. Options: H1; H2; H3; H4; H5; H6; div; span…. |
| Grid Elements — Trim Text By | Selects the value used for the excerpt produced by wp_trim_words(). |
| Grid Elements — Word Count | Word count passed to WordPress excerpt trimming for each card (default 20, min 1). |
| Grid Elements — Letter Count | Numeric value used in this widget’s render/JS (default 40, min 1). |
| Grid Elements — Separator | Printed in the widget HTML from render(). |
| Grid Elements — Layout | The chosen value is read in render() and applied on the front end. Options: Inline; Block. |
| Grid Elements — Separator (Element Sale Dates Sep) | Printed in the widget HTML from render(). |
| Grid Elements — Post Format Audio | The chosen value is read in render() and applied on the front end. Options: Default; Meta Value. |
| Grid Elements — Audio Meta Value | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| Grid Elements — Post Format Video | The chosen value is read in render() and applied on the front end. Options: Default; Meta Value. |
| Grid Elements — Video Meta Value | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| Grid Elements — Media Overlay | When this switch is on, render() outputs the wrapped markup. |
| Grid Elements — Select Styling | The chosen value is read in render() and applied on the front end. Options: Separator Style 1; Separator Style 2. |
| Grid Elements — Select Icon | The chosen value is read in render() and applied on the front end. Options: Icon 1; Icon 2. |
| Grid Elements — Show Score | When this switch is on, render() outputs the wrapped markup. |
| Grid Elements — Unmarked Style | The chosen value is read in render() and applied on the front end. Options: Solid; Outline. |
| Grid Elements — Show Out of Stock Badge | Switcher inspector control (`element_status_offstock`). |
| Grid Elements — Show Featured Badge | Switcher inspector control (`element_status_featured`). |
| Grid Elements — Simple Item Text | Saved on the widget and consumed in render(). |
| Grid Elements — Grouped Item Text | Saved on the widget and consumed in render(). |
| Grid Elements — Variable Item Text | Saved on the widget and consumed in render(). |
| Grid Elements — Open Links in New Tab | Switcher inspector control (`element_open_links_in_new_tab`). |
| Grid Elements — Extra Text Display | The chosen value is read in render() and applied on the front end. Options: None; Before Element; After Element. |
| Grid Elements — Extra Text | Printed in the widget HTML from render(). |
| Grid Elements — Sale Starts Date | Switcher inspector control (`show_sale_starts_date`). |
| Grid Elements — Text | Printed in the widget HTML from render(). |
| Grid Elements — Sale Ends Date | Switcher inspector control (`show_sale_ends_date`). |
| Grid Elements — Text (Element Sale Ends Text) | Printed in the widget HTML from render(). |
| Grid Elements — Extra Icon Position | The chosen value is read in render() and applied on the front end. Options: None; Before Element; After Element. |
| Grid Elements — Select Icon (Element Extra Icon) | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Grid Elements — Show Icon | When this switch is on, render() outputs the wrapped markup. |
| Grid Elements — Show Text | When this switch is on, render() outputs the wrapped markup. |
| Grid Elements — Add Text | Printed in the widget HTML from render(). |
| Grid Elements — Add Text (Add To Compare Text) | Printed in the widget HTML from render(). |
| Grid Elements — Remove Text | Printed in the widget HTML from render(). |
| Grid Elements — Remove Text (Remove From Compare Text) | Printed in the widget HTML from render(). |
| Grid Elements — Select Animation | Animation picker; the chosen effect is applied on the front end. |
| Grid Elements — Animation Duration | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.3, min 0, max 5). |
| Grid Elements — Animation Delay | Writes CSS (king-addons-animation-wrap, transition-delay) onto the widget’s front-end markup. (default 0, min 0, max 5). |
| Grid Elements — Animation Timing | Select inspector control (`element_animation_timing`). |
| Grid Elements — Animation Size | Options: Small; Medium; Large. |
| Grid Elements — Animation Transparency | Switcher inspector control (`element_animation_tr`). |
| Grid Elements — Disable on Mobile/Tablet | Switcher inspector control (`element_animation_disable_mobile`). |
| Grid Elements — Show on this Device | Switcher inspector control (`element_show_on`). |
| Elements — Grid Elements | Repeater rows; render() loops each item to build the list or slides. |
| Media Overlay — Overlay Width | Writes CSS (width, top, left, bottom, right) onto the widget’s front-end markup. (min 0, max 100). |
| Media Overlay — Overlay Height | Writes CSS (height, top, left, bottom, right) onto the widget’s front-end markup. (min 0, max 100). |
| Media Overlay — Link to Single Page | Switcher inspector control (`overlay_post_link`). |
| Media Overlay — Select Animation | Animation picker; the chosen effect is applied on the front end. |
| Media Overlay — Animation Duration | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.3, min 0, max 5). |
| Media Overlay — Animation Delay | Writes CSS (king-addons-animation-wrap, transition-delay) onto the widget’s front-end markup. (default 0, min 0, max 5). |
| Media Overlay — Animation Timing | Select inspector control (`overlay_animation_timing`). |
| Media Overlay — Animation Size | Options: Small; Medium; Large. |
| Media Overlay — Animation Transparency | Switcher inspector control (`overlay_animation_tr`). |
| Image Effects — 2nd Image on Hover (Pro) | When this switch is on, render() outputs the featured image. |
| Image Effects — Select Effect | The chosen value is read in render() and applied on the front end. Options: None; Zoom In (Pro); Zoom Out (Pro); Grayscale In; Grayscale Out (Pro); Blur In; Blur Out (Pro); Slide. |
| Image Effects — Animation Duration | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.5, min 0, max 5). |
| Image Effects — Animation Delay | Writes CSS (king-addons-grid-media-wrap, transition-delay) onto the widget’s front-end markup. (default 0, min 0, max 5). |
| Image Effects — Animation Timing | Selects the value used for the featured image. |
| Image Effects — Animation Size | The chosen value is read in render() and applied on the front end. Options: Small; Medium; Large. |
| Image Effects — Animation Direction | The chosen value is read in render() and applied on the front end. Options: Top; Right; Bottom; Left. |
| Lightbox Popup — Autoplay Slides | Passed through to Swiper autoplay. |
| Lightbox Popup — Show Progress Bar | Switcher inspector control (`lightbox_popup_progressbar`). |
| Lightbox Popup — Autoplay Speed | Numeric value used in this widget’s render/JS (default 5, min 1, max 10). |
| Lightbox Popup — Show Counter | Switcher inspector control (`lightbox_popup_counter`). |
| Lightbox Popup — Show Arrows | Switcher inspector control (`lightbox_popup_arrows`). |
| Lightbox Popup — Show Captions | Switcher inspector control (`lightbox_popup_captions`). |
| Lightbox Popup — Show Zoom Button | Switcher inspector control (`lightbox_popup_zoom`). |
| Lightbox Popup — Show Full Screen Button | Switcher inspector control (`lightbox_popup_fullscreen`). |
| Lightbox Popup — Show Download Button | Switcher inspector control (`lightbox_popup_download`). |
| Filters — Select Taxonomy | The chosen value is read in render() and applied on the front end. Options: Categories; Tags. |
| Filters — Set Linkable Filters | When this switch is on, render() skips the wrapped markup. |
| Filters — Hide Empty Filters | Switcher inspector control (`filters_hide_empty`). |
| Filters — Show "All" Filter | Switcher inspector control (`filters_all`). |
| Filters — "All" Filter Text | Printed in the widget HTML from render(). |
| Filters — Separator | Printed in the widget HTML from render(). |
| Filters — Separator Position | The chosen value is read in render() and applied on the front end. Options: Left; Right. |
| Filters — Align | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Filters — Select Animation | The chosen value is read in render() and applied on the front end. Options: Default; Zoom; Fade (Pro); Fade + SlideUp (Pro). |
| Filters — Animation Duration | Numeric value used in this widget’s render/JS (default 0.3, min 0, max 5). |
| Filters — Animation Delay | Numeric value used in this widget’s render/JS (default 0.1, min 0, max 5). |
| Pagination — Select Type | Swiper `pagination.type` on the front end. Options: Default; Numbered; Load More Button; Infinite Scrolling (Pro). |
| Pagination — Older Posts Text | Printed in the widget HTML from render(). |
| Pagination — Newer Posts Text | Printed in the widget HTML from render(). |
| Pagination — Select Icon | Swiper `pagination.type` on the front end. Options: Angle; Angle Double; Arrow; Arrow Circle; Arrow Circle Alt; Long Arrow; Chevron. |
| Pagination — Previous & Next Buttons | When this switch is on, render() outputs Swiper pagination. |
| Pagination — Prev Page Text | Printed in the widget HTML from render(). |
| Pagination — Next Page Text | Printed in the widget HTML from render(). |
| Pagination — Select Icon (Pagination Pn Icon) | Swiper `pagination.type` on the front end. Options: Angle; Angle Double; Arrow; Arrow Circle; Arrow Circle Alt; Long Arrow; Chevron. |
| Pagination — First & Last Buttons | When this switch is on, render() outputs Swiper pagination. |
| Pagination — First Page Text | Printed in the widget HTML from render(). |
| Pagination — Last Page Text | Printed in the widget HTML from render(). |
| Pagination — Select Icon (Pagination Fl Icon) | Swiper `pagination.type` on the front end. Options: Angle; Angle Double; Arrow; Arrow Circle; Arrow Circle Alt; Long Arrow; Chevron. |
| Pagination — Show Disabled Buttons | When this switch is on, render() outputs Swiper pagination. |
| Pagination — Range | Numeric value used in this widget’s render/JS (default 2, min 1). |
| Pagination — Load More Text | Printed in the widget HTML from render(). |
| Pagination — Finish Text | Printed in the widget HTML from render(). |
| Pagination — Select Animation | Swiper `pagination.type` on the front end. Options: None; Loader 1; Loader 2; Loader 3; Loader 4; Loader 5; Loader 6. |
| Pagination — Alignment | Options: Left; Center; Right; Justified. |
| Grid Item — Apply Styles To | Options: Inner Elements; Wrapper. |
| Grid Item — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Grid Item — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Grid Item — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Grid Item — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Grid Item — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Grid Item — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Grid Item — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-grid-item`. |
| Grid Media — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Grid Media — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Grid Media — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Grid Media — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Media Overlay — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Media Overlay — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Title (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Title (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Title (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Title (Hover) — Color | Writes CSS (a, color) onto the widget’s front-end markup. |
| Title (Hover) — Background Color | Writes CSS (a, background-color) onto the widget’s front-end markup. |
| Title (Hover) — Border Color | Writes CSS (a, border-color) onto the widget’s front-end markup. |
| Title — Transition Duration (seconds) | Writes CSS (transition-duration, king-addons-pointer-item) onto the widget’s front-end markup. (default 0.3, min 0, max 5). |
| Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-title a`. |
| Title — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Title — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Title — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Title — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Excerpt — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Excerpt — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Excerpt — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Excerpt — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-excerpt`. |
| Excerpt — Justify Text | Switcher inspector control (`excerpt_justify`). |
| Excerpt — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Excerpt — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Excerpt — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Excerpt — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Categories (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Categories (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Categories (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Categories (Normal) — Extra Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Categories (Normal) — Extra Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Categories (Hover) — Color | Writes CSS (a, color, king-addons-pointer-item, background-color) onto the widget’s front-end markup. |
| Categories (Hover) — Background Color | Writes CSS (a, background-color) onto the widget’s front-end markup. |
| Categories (Hover) — Border Color | Writes CSS (a, border-color) onto the widget’s front-end markup. |
| Categories — Transition Duration (seconds) | Writes CSS (transition-duration, king-addons-pointer-item) onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Categories — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-product-categories`. |
| Categories — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Categories — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Categories — Extra Text Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Categories — Extra Icon Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Categories — Gutter | Writes CSS `margin-right` onto the widget’s front-end markup. (min 0, max 20). |
| Categories — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Categories — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Categories — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Tags (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Tags (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Tags (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Tags (Normal) — Extra Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Tags (Normal) — Extra Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Tags (Hover) — Color | Writes CSS (a, color, king-addons-pointer-item, background-color) onto the widget’s front-end markup. |
| Tags (Hover) — Background Color | Writes CSS (a, background-color) onto the widget’s front-end markup. |
| Tags (Hover) — Border Color | Writes CSS (a, border-color) onto the widget’s front-end markup. |
| Tags — Transition Duration (seconds) | Writes CSS (transition-duration, king-addons-pointer-item) onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Tags — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-product-tags`. |
| Tags — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Tags — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Tags — Extra Text Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Tags — Extra Icon Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Tags — Gutter | Writes CSS `margin-right` onto the widget’s front-end markup. (min 0, max 20). |
| Tags — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Tags — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Tags — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Rating — Color | Writes CSS (i, color) onto the widget’s front-end markup. |
| Rating — Unmarked Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Rating — Score Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Rating — Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 0, max 50). |
| Rating — Gutter | Writes CSS (margin-right, span, margin-left) onto the widget’s front-end markup. (min 0, max 25). |
| Rating — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-woocommerce-rating span`. |
| Rating — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Status — On Sale Color | Writes CSS `color` onto the widget’s front-end markup. |
| Status — On Sale BG Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Status — On Sale Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Status — Featured Color | Writes CSS `color` onto the widget’s front-end markup. |
| Status — Featured BG Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Status — Featured Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Status — Out of Stock Color | Writes CSS `color` onto the widget’s front-end markup. |
| Status — Out of Stock BG Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Status — Out of Stock Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Status — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-status .inner-block > span`. |
| Status — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Status — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Status — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Status — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Status — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Status — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-grid-item-status .inner-block > span`. |
| Price — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Price — Old Price Color | Writes CSS `color` onto the widget’s front-end markup. |
| Price — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Price — Border Color | Writes CSS `border-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}} .king-addons-grid-item-price .inner-block > span`. |
| Price — Old Price Font Size | Writes CSS `font-size` onto the widget’s front-end markup. (min 10, max 100). |
| Price — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Price — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Price — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Price — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Price — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Price — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-grid-item-price .inner-block > span`. |
| Sale Dates — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Sale Dates — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Sale Dates — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Sale Dates — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Sale Dates — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-sale_dates .inner-block > .king-addons-sale-dates`. |
| Sale Dates — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Sale Dates — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Sale Dates — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Sale Dates — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Sale Dates — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Add to Cart (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Add to Cart (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Add to Cart (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Add to Cart (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-grid-item-add-to-cart .inner-block a`. |
| Add to Cart (Hover) — Color | Writes CSS (a, color) onto the widget’s front-end markup. |
| Add to Cart (Hover) — Background Color | Writes CSS (king-addons-button-none, background-color, cart, a) onto the widget’s front-end markup. |
| Add to Cart (Hover) — Border Color | Writes CSS (a, border-color) onto the widget’s front-end markup. |
| Add to Cart (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-grid-item-add-to-cart .inner-block :hover a`. |
| Add to Cart — Transition Duration (seconds) | Writes CSS (transition-duration, a) onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Add to Cart — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-grid-item-add-to-cart a`. |
| Add to Cart — Extra Icon Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Add to Cart — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Add to Cart — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Add to Cart — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Add to Cart — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Add to Cart — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Add to Wishlist (Normal) — Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Add to Wishlist (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Add to Wishlist (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Add to Wishlist (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-wishlist-add, {{WRAPPER}} .king-addons-wishlist-remove`. |
| Add to Wishlist (Normal) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-wishlist-add span, {{WRAPPER}} .king-addons-wishlist-add i, .k…`. |
| Add to Wishlist (Normal) — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.5, min 0, max 5). |
| Add to Wishlist (Hover) — Color | Writes CSS (king-addons-wishlist-add, color, fill) onto the widget’s front-end markup. |
| Add to Wishlist (Hover) — Border Color | Writes CSS (king-addons-wishlist-add, border-color) onto the widget’s front-end markup. |
| Add to Wishlist (Hover) — Background Color | Writes CSS (king-addons-wishlist-add, background-color) onto the widget’s front-end markup. |
| Add to Wishlist (Hover) — Box Shadow | Elementor box-shadow group for the selector. |
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
Why doesn’t WooCommerce Grid & Slider work in the Elementor preview?
AJAX handlers run on the published page. Preview the front end (or a Theme Builder preview of a real post) to test submit/filter requests.
Do I need WooCommerce?
Yes. Install WooCommerce, publish products, then drop WooCommerce Grid on a page or a shop template.
Does WooCommerce Grid & 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
WC Products
The WooCommerce products shortcode, with King Addons style controls around it.
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 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.
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 WooCommerce Grid & Slider after you activate it.