Pricing Table Widget

Describe your plans in a few plain lines and get polished pricing cards - prices in your currency and locale, a Most popular badge, included and excluded features, a monthly/yearly switch that shows the saving, and a proper feature matrix when you have more than three plans.

Page Components Tool Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
One item per line. Long content is carried after the # in the embed code, so it never reaches a server.
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/pricing-table" title="Pricing Table by A2Z Tools" width="100%" height="1200" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

Start each plan with '## Name | price | period | highlight | annual price'. Below it, an optional description line, then features: '+' included, '-' not included, '~' partly included, and one 'Button label | https://your-checkout' line. Prices are plain numbers, formatted with the builder's currency and locale, so 29 becomes $29, 29,000 in INR becomes ₹29,000 and 1234.5 in EUR with de-DE becomes 1.234,50 €; a word such as 'Custom' is shown as written. If any plan has an annual price, a Monthly/Yearly switch appears with the largest saving on it, computed as (12 x monthly - annual) / (12 x monthly); 29 a month or 290 a year saves 17%, and the card adds 'Equals $24.17 a month'. Highlight 'popular' becomes a Most popular badge plus an accent border - text and colour, never colour alone. With more than three plans, or v_view=compare, plans become columns of a table with th scope=col and features as th scope=row; 'Storage: 10 GB' style features line up by name.

Method

  • Plan line: ## name | price | period | highlight ('popular' -> 'Most popular', any other text shown as the badge) | annual price
  • Feature lines: '+ text' included, '- text' not included, '~ text' partly included; 'Key: value' aligns rows in the comparison
  • CTA line: label | URL (https, http, mailto or tel); links open in a new tab with rel=noopener nofollow
  • Saving % = round((12 x monthly - annual) / (12 x monthly) x 100); hidden when under 0.5%
  • Yearly card: annual price '/ year' and 'Equals annual / 12 a month - save n%'
  • Layout: cards (1 column on phones, 2 or 3 by plan count); comparison table when plans > 3 or v_view=compare; max 5 plans, 30 features each

Worked examples

Yearly switch

Inputs: ## Growth | 29 | month | popular | 290 (USD, en-US), Yearly selected

Result: $290 / year; 'Equals $24.17 a month - save 17%'; badge 'Most popular'

(348 - 290) / 348 = 16.7% -> 17%; 290 / 12 = 24.17.

Indian rupees

Inputs: ## Pro | 29000 | month with currency INR

Result: ₹29,000 / month

Intl number formatting for en-IN.

Comparison mode

Inputs: Four plans, features written as 'Websites: 1', 'Websites: 5' ...

Result: A table with 4 plan columns (th scope=col) and one row per feature name (th scope=row)

Features absent from a plan show a cross and 'Not included'.

Limitations

  • No payment processing, coupons, tax calculation or per-seat price maths - buttons only link to your checkout.
  • Prices are fixed text in the embed code; changing them means updating the embed (no live price feed).
  • Up to 5 plans and 30 features per plan; a feature containing ' | ' is kept, but a plan line uses the pipe as its separator.
  • One monthly and one yearly price per plan; quarterly or usage-based tiers need to be written as text.

Where publishers use it

  • A SaaS landing page on Webflow showing Starter, Growth and Agency plans with yearly discounts
  • A web designer's Squarespace site listing three website packages with a 'Book a call' button each
  • A gym or yoga studio comparing drop-in, monthly and annual memberships
  • A WordPress plugin author's page with a four-plan feature matrix
  • A coworking space showing hot desk, fixed desk and private office prices in the local currency

Questions

Does the pricing table take payments?

No. The widget has no checkout, stores no card data and never talks to a payment provider. Each button is a plain link to the URL you give - your Stripe Payment Link, Shopify product, Gumroad page, booking form or a mailto: address - so the purchase happens on your own platform under its own terms.

How is the yearly saving calculated?

Saving = (12 x monthly price - yearly price) / (12 x monthly price), rounded to a whole percent. 29 a month is 348 a year, so 290 a year saves 58 / 348 = 16.7%, shown as 17%. If the yearly price is not lower, no saving is shown. The Yearly button carries the biggest saving of any plan, and each card shows the monthly equivalent, 290 / 12 = $24.17.

Which currency symbol is used?

The one chosen in the builder (USD, EUR, GBP, INR and 50 more), formatted for the locale: en-IN groups 29000 as ₹29,000 and de-DE writes 1.234,50 €. Type prices as plain numbers without a symbol; a price written as '$29' is not a number and is displayed exactly as typed.

When does it switch to a comparison table?

With four or five plans, because four cards side by side are cramped on most content columns, or whenever you set v_view=compare. Write features as 'Storage: 10 GB' and 'Storage: 100 GB' and they share one row; a feature a plan does not list reads 'Not included'. The table scrolls sideways inside a focusable region with a sticky first column.

Is it accessible to screen-reader users?

Each plan is an article labelled by its name. Feature ticks, dashes and crosses are hidden icons with words in front - 'Included:', 'Partly included:', 'Not included:' - and excluded features are also struck through, so status never depends on colour. The billing switch is a group of two buttons with aria-pressed, and changing it announces 'Showing yearly prices'.

Can I add a footnote such as 'Prices exclude VAT'?

Yes - put it in v_note and it appears under the plans. Keep tax and contract terms on your own page too, since a widget note is short and easy to miss.

Sources

  1. Tables with two headers - W3C Web Accessibility Initiative . scope=col for header-row cells and scope=row for header-column cells, used by the comparison mode.

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Pricing Table
https://a2z.tools/embed/pricing-table

Related widgets

More Page Components widgets →

  • Comparison Table

    Page Components Tool New

    Feature-by-feature comparison of 2-6 products with ticks, crosses and words, a sticky first column and grouping.

    Get code

  • Price List Widget

    Business & Contact Tool New

    A service price list with categories, durations and a booking button for salons, clinics and trades.

    Get code

  • Discount Calculator

    Business & Ecommerce Calculator

    Sale price and savings, including stacked discounts and sales tax on the reduced price.

    Get code

  • MRR Calculator

    SaaS & Startups Calculator New

    Monthly and annual recurring revenue plus ARPA from up to three plans, annual contracts and discounts.

    Get code

  • FAQ Accordion

    Page Components Tool New

    Accessible FAQ accordion with search, expand-all, numbering and a copy-as-text button.

    Get code

  • Image Gallery with Lightbox

    Page Components Tool New

    Photo grid, masonry columns or a sideways strip with a keyboard-friendly lightbox and alt-text checks.

    Get code

Preview

CustomizeGet code