---
title: "How to Add a Pricing Table in Elementor?"
url: https://theplusaddons.com/docs/add-a-pricing-table-in-elementor/
date: 2024-06-20
modified: 2026-09-15
lang: en
author: "Aditya Sharma"
description: "A pricing card has to say four things quickly: who the plan is for, what it costs, what is included and what to click. The Pricing Table widget from The..."
image: https://theplusaddons.com/wp-content/uploads/2024/06/How-to-Add-a-Pricing-Table-in-Elementor_-1024x536.jpg
word_count: 1343
---

# How to Add a Pricing Table in Elementor?

## 

- The Pricing Table widget from The Plus Addons for Elementor builds a single pricing card inside Elementor, and three plans require three widgets side by side in one container.
- The free edition includes Style 1 for Layout and Price Style, while Layout Style 2, Style 3, Price Style 2, Price Style 3, tooltips, the Show More link, the call-to-action text, Lottie button icons, and ribbon Styles 2 and 3 need Pro.
- The Content section sets the plan name, subtitle, and icon above the title, with Select Icon offering Icon, Image, or Svg (PRO), and Icon Font offering Font Awesome, Font Awesome 5, or Icons Mind (PRO).
- The widget has limits: built-in Font Awesome 4 icons render as blank space without a stylesheet, every Pricing Table on the page uses the same HTML id, and there is no built-in monthly/yearly switcher or per-plan comparison table.

A pricing card has to say four things quickly: who the plan is for, what it costs, what is included and what to click. The **Pricing Table** widget from The Plus Addons for Elementor builds that card inside Elementor, with no extra plugin.

This page walks through every setting in the widget, in the order the panel shows them, and says which parts need Pro.

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/pricing-table/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Free** — the Pricing Table widget is in the free The Plus Addons for Elementor. Layout Style 2 and Style 3, tooltips, the Show More link, the call-to-action text, Lottie button icons and ribbon Styles 2 and 3 need Pro.- **Widget to enable:** Pricing Table, switched on under **The Plus Addons > Widgets**.- **One widget is one plan:** the widget renders a single pricing card. For a three-column pricing section, put three Pricing Table widgets side by side in one container.

## Turn the Widget On

- Go to **The Plus Addons > Widgets** in the WordPress admin.- Search for **Pricing Table** and switch its toggle on.- Save. The widget now appears in the Elementor panel.

