BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Guide

Pricing Table Free

How to set up and style the Pricing Table widget in Elementor.

Pricing Table shows a single plan: its name, a short description, the price, a list of features and a button. Place one widget per column to compare plans side by side, and switch on Featured Plan for the one you want people to notice.

Part of: Bright Addons (free).

Set it up

  1. Drag the Pricing Table widget into a column. Use one widget for each plan.

  2. In Header, type the Plan Name and Description.

  3. In Price, set the Currency Symbol, Price and Period. Add an Original Price if the plan is on sale.

  4. In Features, edit the Items list. For each line, type the Feature text and switch Included off for anything the plan does not have.

  5. In Button, set the Text and Link, and edit or clear the Note Under Button.

  6. For the plan you want to highlight, switch on Featured Plan and edit the Badge Text.

  7. Open the Style tab to set the Accent Color, box, text and button styling.

Content options

Header

Option What it does
Plan Name The name of the plan shown at the top of the box.
Plan Name Tag The HTML tag used for the plan name, from H1 to H6, div, span or p.
Description A short line of text under the plan name.
Featured Plan Highlights this plan with an accent border, a filled button and a badge.
Badge Text The text on the badge, shown only when Featured Plan is on.

Price

Option What it does
Currency Symbol The symbol printed in front of the price and the original price.
Price The amount to show. It is a text field, so it accepts any text.
Original Price Optional. Shown crossed out for a sale.
Period Text after the price, for example / year. Leave it empty to hide it.

Features

Option What it does
Items The list of feature lines. Add, remove, duplicate and reorder them.
Feature The text of one feature line.
Included On shows a check icon. Off shows a cross icon and strikes through the text.
Tooltip Optional extra text that appears when a visitor hovers over the feature text.

Button

Option What it does
Text The button label. Leave it empty to hide the button and the note under it.
Link Where the button goes. It supports dynamic tags.
Note Under Button A small line of text below the button.
Alignment Sets the text alignment of the box to left, center or right, per device.
Bright Addons Pro

Like this free widget? Get 70+ more with Pro

Pro adds 77 widgets, 10 extensions, a Theme Builder and 32 dynamic tags, and keeps every free widget. From $16 a year, with a 14-day money-back guarantee.

Style options

These sections are in the Style tab.

  • Box

    background color, padding, border, border radius, box shadow, hover box shadow and the Accent Color used by the featured border, badge and button.

  • Plan Name and Description

    color and typography for both, plus spacing under the plan name.

  • Price

    color and typography of the amount, top and bottom margin, and color and typography for the currency symbol and period.

  • Features

    text color and typography, alignment, space between lines, and the colors of the included and excluded icons.

  • Badge

    text color, typography and background of the badge. This section appears only when Featured Plan is on.

  • Button

    typography, normal and hover colors for text, background and border, border width, border radius and padding.

Tips

  • Each widget is one plan. To build a comparison, add one Pricing Table per column and give every plan the same feature lines in the same order.

  • The tooltip uses the browser's built in hover text, so it shows on hover with a mouse and has no styling options.

  • Excluded lines include hidden text that tells screen readers the feature is not included.

Questions and answers

Can one widget show several plans side by side?

No. One Pricing Table widget shows one plan. Add one widget per column to line up several plans.

How do I show a sale price?

Type the old amount in Original Price. It is printed crossed out, with the currency symbol, next to the current price.

Can I hide the button?

Yes. Clear the Text field in the Button section. The note under the button is hidden too.

Can I switch between monthly and yearly prices?

There is no built in toggle. The Period field is plain text, so each widget shows one price and one period.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides