How to Add a Pricing Table in Elementor?

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.

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

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

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.

Content

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

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

Price

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

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.

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.

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.

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.

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

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

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.

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.

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.

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
• Add a show more button for the feature list
• Highlight a plan with the scale effect
• Add a tooltip to a pricing table