WooCommerce · Elementor
Compare Products Table widget for Elementor
A side-by-side comparison table of WooCommerce products the shopper selected.
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 side-by-side comparison table of WooCommerce products the shopper selected.
Compare Products Table Widget (Free).
render() writes HTML data attributes: data-hide-equal, data-product_id, data-product_sku, data-quantity, data-row-id, data-sticky-header.
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 “Compare Products Table”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Product IDs”, “Max Products”, “Categories (Pro)”, “Show Image”. Style and Content tabs are listed on this page.
When to use it
- A compare page.
- A “compare selected” template.
- A category with a compare CTA.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Products — Product IDs | Comma-separated product IDs to compare. |
| Products — Max Products | Free version limited to 4 products. |
| Products — Categories (Pro) | Comma-separated slugs (Pro). |
| Display — Show Image | Switcher inspector control (`kng_show_image`). |
| Display — Show Price | Switcher inspector control (`kng_show_price`). |
| Display — Show Rating | Switcher inspector control (`kng_show_rating`). |
| Display — Show Short Description | Passed through to the post excerpt. |
| Display — Show SKU | Switcher inspector control (`kng_show_sku`). |
| Display — Show Stock | Switcher inspector control (`kng_show_stock`). |
| Display — Show Add to Cart | Switcher inspector control (`kng_show_add_to_cart`). |
| Display — Hide Identical Rows (Pro) | Switcher inspector control (`kng_hide_equal_rows`). |
| Layout — Cell Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Layout — Cell Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Header — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-compare-table__head .king-addons-compare-table__cell`. |
| Header — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Header — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Header — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-compare-table__head .king-addons-compare-table__cell`. |
| Header — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 40). |
| Header — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-compare-table__head`. |
| Body — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-compare-table__body .king-addons-compare-table__cell`. |
| Body — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Body — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Body — Stripe Background | Writes CSS (row, background-color) onto the widget’s front-end markup. |
| Body — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-compare-table__cell`. |
| Body — Cell Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 30). |
| Add to Cart — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-compare-table__cell .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-compare-table__cell .button`. |
| Add to Cart (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-compare-table__cell .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-compare-table__cell .button:hover`. |
| Add to Cart (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-compare-table__cell .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-compare-table__cell .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-compare-table__cell .added_to_cart`. |
| View Cart Link (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-compare-table__cell .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-compare-table__cell .added_to_cart:hover`. |
| View Cart Link (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-compare-table__cell .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 Compare Products Table 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 Compare Products Table 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.
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.
WC Product Page
Renders a WooCommerce product by ID via shortcode, with gallery and button styling.
WooCommerce Grid & Slider
WooCommerce products in a grid, slider, or carousel with query and style controls. This is the main shop loop widget.
Ajax Add to Cart
An add-to-cart control that updates without a full page reload, with a notice you can style.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Compare Products Table after you activate it.