![The Plus Addons Widgets screen in WordPress admin with the Pricing Table widget toggle switched on](https://theplusaddons.com/wp-content/uploads/2024/06/pricing-table.png)

https://www.youtube.com/watch?v=9V0E9mFmaro

## Layout

Drag **Pricing Table** onto the page and open the **Layout** section.

- **Import Presets** opens The Plus Addons preset picker for this widget.- **Style** chooses the card layout. Free has **Style 1**; **Style 2 (PRO)** and **Style 3 (PRO)** need Pro.

![Layout section of the Pricing Table widget with the Style picker outlined and three pricing cards on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-layout-style.webp)

![Import Presets button at the top of the Layout section](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-import-presets.webp)

## Content

The **Content** section holds the plan name and the icon above it.

- **Style** — the title layout. There is one option, **Style 1**.- **Title** — the plan name, for example Professional.- **Sub Title** — a short line under the name, for example For growing teams.- **Select Icon** — what sits above the title: **Icon**, **Image** or **Svg (PRO)**. Leave it empty for no icon.- **Icon Font** — **Font Awesome**, **Font Awesome 5** or **Icons Mind (PRO)**.

![Content section with Select Icon outlined, offering Icon, Image and Svg (PRO)](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-select-icon.webp)

## Price

- **Price Style** — Free has **Style 1**; **Style 2 (PRO)** and **Style 3 (PRO)** need Pro.- **Prefix Text** — the currency symbol or anything before the number.- **Value Of Price** — the amount itself.- **Postfix Text** — what comes after, such as Per Month.

![Price section with Value Of Price outlined and the amount shown on the middle card](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-price.webp)

## Previous Price

Switch **Display Previous Price** on to show a struck-through old price. It has the same three fields — **Prefix Text**, **Value Of Price** and **Postfix Text** — and prints them as one struck-through run of text on the same line, just before the current price.

![Previous Price section switched on, with the struck-through $79 shown beside the current $49 on the middle card](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-previous-price.webp)

## Description

**Style** decides how the feature list is written:

- **Stylish List** — one repeater row per feature, each with its own icon and (in Pro) its own tooltip.- **WYSIWYG** — a single rich-text box instead of a list.

![Description section with the Style dropdown outlined, set to Stylish List](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-description.webp)

With **Stylish List** selected you also get **List Style** (**Style 1** or **Style 2**) and the repeater itself. Open a row to set:

- **List Description** — the feature text.- **Icon Font** and **Icon Library** — the tick or bullet.- **Tooltip Options** — a Pro extra, covered in its own doc.

![A Stylish List repeater row open, showing List Description, Icon Font and Icon Library](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-list-item.webp)

Below the repeater, Pro adds **List Open Default**, which hides the rest of the list behind a show-more link.

## Button

**Button** is on by default, with the text **Free Trial**.

- **Button Type** — **Basic** uses the styles below; **Global** uses a saved global button style instead.- **Style** — **Style 1 (PRO)**, **Style 2** and **Style 3 (PRO)**. Style 2 is the default and the only one in Free.- **Button Text** and **Button Link**.- **Icon Font**, **Icon**, **Icon Position** and **Icon Spacing** — these only appear for **Style 2**.- **Icon Type** (Pro) swaps the icon for a Lottie animation.

![Button section with Button Text outlined and the button visible on the middle card](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-button.webp)

The three button styles are pickers rather than named presets, so it is worth opening **Style** to see them:

![Button Style picker showing Style 1 (PRO), Style 2 and Style 3 (PRO)](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-button-style.webp)

## Call To Action

**Call To Action(CTA) Text** is a Pro rich-text box that prints a line directly under the button — the place for a reassurance such as *No credit card required*.

![Call To Action section with the CTA text box outlined and the line rendered under the button](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-cta.webp)

## Ribbon

Switch **Display Ribbon** on to flag one plan.

- **Style** — **Style 1** is a bar across the top of the card and works in Free. **Style 2 (Pro)** is a square corner badge and **Style 3 (Pro)** a small pin.- **Ribbon/Pin Text** — the wording. It is a rich-text field, and the styling prints it in capitals.

![Ribbon section with Display Ribbon switched on and a MOST POPULAR bar drawn directly above the middle card](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-ribbon.webp)

## Styling the Card

The **Style** tab has one section per part of the card — **Icon**, **Title**, **SubTitle**, **Previous Price**, **Price**, **Content**, **Content Background**, **Button**, **Call To Action** and **Ribbon/Pin**. Two more are worth knowing:

- **Background Options** — padding, margin, border, background and box shadow for the whole card, each with a Normal and a Hover state. The hover animations are Pro.- **Extra Effects** — **Scale Zoom**, which enlarges one card to make it stand out.

![Background Options section of the Style tab with Hover Animation outlined](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-background.webp)

![Scale Zoom set to 1.12 in Extra Effects, with the middle card drawn larger than its neighbours](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-scale-zoom.webp)

Sections that depend on a setting only appear once it is used: **Lottie** after you pick the Lottie icon type, **Tooltip Options** for tooltips, **Ribbon/Pin** once the ribbon is on, and **SVG**, **Icon** or **Image Style** depending on **Select Icon**.

## Settings at a Glance

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Style** (Layout) | Card layout. Styles 2 and 3 are Pro | Style 1 |
| **Title** | The plan name | Professional |
| **Select Icon** | Icon, image or SVG above the title | empty (no icon) |
| **Price Style** | Price layout. Styles 2 and 3 are Pro | Style 1 |
| **Value Of Price** | The amount | 59.99 |
| **Display Previous Price** | Shows an old price before the current one | Off |
| **Style** (Description) | Stylish List or WYSIWYG | Stylish List |
| **List Style** | Style 1 or Style 2 for the feature list | Style 1 |
| **List Open Default** (Pro) | How many features show before the show-more link | 3 |
| **Button** | Shows the button | On |
| **Style** (Button) | Style 2 only in Free | Style 2 |
| **Icon Position** | Icon before or after the button text | After |
| **Position** (Style > Button) | Button above or below the feature list | Center |
| **Display Ribbon** | Shows the ribbon. Styles 2 and 3 are Pro | Off |
| **Scale Zoom** | Enlarges the card, 0.6 to 1.8 | 1 |

## How It Behaves

- One widget renders one plan. Three plans means three widgets in one container.- With **Position** set to **Center** (the default) the button is drawn between the price and the feature list. **Bottom** moves it under the list.- The call-to-action line is printed right after the button, and still appears if you switch the **Button** toggle off.- **Previous Price** is one piece of text: prefix, amount and postfix run together in a single element before the current price.- The ribbon does not push the card content down. **Style 1** is drawn in the space directly above the card; Styles 2 and 3 sit over its top-right corner.

## Limitations

- The widget's built-in Font Awesome 4 icons render as blank space. No Font Awesome stylesheet is loaded, so the default tick (*fa fa-plus*) and the default button arrow (*fa fa-chevron-right*) show nothing. Pick **Font Awesome 5** under **Icon Font** instead — those icons are drawn as inline SVG and always show.- Every Pricing Table on the page renders with the same HTML id. Anchor links and any custom CSS or JavaScript written against that id will hit the first card only. Target your own class from the **Advanced** tab instead.- There is no built-in monthly/yearly switcher, no per-plan comparison table and no way to build several plans from one widget.- If you save a page using a Pro layout style and then run without Pro, the card renders as an empty box rather than falling back to Style 1.

## Troubleshooting

### The icons next to my features are missing

They are Font Awesome 4 icons and no Font Awesome stylesheet is loaded. Set **Icon Font** to **Font Awesome 5** and pick the icon again.

### Style 2 or Style 3 gives me an empty card

Those layouts are Pro. Without the Pro plugin the widget prints an empty wrapper. Switch **Style** back to **Style 1**.

### My button has no text

Button **Style 1** and **Style 3** are Pro. In Free they render an empty link. Use **Style 2**.

### The Ribbon or Call To Action section is not in the panel

Both sit at the bottom of the **Content** tab. In Free, **Call to Action** holds only the upgrade notice.

### My three cards are different heights

Each widget sizes itself to its own content. Set the container's **Align Items** to stretch, or give the cards the same number of feature rows.

## Related Docs

- [Add a ribbon to a pricing table](https://theplusaddons.com/docs/add-a-ribbon-to-an-elementor-pricing-table/)- [Add a show more button for the feature list](https://theplusaddons.com/docs/add-show-more-button-for-features-in-elementor-pricing-table/)- [Highlight a plan with the scale effect](https://theplusaddons.com/docs/highlight-a-pricing-plan-with-scale-effect-in-elementor/)- [Add a tooltip to a pricing table](https://theplusaddons.com/docs/add-a-tooltip-to-an-elementor-pricing-table/)

## Frequently Asked Questions

**Q: Why is my pricing table showing as an empty box in Elementor?**
A: That usually happens when the page was saved with a Pro layout style and then opened without Pro active. The Pricing Table widget from The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH does not fall back to Style 1 in that case, so the card renders as an empty box. The practical fix is to keep the layout on a free style if Pro is not installed.

**Q: How many plans can I show with one pricing table widget?**
A: One Pricing Table widget renders one plan, so a three-column pricing section needs three separate widgets placed side by side in one container. That matters because each card sizes itself to its own content, which can make columns uneven if the feature lists differ. If you want matching heights, the page suggests stretching the container’s items or giving each card the same number of feature rows.

**Q: Why are the feature icons or button arrows missing in my pricing table?**
A: The missing icons issue comes from Font Awesome 4. The page says no Font Awesome stylesheet is loaded, so the default tick icon and the default button arrow can show as blank space. Switching Icon Font to Font Awesome 5 fixes that because those icons are drawn as inline SVG and always show. That is the safest choice when icons matter for scanability.

**Q: What is the best button style to use in the free version of Pricing Table?**
A: Style 2 is the only button style available in Free, while Style 1 and Style 3 need Pro. That makes Style 2 the practical default if you want a visible button without upgrading. It also supports Button Text, Button Link, and icon placement options like Icon Position and Icon Spacing, which gives you enough control for a standard call-to-action.

**Q: Can I add a ribbon or call-to-action text without upgrading?**
A: The ribbon has one free option: Style 1, which appears as a bar across the top of the card. Call To Action is different because it is a Pro rich-text box under the button, meant for lines like No credit card required. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH separates those two so you can flag a plan for free but keep CTA copy behind Pro.

**Q: How do I make all pricing cards the same height?**
A: Each Pricing Table widget grows based on its own content, so cards with different feature counts will not line up automatically. The page suggests two ways to handle that: set the container’s Align Items to stretch, or give every card the same number of feature rows. That keeps comparison tables cleaner because uneven heights make one plan look more prominent than it should.