---
title: "How to Add a Pricing Table in Elementor (No Code, Free Widget)"
url: https://theplusaddons.com/blog/pricing-table-in-elementor/
date: 2026-09-07
modified: 2026-09-11
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2026/09/pricing-table-elementor-featured-1024x538.jpg
word_count: 803
---

# How to Add a Pricing Table in Elementor (No Code, Free Widget)

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](https://theplusaddons.com/blog/wordpress-elementor-stack-2026/). 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.

Table Of Contents

## What's Included in the Pricing Table Widget

Per [the widget's own feature page](https://theplusaddons.com/widgets/pricing-table/), 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](https://theplusaddons.com/blog/woocommerce-store-builder-the-plus-addons-for-elementor/). 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](https://theplusaddons.com/blog/essential-addons-vs-the-plus-addons-for-elementor/) weighs entire widget libraries against each other.

![The Plus Addons for Elementor Pricing Table widget demo page showing five layout variations](https://theplusaddons.com/wp-content/uploads/2026/09/31zA3vSwpt7-E3kDc4pOFaVzQYaKLb5IhFCxNYFW0AR4u22G3ML5nDgQYz8WV8saIwhGEnXbCtN7mXGSmN3uzA-scaled.png)The Pricing Table widget's own demo page: five free layout variations.

## 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](https://theplusaddons.com/blog/clean-up-bloated-elementor-site/).

## 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](https://theplusaddons.com/blog/masonry-grid-css-vs-elementor/), 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](https://theplusaddons.com/blog/search-bar-in-elementor/) or any other Elementor addon component.

 

[See the Pricing Table Widget Demo](https://theplusaddons.com/widgets/pricing-table/)

## Suggested Reading

- [Essential Addons vs The Plus Addons for Elementor (2026)](https://theplusaddons.com/blog/essential-addons-vs-the-plus-addons-for-elementor/)
- [Elementor WooCommerce Product Page: Store Builder Guide](https://theplusaddons.com/blog/woocommerce-store-builder-the-plus-addons-for-elementor/)
- [Masonry Grid: CSS vs Elementor](https://theplusaddons.com/blog/masonry-grid-css-vs-elementor/)
- [How to Add a Search Bar in Elementor](https://theplusaddons.com/blog/search-bar-in-elementor/)

## Frequently Asked Questions

**Q: Why doesn’t Elementor free have a pricing table widget?**
A: Elementor’s free version does not include a pricing table widget, so the usual fallback is to build one manually with columns and dividers or install an addon. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides a dedicated Pricing Table widget in its free tier, which is why it’s the faster route when you want a real elementor pricing table without hand-building the layout.

**Q: What does the free Pricing Table widget include?**
A: The widget ships five layout variations, and that matters because you are not locked into one static card design. It includes a monthly/yearly switcher, ribbon text for highlighting a plan, a background-image style, and a zoom-on-hover effect. Each layout also supports a title, currency price display, optional previous price, feature list, Call To Action button with icon or Lottie animation support, CTA text below the button, and a Show More toggle for long lists.

**Q: How do I build an elementor pricing table with multiple plans?**
A: The cleanest setup is to use one of the five layout presets as the base, then fill in each plan’s title, price, currency symbol, billing period text, feature list, and CTA details inside Elementor. The page also notes that each feature line can have its own icon and be marked included or excluded, which helps free-tier plans read clearly. For three or more plans side by side, grouping the columns in an Elementor container or the Grid Builder keeps the layout organized.

**Q: What’s the best way to show monthly and yearly pricing without duplicating the table?**
A: The built-in monthly/yearly switcher is the better choice because it keeps both price points inside one widget instance instead of creating two separate tables. One of the five layouts includes a toggle above the pricing columns that swaps the displayed price and billing text without a page reload. That reduces duplication and keeps edits simpler when you only want to maintain one pricing table for both billing periods.

**Q: How do I make one pricing plan stand out from the others?**
A: Ribbon text and the pricing highlighter are the two styling tools built for that job. Ribbon text works like a corner badge such as “Most Popular,” while the highlighter elevates or recolors one column so it gets attention before visitors compare numbers. The page also mentions CTA text under the button, which is useful for trust cues like refund policy notes or “no credit card required” messaging.

**Q: Will this pricing table work well on mobile?**
A: The widget follows Elementor’s responsive tabs for desktop, tablet, and mobile, so column count and spacing can be adjusted per device. That matters because a three-column desktop layout often needs checking on mobile to confirm it stacks into a single column instead of squeezing three cards into a narrow viewport. The same responsive check applies across The Plus Addons for Elementor widgets in general, including other grid and layout components.