Content · Elementor
Pros and Cons Box widget for Elementor
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.
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
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.
Pros and Cons Box Widget (Free).
render() writes HTML data attributes: data-section, data-tooltip, data-widget-id.
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.
The widget script reads data attributes: data-collapsible.
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 “Pros and Cons Box”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Main Title”, “Description”, “Layout”, “Stack on Mobile”. Style and Content tabs are listed on this page.
When to use it
- An Elementor page that needs Pros and Cons Box.
- A layout in the posts, cards, lists, FAQs, and editorial layouts group.
- Search the panel for “Pros and Cons Box” after King Addons is active.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| General — Main Title | Saved on the widget and consumed in render(). |
| General — Description | Saved on the widget and consumed in render(). |
| Layout | The chosen value is read in render() and applied on the front end. Options: Side by Side; Stacked. |
| Layout — Stack on Mobile | Switcher inspector control (`kng_stack_on_mobile`). |
| Layout — Columns Gap | Spacing/size control (min 0, max 80). |
| Layout — Pros Width (%) | Spacing/size control (min 30, max 70). |
| Layout — Box Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Layout — Style Preset | The chosen value is read in render() and applied on the front end. |
| List Settings — Show Count | Switcher inspector control (`kng_show_count`). |
| List Settings — Show Item Icons | Switcher inspector control (`kng_show_item_icons`). |
| List Settings — Icon Position | The chosen value is read in render() and applied on the front end. Options: Left; Right. |
| List Settings — Pros Default Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| List Settings — Cons Default Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Pros — Pros Title | Text inspector control (`kng_pros_title`). |
| Pros — Pros Subtitle | Text inspector control (`kng_pros_subtitle`). |
| Pros — Pros Title Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Pros Items — Text | Textarea inspector control (`kng_item_text`). |
| Pros Items — Icon Override | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Pros Items — Highlight | Switcher inspector control (`kng_item_highlight`). |
| Pros Items — Tooltip (Pro) | Textarea inspector control (`kng_item_tooltip`). |
| Pros — Pros Items | Repeater rows; render() loops each item to build the list or slides. |
| Pros — Empty State | Options: Hide Section; Show Placeholder. |
| Pros — Placeholder Text | Text inspector control (`kng_pros_empty_text`). |
| Cons — Cons Title | Text inspector control (`kng_cons_title`). |
| Cons — Cons Subtitle | Text inspector control (`kng_cons_subtitle`). |
| Cons — Cons Title Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Cons Items — Text | Textarea inspector control (`kng_item_text`). |
| Cons Items — Icon Override | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Cons Items — Highlight | Switcher inspector control (`kng_item_highlight`). |
| Cons Items — Tooltip (Pro) | Textarea inspector control (`kng_item_tooltip`). |
| Cons — Cons Items | Repeater rows; render() loops each item to build the list or slides. |
| Cons — Empty State | Options: Hide Section; Show Placeholder. |
| Cons — Placeholder Text | Text inspector control (`kng_cons_empty_text`). |
| General — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-pros-cons`. |
| General — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-pros-cons`. |
| General — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 60). |
| General — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-pros-cons`. |
| General — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pros-cons__title`. |
| General — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| General — Typography (Kng Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pros-cons__description`. |
| General — Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| General — Header Bottom Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 80). |
| Section — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pros-cons__section-title`. |
| Section — Typography (Kng Section Subtitle Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pros-cons__section-subtitle`. |
| Section — Typography (Kng Item Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pros-cons__item-text`. |
| Section — Title Bottom Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 60). |
| Section — Item Spacing | Spacing/size control (min 0, max 40). |
| Section — Highlight Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Section — Highlight Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 40). |
| Section — Highlight Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Section — Item Icon Size | Spacing/size control (min 10, max 36). |
| Section — Item Icon Gap | Spacing/size control (min 0, max 30). |
| Section — Title Icon Size | Spacing/size control (min 10, max 32). |
| Section — Title Icon Gap | Spacing/size control (min 0, max 40). |
| Section — Title Icon Position | Options: Left; Right. |
| Section — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-pros-cons__section-header`. |
| Section — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-pros-cons__section-header`. |
| Section — Header Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 60). |
| Section — Header Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Pros Styles — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Pros Styles — Subtitle Color | Writes CSS `color` onto the widget’s front-end markup. |
| Pros Styles — Item Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Pros Styles — Highlight Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Pros Styles — Accent Color | Color written to this widget’s CSS selector. |
| Pros Styles — Title Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Pros Styles — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-pros-cons__section--pros .king-addons-pros-cons__section-header`. |
| Pros Styles — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-pros-cons__section--pros .king-addons-pros-cons__section-header`. |
| Pros Styles — Header Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 60). |
| Pros Styles — Header Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Pros Styles — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-pros-cons__section--pros .king-addons-pros-cons__section-header`. |
| Pros Styles — Background (Kng Pros Section Background) | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-pros-cons__section--pros`. |
| Pros Styles — Border (Kng Pros Section Border) | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-pros-cons__section--pros`. |
| Pros Styles — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 60). |
| Pros Styles — Box Shadow (Kng Pros Section Shadow) | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-pros-cons__section--pros`. |
| Pros Styles — Item Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Pros Styles — Highlight Background | Color written to this widget’s CSS selector. |
| Pros Styles — Accent Border Width | Spacing/size control (min 0, max 10). |
| Cons Styles — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Cons Styles — Subtitle Color | Writes CSS `color` onto the widget’s front-end markup. |
| Cons Styles — Item Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Cons Styles — Highlight Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Cons Styles — Accent Color | Color written to this widget’s CSS selector. |
| Cons Styles — Title Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Cons Styles — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-pros-cons__section--cons .king-addons-pros-cons__section-header`. |
| Cons Styles — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-pros-cons__section--cons .king-addons-pros-cons__section-header`. |
| Cons Styles — Header Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 60). |
| Cons Styles — Header Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Cons Styles — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-pros-cons__section--cons .king-addons-pros-cons__section-header`. |
| Cons Styles — Background (Kng Cons Section Background) | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-pros-cons__section--cons`. |
| Cons Styles — Border (Kng Cons Section Border) | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-pros-cons__section--cons`. |
| Cons Styles — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 60). |
| Cons Styles — Box Shadow (Kng Cons Section Shadow) | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-pros-cons__section--cons`. |
| Cons Styles — Item Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Cons Styles — Highlight Background | Color written to this widget’s CSS selector. |
| Cons Styles — Accent Border Width | Spacing/size control (min 0, max 10). |
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 Pros and Cons Box 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 Pros and Cons Box 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 Pros and Cons Box in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Pros and Cons Box”, 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
Comparison Matrix Cards
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.
Review Schema
Review Schema is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Review Schema” 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.
Cookie Preferences Button
Cookie Preferences Button is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Cookie Preferences Button” in the Elementor panel.
Custom Post Types Grid
Custom Post Types Grid is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Custom Post Types Grid” in the Elementor panel.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Pros and Cons Box after you activate it.