Elementor’s free version does not ship a pricing table widget at all; you either build one out of columns and dividers by hand, or you install an addon, one of the additions covered in the 2026 WordPress + Elementor stack. The Plus Addons for Elementor includes a dedicated Pricing Table widget in its free tier, and unlike some addon widgets that only give you a single static layout, it ships five demo layouts plus a working monthly/yearly price switcher out of the box.
Here is what the widget actually includes and how to put a real pricing table together with it, step by step.
What’s Included in the Pricing Table Widget
Per the widget’s own feature page, the Pricing Table ships five layout variations covering a monthly/yearly switcher, ribbon text for highlighting a plan, a background-image style, and a zoom-on-hover effect. Every layout supports a title, a price with currency display, an optional “previous price” for showing a discount struck through, a feature list, a Call To Action button (with icon or Lottie animation support), and CTA text positioned below the button. A “Show More” toggle lets you collapse a long feature list until a visitor clicks to expand it.
This widget is listed as “FREE Pricing Tables for Elementor” on the plugin’s own WordPress.org listing, alongside the free Progress Bar and Social Icons widgets, so it does not require a Premium license to use, unlike the WooCommerce Store Builder widgets covered separately. It is a good widget to compare directly against a competing plugin’s version if you are weighing addons, the same way the Essential Addons vs The Plus Addons comparison weighs entire widget libraries against each other.
Step-by-Step: Building a Pricing Table
- In the Elementor editor, search for “Pricing Table” in the widget panel and drag it onto the canvas.
- Pick one of the five layout presets as your starting point, then open the Content tab to set the plan title, price, currency symbol, and billing period text (for example, “/month”).
- Add your feature list line by line; each line can carry its own icon and can be marked included or excluded so free-tier limitations show with a visual strike or muted color.
- Set the Call To Action button label, link, and optional icon or Lottie animation, then add any CTA text you want to show underneath it (a refund policy line or a “no credit card required” note, for example).
- If this plan is your recommended tier, turn on the ribbon text or the pricing highlighter from the Style tab so it visually stands out from the other columns next to it.
- Repeat for each plan column, then group the columns in an Elementor container or the Grid Builder if you are laying out three or more plans side by side.
Adding a Monthly/Yearly Price Switcher
One of the five layouts ships with a built-in monthly/yearly switcher, a toggle above the pricing columns that swaps the displayed price and billing text without a page reload. Select that layout preset, then set both the monthly and yearly price values in the widget’s Content tab; the toggle handles showing and hiding the right one. This is worth using over a manual two-table setup, since it keeps both price points in one widget instance instead of duplicating the whole table for each billing period, the same instance-over-duplication logic behind the plugin’s widget-bloat cleanup guidance.
Styling: Ribbons, Highlighters, and Background Images
The Style tab controls go beyond color and typography. Ribbon text lets you stamp a corner badge like “Most Popular” on one column. The pricing highlighter option elevates or recolors a single column so it draws the eye before a visitor reads any of the numbers. A background-image layout swaps the flat card background for a photo or texture, and the zoom effect scales the whole card slightly on hover, which reads as a subtle “pick me” cue rather than a hard color change.
Responsive Behavior
Like every widget in the plugin’s grid and layout system, the Pricing Table widget’s column count and spacing are controlled per device from Elementor’s own responsive tabs (desktop, tablet, mobile). A three-column pricing table on desktop typically needs to be checked on mobile to confirm it stacks to a single column rather than squeezing three cards into a phone-width viewport, since that is the single most common way a pricing table ships looking broken on a small screen, and the same responsive check that matters on the search bar widget or any other Elementor addon component.
