Marketing · Elementor
Pricing Table widget for Elementor
Pricing columns with features, highlight plan, and a button — built for SaaS and service packages.
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
Pricing columns with features, highlight plan, and a button — built for SaaS and service packages.
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 “Pricing Table”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Type”, “Title”, “Sub Title”, “Icon Type”. Style and Content tabs are listed on this page.
When to use it
- Three-tier pricing on a marketing site.
- A highlighted “most popular” column.
- A comparison of starter vs agency retainers.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Pricing Table.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| pricing_items — Type | Options: Heading; Price; Feature; Text; Button; Divider. |
| pricing_items — Title | Text inspector control (`heading_title`). |
| pricing_items — Sub Title | Text inspector control (`heading_sub_title`). |
| pricing_items — Icon Type | Options: None; Icon; Image. |
| pricing_items — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| pricing_items — Text | Textarea inspector control (`text`). |
| pricing_items — Price | Text inspector control (`price`). |
| pricing_items — Sub Price | Text inspector control (`sub_price`). |
| pricing_items — Currency Symbol | Options: None; Custom. |
| pricing_items — Currency | Text inspector control (`currency`). |
| pricing_items — Sale | Switcher inspector control (`sale`). |
| pricing_items — Old Price | Text inspector control (`old_price`). |
| pricing_items — Period | Text inspector control (`period`). |
| pricing_items — Text (Feature Text) | Text inspector control (`feature_text`). |
| pricing_items — Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| pricing_items — Button Text | Text inspector control (`btn_text`). |
| pricing_items — Button ID | Text inspector control (`btn_id`). |
| pricing_items — Btn Url | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| pricing_items — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| pricing_items — Icon Position | Options: Before; After. |
| pricing_items — Line Through | Switcher inspector control (`feature_linethrough`). |
| pricing_items — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| pricing_items — Line Color | Writes CSS `color` onto the widget’s front-end markup. |
| pricing_items — Show Tooltip (Pro) | Switcher inspector control (`feature_tooltip`). |
| pricing_items — Style | Writes CSS `border-top-style` onto the widget’s front-end markup. Options: Solid; Double; Dotted; Dashed; Groove. |
| pricing_items — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| pricing_items — Color | Writes CSS `border-top-color` onto the widget’s front-end markup. |
| pricing_items — Width | Writes CSS `width` onto the widget’s front-end markup. (min 5, max 300). |
| pricing_items — Height | Writes CSS `border-top-width` onto the widget’s front-end markup. (min 1, max 10). |
| Price Table — Pricing Items | Repeater rows; render() loops each item to build the list or slides. |
| Badge — Style | The chosen value is read in render() and applied on the front end. Options: None; Corner; circle; Flag. |
| Badge — Title | Printed in the widget HTML from render(). |
| Badge — Horizontal Position | The chosen value is read in render() and applied on the front end. Options: Left; Right. |
| Badge — Size | Writes CSS (width, height, line-height) onto the widget’s front-end markup. (min 0, max 100). |
| Badge — Top Distance | Writes CSS `transform` onto the widget’s front-end markup. (min -50, max 50). |
| Badge — Side Distance | Writes CSS `transform` onto the widget’s front-end markup. (min -50, max 50). |
| Badge — Distance | Writes CSS (margin-top, transform, top) onto the widget’s front-end markup. (min 0, max 80). |
| Hover Animation — Effect | Options: None; Slide; Bounce. |
| Hover Animation — Animation Duration (ms) | Writes CSS (transition-duration, animation-duration) onto the widget’s front-end markup. (default 200, min 0). |
| Heading — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-pricing-table-heading`. |
| Heading — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Heading — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Heading — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-table-title`. |
| Heading — Distance | Writes CSS `margin` onto the widget’s front-end markup. (min 0, max 50). |
| Heading — Color (Heading Sub Title Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Heading — Typography (Heading Sub Title Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-table-sub-title`. |
| Heading — Color (Heading Icon Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Heading — Icon Position | Options: Left; Center; Right. |
| Heading — Size | Writes CSS (font-size, width, height, max-width) onto the widget’s front-end markup. (min 10, max 500). |
| Heading — Distance (Heading Icon Distance) | Writes CSS (margin-right, margin-bottom, margin-left) onto the widget’s front-end markup. (min 0, max 50). |
| Price — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-pricing-table-price`. |
| Price — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Price — Color | Writes CSS `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-pricing-table-price`. |
| Price — Size | Writes CSS `font-size` onto the widget’s front-end markup. (min 0, max 100). |
| Price — Vertical Position | Writes CSS `align-self` onto the widget’s front-end markup. Options: Top; Middle; Bottom. |
| Price — Size (Currency Size) | Writes CSS `font-size` onto the widget’s front-end markup. (min 0, max 100). |
| Price — Alignment | The chosen value is read in render() and applied on the front end. Options: Before; After. |
| Price — Vertical Position (Currency Vr Position) | Writes CSS `align-self` onto the widget’s front-end markup. Options: Top; Middle; Bottom. |
| Price — Color (Old Price Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Price — Size (Old Price Size) | Writes CSS `font-size` onto the widget’s front-end markup. (min 0, max 100). |
| Price — Vertical Position (Old Price Vr Position) | Writes CSS `align-self` onto the widget’s front-end markup. Options: Top; Middle; Bottom. |
| Price — Color (Period Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Price — Typography (Period Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-table-period`. |
| Price — Position | The chosen value is read in render() and applied on the front end. Options: Below; Beside. |
| Features — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Features — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Features — List Top Distance | Writes CSS (king-addons-pricing-table-feature, padding-top) onto the widget’s front-end markup. (min 0, max 50). |
| Features — List Bottom Distance | Writes CSS (king-addons-pricing-table-feature, padding-bottom) onto the widget’s front-end markup. (min 0, max 50). |
| Features — 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-pricing-table-feature`. |
| Features — Alignment | Options: Left; Center; Right. |
| Features — Width | Writes CSS `max-width` onto the widget’s front-end markup. (min 10, max 100). |
| Features — Size | Writes CSS `font-size` onto the widget’s front-end markup. (min 5, max 30). |
| Features — Divider | Switcher inspector control (`feature_divider`). |
| Features — Color (Feature Divider Color) | Writes CSS (king-addons-pricing-table-feature, border-bottom-color) onto the widget’s front-end markup. |
| Features — Style | Writes CSS (king-addons-pricing-table-feature, border-bottom-style) onto the widget’s front-end markup. Options: Solid; Double; Dotted; Dashed; Groove. |
| Features — Weight | Writes CSS (king-addons-pricing-table-feature, border-bottom-width) onto the widget’s front-end markup. (min 1, max 5). |
| Features — Width (Feature Divider Width) | Writes CSS (king-addons-pricing-table-feature, max-width) onto the widget’s front-end markup. (min 0, max 1000). |
| Button — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-pricing-table-button`. |
| Button — Section Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Button (Normal) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-pricing-table-btn`. |
| Button (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Button (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Button (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-pricing-table-btn`. |
| Button (Hover) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-pricing-table-btn.king-addons-button-none:hover, {{WRAPPER}} .…`. |
| Button (Hover) — Color | Writes CSS (king-addons-pricing-table-btn, color) onto the widget’s front-end markup. |
| Button (Hover) — Border Color | Writes CSS (king-addons-pricing-table-btn, border-color) onto the widget’s front-end markup. |
| Button (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-pricing-table-btn:hover`. |
| Button — Select Animation | Animation picker; the chosen effect is applied on the front end. |
| Button — Transition Duration (ms) | Writes CSS (transition-duration, king-addons-pricing-table-btn) onto the widget’s front-end markup. (default 300, min 0). |
| Button — Animation Height | Writes CSS `height` onto the widget’s front-end markup. (min 0, max 100). |
| Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-table-btn`. |
| Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Button — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Button — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Text — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-pricing-table-text`. |
| Text — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Text — Color | Writes CSS `color` 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-pricing-table-text`. |
| Text — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Badge — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Badge — Background Color | Writes CSS (background-color, king-addons-pricing-table-badge-flag, border-top-color) onto the widget’s front-end markup. |
| Badge — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-table-badge-inner`. |
| Badge — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-pricing-table-badge-inner`. |
| Badge — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Wrapper (Normal) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-pricing-table`. |
| Wrapper (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Wrapper (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-pricing-table`. |
| Wrapper (Hover) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-pricing-table:hover`. |
| Wrapper (Hover) — Border Color | Writes CSS (king-addons-pricing-table, border-color) onto the widget’s front-end markup. |
| Wrapper (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-pricing-table:hover`. |
| Wrapper — Transition Duration | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Wrapper — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Wrapper — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Wrapper — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Wrapper — Border Radius | Writes CSS (border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius) onto the widget’s front-end markup. (min 0, max 50). |
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 Pricing 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.
How do I add Pricing Table in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Pricing Table”, 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 marketing widgets
Pricing Slider
An interactive pricing slider: visitors drag a value and see the matching price or package.
Price List & Menu
A menu or price list: item, description, price, optional image — for restaurants and services.
Pricing Calculator
A quote calculator with parameters (quantity, options) that updates a total on the page.
Business Hours
Opening hours with weekday rows, highlights for today, and closed states.
Countdown & Timer
A countdown to a date (or evergreen) for launches, sales, and events.
Flip Countdown & Timer
A flip-clock countdown with the same job as Countdown, in a different visual style.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Pricing Table after you activate it.