Marketing · Elementor
Pricing Calculator widget for Elementor
A quote calculator with parameters (quantity, options) that updates a total on the page.
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 quote calculator with parameters (quantity, options) that updates a total on the page.
Register Pro-only controls (placeholder). Pro overrides this method to add premium controls without using parent::register_controls().
render() writes HTML data attributes: data-base-price, data-decimal-places, data-decimal-separator, data-field-id, data-field-type, data-price, data-price-prefix, data-price-suffix.
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-conditional-rules, data-field-id.
Visitor state is stored in localStorage, not in post meta.
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 Calculator”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Calculator Title”, “Description”, “Field Type”, “Field Label”. Style and Content tabs are listed on this page.
When to use it
- Print or packaging quotes.
- Service packages with add-ons.
- A cost estimator that is not a full cart.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Pricing Calculator.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Pricing Calculator — Calculator Title | Printed in the widget HTML from render(). |
| Pricing Calculator — Description | Printed in the widget HTML from render(). |
| Calculator Fields — Field Type | Options: Number Input; Range Slider; Dropdown Select; Radio Buttons; Checkbox; Toggle Switch. |
| Calculator Fields — Field Label | Text inspector control (`field_label`). |
| Calculator Fields — Field ID | Set a unique ID for this field to use in formulas and conditions. Leave empty for auto-generated ID. |
| Calculator Fields — Description | Text inspector control (`field_description`). |
| Calculator Fields — Unit Label | Text inspector control (`field_unit`). |
| Calculator Fields — Minimum Value | Numeric control (default 0). |
| Calculator Fields — Maximum Value | Numeric control (default 100). |
| Calculator Fields — Step | Numeric control (default 1, min 0.01). |
| Calculator Fields — Default Value | Numeric control (default 0). |
| Calculator Fields — Options (Value|Label|Price) | Enter one option per line in format: value|label|price. |
| Calculator Fields — Checkbox Value | Numeric control (default 10). |
| Calculator Fields — Price Calculation | Custom formula calculation is available in the Pro version. You can reference fields by their Field ID in custom formulas. |
| Calculator Fields — Price Amount | Numeric control (default 10). |
| Calculator Fields | Repeater rows; render() loops each item to build the list or slides. |
| Calculation Settings — Base Price | Starting price before any calculations. |
| Calculation Settings — Price Prefix | Written to the `data-price-prefix` HTML attribute in render(). |
| Calculation Settings — Price Suffix | Written to the `data-price-suffix` HTML attribute in render(). |
| Calculation Settings — Decimal Places | Number of decimal places to display. |
| Calculation Settings — Thousand Separator | Written to the `data-thousand-separator` HTML attribute in render(). |
| Calculation Settings — Decimal Separator | Written to the `data-decimal-separator` HTML attribute in render(). |
| Calculation Settings — Live Calculation | Update price automatically when fields change. |
| Calculation Settings — Enable Calculate Button | Switcher inspector control (`enable_calculate_button`). |
| Calculation Settings — Calculate Button Text | Printed in the widget HTML from render(). |
| Summary & Results — Show Calculation Summary | Display breakdown of calculation. |
| Summary & Results — Summary Title | Printed in the widget HTML from render(). |
| Summary & Results — Total Label | Printed in the widget HTML from render(). |
| Container — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Container — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Container — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-pricing-calculator`. |
| Container — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-pricing-calculator`. |
| Container — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Container — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-pricing-calculator`. |
| Title & Description — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Title & Description — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-pricing-calculator__title`. |
| Title & Description — Title Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Title & Description — Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| Title & Description — Typography (Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-pricing-calculator__description`. |
| Title & Description — Description Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Fields — Fields Spacing | Writes CSS (field, margin-bottom) onto the widget’s front-end markup. (min 0, max 100). |
| Fields — Label Color | Writes CSS `color` onto the widget’s front-end markup. |
| Fields — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-pricing-calculator__field-label`. |
| Fields — Label Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Fields — Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| Fields — Typography (Field Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-pricing-calculator__field-description`. |
| Fields — Description Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Fields — Input Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Fields (Normal) — Text Color | Writes CSS (input, color) onto the widget’s front-end markup. |
| Fields (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Fields (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-pricing-calculator__field input, {{WRAPPER}} .king-pricing-calculator…`. |
| Fields (Normal) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Fields (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-pricing-calculator__field input, {{WRAPPER}} .king-pricing-calculator…`. |
| Fields (Focus) — Text Color | Writes CSS (input, select, color) onto the widget’s front-end markup. |
| Fields (Focus) — Background Color | Writes CSS (input, select, background-color) onto the widget’s front-end markup. |
| Fields (Focus) — Border Color | Writes CSS (input, select, border-color) onto the widget’s front-end markup. |
| Fields (Focus) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-pricing-calculator__field input:focus, {{WRAPPER}} .king-pricing-calc…`. |
| Fields — Typography (Input Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-pricing-calculator__field input, {{WRAPPER}} .king-pricing-calculator…`. |
| Fields — Arrow Color | Color written to this widget’s CSS selector. |
| Fields — Arrow Size | Spacing/size control (min 6, max 30). |
| Fields — Arrow Right Offset | Spacing/size control (min 0, max 40). |
| Fields — Accent Color | Color written to this widget’s CSS selector. |
| Fields — Radio Size | Spacing/size control (min 10, max 40). |
| Fields — Options Spacing | Spacing/size control (min 0, max 40). |
| Fields — Label Spacing | Spacing/size control (min 0, max 40). |
| Fields — Label Color (Radio Label Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Fields — Typography (Radio Label Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-pricing-calculator__radio-option label`. |
| Fields — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-pricing-calculator__radio-group`. |
| Fields — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-pricing-calculator__radio-group`. |
| Fields — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Fields — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Fields — Track Color | Color written to this widget’s CSS selector. |
| Fields — Progress Color | Color written to this widget’s CSS selector. |
| Fields — Thumb Color | Color written to this widget’s CSS selector. |
| Fields — Thumb Hover Color | Color written to this widget’s CSS selector. |
| Fields — Thumb Border Color | Color written to this widget’s CSS selector. |
| Fields — Thumb Border Hover Color | Color written to this widget’s CSS selector. |
| Fields — Thumb Border Width | Spacing/size control (min 0, max 10). |
| Fields — Track Height | Spacing/size control (min 1, max 20). |
| Fields — Thumb Size | Spacing/size control (min 10, max 40). |
| Fields — Thumb Animation Duration | Spacing/size control (min 0, max 2). |
| Fields — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Fields — Typography (Range Slider Value Number Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-pricing-calculator__range-value-display .king-pricing-calculator__ran…`. |
| Fields — Color (Range Slider Value Unit Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Fields — Typography (Range Slider Value Unit Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-pricing-calculator__range-value-display .king-pricing-calculator__fie…`. |
| Fields — Spacing | Spacing/size control (min 0, max 50). |
| Calculate Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-pricing-calculator__calculate-button`. |
| Calculate Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Calculate Button — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Calculate Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Calculate Button (Normal) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-pricing-calculator__calculate-button`. |
| Calculate Button (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-pricing-calculator__calculate-button`. |
| Calculate Button (Normal) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Calculate Button (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-pricing-calculator__calculate-button`. |
| Calculate Button (Hover) — Text Color | Writes CSS (calculate-button, color) onto the widget’s front-end markup. |
| Calculate Button (Hover) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-pricing-calculator__calculate-button:hover`. |
| Calculate Button (Hover) — Border Color | Writes CSS (calculate-button, border-color) onto the widget’s front-end markup. |
| Calculate Button (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-pricing-calculator__calculate-button:hover`. |
| Calculate Button (Hover) — Transition Duration | Writes CSS `transition` onto the widget’s front-end markup. (max 3). |
| Summary & Results — Summary Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Summary & Results — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-pricing-calculator__summary-title`. |
| Summary & Results — Summary Title Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Summary & Results — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-pricing-calculator__summary`. |
| Summary & Results — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-pricing-calculator__summary`. |
| Summary & Results — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Summary & Results — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Summary & Results — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Summary & Results — Item Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Summary & Results — Typography (Summary Item Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-pricing-calculator__summary-item`. |
| Summary & Results — Item Spacing | Writes CSS (summary-item, margin-bottom) onto the widget’s front-end markup. (min 0, max 50). |
| Summary & Results — Total Label Color | Writes CSS `color` onto the widget’s front-end markup. |
| Summary & Results — Typography (Total Label Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-pricing-calculator__total-label`. |
| Summary & Results — Total Price Color | Writes CSS `color` onto the widget’s front-end markup. |
| Summary & Results — Typography (Total Price Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-pricing-calculator__total-price`. |
| Summary & Results — Background (Total Background) | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-pricing-calculator__total`. |
| Summary & Results — Border (Total Border) | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-pricing-calculator__total`. |
| Summary & Results — Border Radius (Total Border Radius) | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Summary & Results — Padding (Total Padding) | Writes CSS `padding` onto the widget’s front-end markup. |
| Summary & Results — Margin (Total Margin) | Writes CSS `margin` 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 Pricing Calculator 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 Pricing Calculator 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 Pricing Calculator in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Pricing Calculator”, 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
Price List & Menu
A menu or price list: item, description, price, optional image — for restaurants and services.
Pricing Slider
An interactive pricing slider: visitors drag a value and see the matching price or package.
Pricing Table
Pricing columns with features, highlight plan, and a button — built for SaaS and service packages.
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 Calculator after you activate it.