A price under a plan name only answers "how much." This widget adds the toggle, the row-by-row comparison, and the closing bar that answer "which one, and why now" — without a line of custom CSS.
Elementor's own tools can lay out a card and a table. What they don't do is keep the two in sync, or give the visitor a reason to stop scrolling.
A monthly and a yearly figure typed into two separate text widgets drift out of sync the first time either one changes — and nobody notices until a customer does.
Three bulleted lists side by side ask the visitor to do the comparing themselves. A table with one shared row per feature does that work for them.
By the time someone reaches the bottom of a long pricing page, the cards are out of view. Nothing down there reminds them what they were deciding between.
Turn any part on or off from the Content tab. Nothing below needs another plugin or a line of custom CSS.
Add as many plans as you sell. Give any card a Monthly/Yearly pill, and every price on the page updates together — including the one in the bottom bar.
One row per feature, one column per plan — with the middle column highlighted if that's the one you want people to land on. Each cell can hold plain text, an icon, or both.
| Basic | Growth | Scale | |
|---|---|---|---|
| Sites | 1 | 10 | Unlimited |
| Support | Priority | Dedicated | |
| Team seats | 1 | 5 | Unlimited |
A "Switch to Yearly & Save" toggle and a subscribe button, placed wherever the visitor happens to scroll to — reading the same period as the cards above it.
No shortcodes, no separate builder — it's an Elementor widget like any other.
Upload the plugin or install it from the WordPress.org directory. Requires the free version of Elementor, nothing else.
Search "Pricing" in the Elementor panel, or find it under the Pricing & Comparison category, and drop it on the page.
Add your plans, prices, and feature rows in the Content tab, then style colors, gradients, and spacing from the Style tab.
Click Monthly or Yearly — the cards, the highlighted table column, and the bottom bar all move together.
| Starter | Growth | Scale | |
|---|---|---|---|
| Sites | 1 | 10 | Unlimited |
| Team seats | 1 | 5 | Unlimited |
| Support | Priority | Dedicated | |
| White-label |
Colors, gradients, typography, hover and active states — set from the Style tab, saved with the page.
Set your own two-color gradient for the featured card's header and button.
Independent font controls for the plan name, price, period, and feature text.
Buttons and the toggle pill each get their own normal, hover, and active colors.
Card padding, margin, gap, and corner radius, all adjustable without CSS.
Header background, highlighted column, and row-label color set separately.
The "Most Popular" ribbon's color, text, and typography are all editable.
No. The widget registers through the free Elementor page builder's widget API, so the free version is enough to use every part described on this page.
Yes — plans are a repeater, so add a fourth, fifth, or tenth card. The comparison table underneath is fixed at three columns, to match the three-card layout it's built to sit below.
No. Every color, gradient, and text style shown on this page — including the button hover states and the toggle's active color — is a Style tab control.
No. It ships its own small vanilla-JavaScript file, and it re-initializes automatically inside the Elementor editor, in popups, and after AJAX page loads.
Yes — every label in the widget goes through WordPress's translation functions under the plugin's own text domain, ready for a .po/.mo file.
Install it free, drop it into any page, and let the toggle do the explaining.