Content · Elementor
Comparison Matrix Cards widget for Elementor
Comparison Matrix Cards is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Comparison Matrix Cards” 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
Comparison Matrix Cards is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Comparison Matrix Cards” in the Elementor panel.
Comparison Matrix Cards Widget (Free).
render() writes HTML data attributes: data-feature-group, data-feature-id, data-feature-label, data-feature-tooltip, data-highlight-compare, data-highlight-default, data-highlight-enable, data-highlight-mode.
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 “Comparison Matrix Cards”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Source”, “Kng Max Plans”, “Kng Acf Post Source”, “Kng Acf Post Id”. Style and Content tabs are listed on this page.
When to use it
- An Elementor page that needs Comparison Matrix Cards.
- A layout in the posts, cards, lists, FAQs, and editorial layouts group.
- Search the panel for “Comparison Matrix Cards” after King Addons is active.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Comparison Matrix Cards.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Data Source — Source | The chosen value is read in render() and applied on the front end. Options: Manual; ACF; WooCommerce. |
| Data Source — Kng Max Plans | Applies to ACF/Woo data sources. |
| ACF Mapping — Kng Acf Post Source | The chosen value is read in render() and applied on the front end. Options: Current Post; Custom Post ID. |
| ACF Mapping — Kng Acf Post Id | Numeric value used in this widget’s render/JS (min 1). |
| ACF Mapping — Kng Acf Plans Repeater | Saved on the widget and consumed in render(). |
| ACF Mapping — Kng Acf Plan Name Field | Saved on the widget and consumed in render(). |
| ACF Mapping — Kng Acf Plan Badge Field | Saved on the widget and consumed in render(). |
| ACF Mapping — Kng Acf Plan Description Field | Saved on the widget and consumed in render(). |
| ACF Mapping — Kng Acf Plan Price Field | Saved on the widget and consumed in render(). |
| ACF Mapping — Kng Acf Plan Subtitle Field | Saved on the widget and consumed in render(). |
| ACF Mapping — Kng Acf Plan Cta Label Field | Saved on the widget and consumed in render(). |
| ACF Mapping — Kng Acf Plan Cta Link Field | Accepts ACF Link field or URL string. |
| ACF Mapping — Kng Acf Plan Footer Field | Saved on the widget and consumed in render(). |
| ACF Mapping — Kng Acf Plan Features Repeater | Saved on the widget and consumed in render(). |
| ACF Mapping — Kng Acf Feature Label Field | Saved on the widget and consumed in render(). |
| ACF Mapping — Kng Acf Feature Value Field | Saved on the widget and consumed in render(). |
| ACF Mapping — Kng Acf Feature Value Type Field | Optional field with values: included, excluded, limited, text. |
| ACF Mapping — Kng Acf Feature Tooltip Field | Saved on the widget and consumed in render(). |
| ACF Mapping — Kng Acf Feature Group Field | Saved on the widget and consumed in render(). |
| WooCommerce Mapping — Kng Woo Products Source | The chosen value is read in render() and applied on the front end. Options: Manual Select; Related Products; Upsells; Cross-sells. |
| WooCommerce Mapping — Kng Woo Products | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| WooCommerce Mapping — Kng Woo Products Limit | Numeric control (default 4, min 2, max 8). |
| WooCommerce Mapping — Kng Woo Compare Variations | Compare variations of a single variable product. |
| WooCommerce Mapping — Kng Woo Variation Title Mode | The chosen value is read in render() and applied on the front end. Options: Full Name; Attributes Only; Parent Name. |
| WooCommerce Mapping — Kng Woo Variation Subtitle Mode | The chosen value is read in render() and applied on the front end. Options: None; Attributes. |
| WooCommerce Mapping — Kng Woo Show Price | Switcher inspector control (`kng_woo_show_price`). |
| WooCommerce Mapping — Kng Woo Cta Mode | The chosen value is read in render() and applied on the front end. Options: Product Page; Add to Cart. |
| WooCommerce Mapping — Kng Woo Cta Label | Printed in the widget HTML from render(). |
| kng_woo_attributes — Attribute Slug | Text inspector control (`kng_woo_attr_slug`). |
| kng_woo_attributes — Label Override | Text inspector control (`kng_woo_attr_label`). |
| kng_woo_attributes — Group | Text inspector control (`kng_woo_attr_group`). |
| kng_woo_attributes — Tooltip | Textarea inspector control (`kng_woo_attr_tooltip`). |
| kng_woo_attributes — Fallback Meta Key | Text inspector control (`kng_woo_attr_fallback`). |
| WooCommerce Mapping — Kng Woo Attributes | Repeater rows; render() loops each item to build the list or slides. |
| Plans — Plans Count | Free version supports 2-3 plans. |
| Plans — Name | Text inspector control (`kng_plan_name`). |
| Plans — Badge | Text inspector control (`kng_plan_badge`). |
| Plans — Short Description | Textarea inspector control (`kng_plan_description`). |
| Plans — Price | Text inspector control (`kng_plan_price`). |
| Plans — Subtitle | Text inspector control (`kng_plan_subtitle`). |
| Plans — CTA Label | Text inspector control (`kng_plan_cta_label`). |
| Plans — CTA Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Plans — Footer Note | Text inspector control (`kng_plan_footer_note`). |
| Plans | Repeater rows; render() loops each item to build the list or slides. |
| Feature Rows — Feature Label | Text inspector control (`kng_feature_label`). |
| Feature Rows — Tooltip | Textarea inspector control (`kng_feature_tooltip`). |
| Feature Rows — Group | Text inspector control (`kng_feature_group`). |
| Features — Feature Rows | Repeater rows; render() loops each item to build the list or slides. |
| Layout — Preset | The chosen value is read in render() and applied on the front end. Options: Minimal; Bordered; Soft Shadow. |
| Layout — Columns | The chosen value is read in render() and applied on the front end. |
| Layout — Gap | Spacing/size control (min 0, max 80). |
| Layout — Equal Height Cards | Switcher inspector control (`kng_equal_height`). |
| Layout — Mobile Layout | The chosen value is read in render() and applied on the front end. Options: Stack; Horizontal Scroll. |
| Layout — Hide Mobile Scrollbar | Switcher inspector control (`kng_hide_scrollbar`). |
| Layout — Card Min Width (Mobile) | Spacing/size control (min 200, max 420). |
| Kng Highlight Enable | Switcher inspector control (`kng_highlight_enable`). |
| Kng Highlight Mode | The chosen value is read in render() and applied on the front end. Options: Dim Identical; Hide Identical; Highlight Unique. |
| Kng Highlight Style | The chosen value is read in render() and applied on the front end. Options: Background; Border; Icon Emphasis. |
| Kng Highlight Compare | The chosen value is read in render() and applied on the front end. Options: Strict Match; Normalized. |
| Kng Highlight Toggle | Switcher inspector control (`kng_highlight_toggle`). |
| Kng Highlight Toggle Label | Printed in the widget HTML from render(). |
| Kng Highlight Default | Switcher inspector control (`kng_highlight_default`). |
| Kng Sticky Enable | Switcher inspector control (`kng_sticky_enable`). |
| Kng Sticky Offset | Spacing/size control (min 0, max 120). |
| Kng Sticky Shadow | Switcher inspector control (`kng_sticky_shadow`). |
| Kng Sticky Mobile Mode | The chosen value is read in render() and applied on the front end. Options: Off; Compact; Full. |
| Kng Search Enable | Switcher inspector control (`kng_search_enable`). |
| Kng Search Placeholder | Printed in the widget HTML from render(). |
| Kng Search Includes Tooltip | Switcher inspector control (`kng_search_includes_tooltip`). |
| Card — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-comparison-matrix-cards__card`. |
| Card — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-comparison-matrix-cards__card`. |
| Card — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 60). |
| Card — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-comparison-matrix-cards__card`. |
| Card — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Card — Hover Background | Writes CSS (card, background) onto the widget’s front-end markup. |
| Card — Hover Border Color | Writes CSS (card, border-color) onto the widget’s front-end markup. |
| Card — Box Shadow (Kng Card Hover Shadow) | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-comparison-matrix-cards__card:hover`. |
| Card — Hover Lift | Spacing/size control (min -30, max 30). |
| Header — Title Color | Writes CSS `color` 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-comparison-matrix-cards__title`. |
| Header — Price Color | Writes CSS `color` onto the widget’s front-end markup. |
| Header — Typography (Kng Price Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-comparison-matrix-cards__price`. |
| Header — Subtitle Color | Writes CSS `color` onto the widget’s front-end markup. |
| Header — Typography (Kng Subtitle Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-comparison-matrix-cards__subtitle, {{WRAPPER}} .king-addons-co…`. |
| Header — Header Spacing | Spacing/size control (min 0, max 40). |
| Header — Badge Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Header — Badge Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Features — Label Color | Writes CSS `color` onto the widget’s front-end markup. |
| Features — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-comparison-matrix-cards__feature-label`. |
| Features — Value Color | Writes CSS `color` onto the widget’s front-end markup. |
| Features — Typography (Kng Feature Value Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-comparison-matrix-cards__feature-value`. |
| Features — Icon Size | Writes CSS (width, height) onto the widget’s front-end markup. (min 12, max 32). |
| Features — Included Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Features — Excluded Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Features — Limited Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Features — Item Spacing | Writes CSS (gap, feature, padding-bottom) onto the widget’s front-end markup. (min 4, max 32). |
| Features — Divider Color | Color written to this widget’s CSS selector. |
| Features — Divider Style | Options: Solid; Dashed; Dotted. |
| Features — Divider Width | Spacing/size control (min 0, max 4). |
| Features — Group Color | Writes CSS `color` onto the widget’s front-end markup. |
| Features — Typography (Kng Feature Group Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-comparison-matrix-cards__group`. |
| Features — Group Background | Color written to this widget’s CSS selector. |
| Features — Group Padding | Spacing/size control. |
| Features — Group Border Radius | Spacing/size control (min 0, max 40). |
| Features — Tooltip Background | Color written to this widget’s CSS selector. |
| Features — Tooltip Text Color | Color written to this widget’s CSS selector. |
| Features — Typography (Kng Tooltip Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-comparison-matrix-cards__tooltip-text`. |
| Button — Alignment | Writes CSS `align-self` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-comparison-matrix-cards__button`. |
| Button — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Button — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Button — Hover Text Color | Writes CSS (button, color) onto the widget’s front-end markup. |
| Button — Hover Background | Writes CSS (button, background-color) onto the widget’s front-end markup. |
| Button — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-comparison-matrix-cards__button`. |
| Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 60). |
| Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Kng Highlight Dim Opacity | Spacing/size control (min 10, max 100). |
| Kng Highlight Unique Background | Color written to this widget’s CSS selector. |
| Kng Highlight Unique Border | Color written to this widget’s CSS selector. |
| Kng Highlight Unique Text | Color written to this widget’s CSS selector. |
| Kng Sticky Background | Color written to this widget’s CSS selector. |
| Kng Sticky Divider | Color written to this widget’s CSS selector. |
| Kng Sticky Shadow Color | Color written to this widget’s CSS selector. |
| Kng Search Background | Color written to this widget’s CSS selector. |
| Kng Search Border | Color written to this widget’s CSS selector. |
| Kng Search Text Color | Color written to this widget’s CSS selector. |
| Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-comparison-matrix-cards__search-input`. |
| Kng Search Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 40). |
| Kng Search Padding | Writes CSS `padding` onto the widget’s front-end markup. |
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 Comparison Matrix Cards 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 Comparison Matrix Cards require WooCommerce?
Yes. This widget reads WooCommerce products, cart, or account objects. Install WooCommerce and add data before the widget has anything to show.
How do I add Comparison Matrix Cards in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Comparison Matrix Cards”, drag it onto the canvas, then set Content and Style.
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 content widgets
Liquid Glass Cards
Liquid Glass Cards is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Liquid Glass Cards” in the Elementor panel.
Parallax Depth Cards
Parallax Depth Cards is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Parallax Depth Cards” in the Elementor panel.
Pros and Cons Box
Pros and Cons Box is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Pros and Cons Box” in the Elementor panel.
Reveal Swipe Cards
Reveal Swipe Cards is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Reveal Swipe Cards” in the Elementor panel.
Announcement / Promo Bar
Announcement / Promo Bar is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Announcement / Promo Bar” in the Elementor panel.
Content Toggle
Content Toggle is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Content Toggle” in the Elementor panel.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Comparison Matrix Cards after you activate it.