The Pricing Table 2026 widget is a full pricing-plan section with five built-in design styles, two layout variants, and a built-in Monthly/Annual billing toggle — section header, plan cards with icons, features list, and CTA buttons, all in one section. Works identically in Elementor and the WordPress block editor.
Overview
Instead of building a pricing table from separate heading, repeater, and button widgets, Pricing Table 2026 gives you one widget with everything a pricing section needs already wired together — a section label/headline/description header, an optional Monthly/Annual billing toggle with a savings badge, and a repeater of plan cards each with an icon, price, tagline, feature list, and CTA button.
Every part of it is restyled instantly by switching the Design Style dropdown — no custom CSS required.
5 Design Styles
- Bento Grid — crisp white cards, sharp grid alignment, confident typography. The clean SaaS-product look.
- Glassmorphism — frosted-glass translucent panels over a dark, gradient-blurred backdrop. Premium fintech/crypto feel.
- Dark Minimal — near-black canvas, a single lime accent color, high contrast. Dev-tools/AI-native feel.
- Aurora — soft gradient-mesh backgrounds, rounded corners, warm color blends. Modern AI/tech branding feel.
- Neo-Brutalist — hard 2px borders, flat solid colors, offset drop-shadows, no gradients. Bold agency energy.
2 Layouts
- Side-by-Side Cards — plan cards laid out in an even grid (2, 3, or 4 columns, set via the Columns option).
- Centered — cards flow in an auto-fill grid that centers itself, with the featured plan visually elevated.
Both layouts share the same plan card markup and styling — only the grid arrangement changes.
Content Settings
| Section | Setting | What it does |
|---|---|---|
| Design Style | Style Preset | Bento Grid / Glassmorphism / Dark Minimal / Aurora / Neo-Brutalist |
| Design Style | Layout | Side-by-Side Cards / Centered |
| Design Style | Columns | 2, 3, or 4 plans per row (Side-by-Side Cards layout) |
| Section Header | Show Section Label | Toggles the small eyebrow label above the headline |
| Section Header | Section Label | Text shown in the eyebrow label, e.g. “Pricing” |
| Section Header | Headline | Main heading text — supports a line break for a two-line headline |
| Section Header | Highlighted Word(s) | Exact word(s) from the headline to style with the accent color/gradient |
| Section Header | HTML Tag | H1 / H2 / H3 — the actual heading tag rendered |
| Section Header | Description | Supporting paragraph under the headline |
| Billing Toggle | Show Monthly / Annual Toggle | Toggles the switch that lets visitors flip card prices between monthly and annual |
| Billing Toggle | Monthly Label | Text shown next to the toggle for the monthly option |
| Billing Toggle | Annual Label | Text shown next to the toggle for the annual option |
| Billing Toggle | Savings Badge Text | Small badge shown next to the Annual label, e.g. “Save 20%” — leave empty to hide |
| Pricing Plans | Plan Name | Name of the plan, e.g. “Pro” |
| Pricing Plans | Featured / Popular Plan | Marks this card as the highlighted plan (elevated styling + badge) |
| Pricing Plans | Badge Text | Text shown in the badge pill on a featured plan, e.g. “Most Popular” |
| Pricing Plans | Plan Icon | Icon shown above the plan name |
| Pricing Plans | Currency Symbol | Symbol shown before the price, e.g. “$” |
| Pricing Plans | Monthly Price | Price shown when the billing toggle is set to Monthly |
| Pricing Plans | Annual Price (per month) | Price shown when the billing toggle is set to Annual |
| Pricing Plans | Period Label | Text after the price, e.g. “/month” |
| Pricing Plans | Tagline | Short one-line description under the price |
| Pricing Plans | Features (one per line) | Each line becomes a feature row with a check icon |
| Pricing Plans | Button Text | Label for the plan’s CTA button |
| Pricing Plans | Button URL | Link destination for the CTA button |
| Pricing Plans | Button Style | Primary (filled) or Outline button appearance |
Style Settings
Every content element above has a matching Style-tab section:
- Section — background and padding.
- Section Label — color, background, border radius, and padding.
- Headline — color and margin, plus a separate Highlighted Word(s) color or gradient control.
- Description — color.
- Pricing Card — background, padding, border radius, border, and box shadow, plus a separate Featured Card override for background, border, and box shadow.
- Price — typography and color for the amount, currency symbol, and period label.
- Plan Name — typography and color.
- Features List — text color, plus check-icon color and background.
- Plan Icon — color, background, and size.
- CTA Button — typography, background, text color, border, and border radius, plus a separate hover-state background, text color, and border.
- Popular Badge — typography, color, background, and border radius.
- Billing Toggle — track, active-track, and thumb colors, plus the Save Badge color and background.
- Plan Tagline — typography and color.
All colors accept either a solid color or a gradient.
Frequently Asked Questions
Do I need Elementor Pro to use this?
No — Pricing Table 2026 works with the free version of Elementor, plus the WordPress block editor. No Pro upgrade required.
Can I use a different layout for each design style?
Yes — Design Style and Layout are independent settings. Any of the 5 styles can be paired with either of the 2 layouts.
How does the Monthly/Annual billing toggle work?
Each plan card stores both a Monthly Price and an Annual Price (per month). When a visitor flips the switch, a small inline script toggles a class on the section wrapper, and CSS shows/hides the matching price on every card at once — no page reload, no server request. If you hide the toggle entirely, the Monthly Price is shown.
What happens if I don’t set a Plan Icon?
The icon is entirely optional — if left empty, the card simply skips the icon area and starts with the plan name, so nothing breaks and no empty space is left behind.
Is this widget accessible?
Yes — WCAG 2.1 AA, with the billing toggle built as a proper role="switch" checkbox with aria-checked/aria-labelledby, plan cards marked up with role="list"/role="listitem", and semantic heading tags (choose H1/H2/H3 to match your page’s outline).
How to Add This Section
- Elementor: search “Pricing Table” in the widget panel under the HT Mega 2026 category, drag it onto your page.
- WordPress Block Editor: click the block inserter (+), search “Pricing Table 2026” under the HT Mega category, insert it, then edit the settings in the block sidebar.