Pricing Calculator Pro

A standalone marketplace module that provides an advanced, fully configurable pricing calculator. It combines a quantity slider with number input, billing period toggle, tiered pricing cards, optional add-ons, and a collapsible feature comparison table — all driven entirely from style and content settings with zero hardcoded values.

Note: This is a standalone marketplace module, separate from the theme's built-in Pricing Cards module. It lives in marketplace-modules/Pricing Calculator Pro.module/.

Content Fields

Field	Type	Description
`heading`	Group	`show` (boolean), `title`, `subtitle`, `section_id` for anchor links.
`general`	Group	`currency_symbol`, `currency_position` (before/after), `decimal_places`, `thousands_separator`, `layout_direction` (horizontal/vertical).
`toggle`	Group	`enable`, `label_1` / `label_2` (e.g. Monthly/Annual), `default_active`, `discount_badge_enabled`, `discount_badge_text`, `discount_badge_position` (above/right/below).
`slider`	Group	`enable`, `slider_label` (optional), `min`, `max`, `step`, `default_value`, `unit_label`, `pricing_mode` (per_unit/tiered/flat), `volume_tiers` for tiered pricing breakpoints.
`tiers`	Repeater	Each tier: `tier_name`, `tier_description`, `tier_icon`, `price_option_1` / `price_option_2`, `custom_price_text`, `price_prefix_text`, `original_price` (strikethrough), `price_suffix`, `is_highlighted`, `highlight_badge_text` / `highlight_badge_position`, `features` (repeater: `text`, `included`, `is_new`, `tooltip`), `show_estimated_cost`, `cta_text`, `cta_link`, `cta_style`, `cta_pass_config` for URL parameter passing.
`addons`	Group	`enable`, `section_title` (optional), `section_subtitle` (optional), `items` repeater: `addon_name`, `addon_description`, `addon_icon`, `addon_price`, `addon_pricing_type` (flat/per_unit), `addon_price_suffix`, `addon_default_checked`.
`comparison`	Group	`enable`, `trigger_text`, `default_state` (collapsed/expanded), `sticky_header`, `categories` repeater with `features` per tier (boolean per tier column).

Layout Options

All layout is controlled from the Style tab with no hardcoded pixel values.

Setting	Effect
`columns` (1–5)	Number of pricing card columns. 1 column renders a horizontal row layout with header, price, features grid, and CTA in a single line.
`gap`	Space between cards. Setting gap to 0 activates stacked mode — cards share a single border/shadow wrapper with dividers between them.
`addons.columns` (1–4)	Independent column count for the add-ons grid.
`addons.gap`	Independent gap for the add-ons grid, separate from card gap.

Slider & Number Input

The quantity slider includes both a draggable range input and a number input field that sync bidirectionally — dragging the slider updates the number, typing a value updates the slider. The slider label is optional and only renders when set. All slider styling (track colour, fill colour, thumb size, label size) is configurable from the Style tab.

Pricing Modes

Per Unit — Price multiplied by slider value (e.g. $10 × 50 users = $500/mo).
Tiered — Price changes at volume breakpoints defined in volume_tiers.
Flat — Fixed price regardless of slider value.

Estimated Cost

Each tier can optionally show a calculated estimated cost box that updates live as the slider moves. It displays the total with an optional breakdown formula (e.g. "50 users × $10/user"). The estimated cost box styling (padding, border, background, font sizes) is fully configurable.

Add-ons

Optional add-on checkboxes that contribute to the estimated cost calculation. Each add-on can be flat-rate or per-unit priced. The add-ons section title and subtitle are optional — they only render when populated. Add-ons have their own independent layout settings (columns, gap, padding) separate from the pricing cards.

Feature Comparison Table

A collapsible table comparing features across all tiers. Features are grouped by category with check/cross icons per tier. The table supports sticky headers and horizontal scrolling on mobile. Toggle the table open/closed with an animated chevron button.

Style Configuration

Every visual property is controlled from the Style tab — there are zero hardcoded CSS values. Key style groups:

Section — Background, padding, container width, spacing between sections.
Heading — Font family, size, weight, colour, subtitle styling.
Cards — Background, border, radius, padding, shadow, hover shadow (animated transition).
Featured Card — Separate background, border colour, border width, shadow.
Badge — Background, text colour, font size, radius, padding, position (top centre/left/right).
Price — Font family, size, weight, colour, currency size, suffix styling, divider colour.
Features — Text colour, font size, gap, check/cross colours, icon size, tooltip styling, NEW badge colours.
Buttons — Primary/secondary/ghost colours, hover states, font size, weight, padding, radius.
Toggle — Background, text colours, slider colour, switch dimensions, border, hover colour.
Slider — Track/fill/thumb colours, track height, thumb size, max width, label styling.
Estimated Cost — Background, border, radius, padding, label/total/breakdown font sizes and colours.
Add-ons — Background, border, radius, padding, columns, gap, checkbox accent, font sizes.
Comparison — Header background, row alternation, border, text colours, trigger styling, cell padding.

Responsive Behaviour

The module supports three mobile layout modes: stack (single column), scroll (horizontal swipe), and tabbed (tab navigation per tier). Tablet and mobile breakpoints, column counts, card padding, and font scaling are all configurable. The 1-column horizontal layout collapses to vertical cards on mobile. Stacked mode switches from horizontal to vertical dividers on mobile.

Analytics Events

The module emits custom events for tracking:

pricing_slider — Slider value changed.
pricing_toggle — Billing period toggled.
pricing_addon_toggle — Add-on checked/unchecked.
pricing_cta_click — CTA button clicked with tier, billing, and quantity data.

Events are dispatched to document as CustomEvents, and automatically pushed to dataLayer (GTM) and _hsq (HubSpot tracking) when available.

CTA Parameter Passing

When cta_pass_config is enabled on a tier, clicking the CTA appends query parameters to the URL: plan name, billing period, user count, and selected add-ons. This allows downstream pages (checkout, signup) to pre-fill configuration based on the visitor's selections.