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 Pro Pro

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

Pricing Table Pro shows your plans side by side in one widget, with a switch between monthly and yearly prices. Each plan has its own prices, feature list, button, ribbon and notes. Use it on a pricing page for software, memberships or services.

Part of: Bright Addons Pro.

Set it up

  1. Add the Pricing Table Pro widget to your page.

  2. In Plans, open each plan and fill in Name, Short Description, Monthly Price and Yearly Price.

  3. In the Features tab of the plan, type one feature per line. Start a line with - for a feature the plan does not include and + to highlight it. Add | and text for a tooltip.

  4. In the Button tab of the plan, set Button Text, Monthly Link and Yearly Link, and turn on Featured Plan or add Ribbon Text.

  5. In Billing Switch and Price, set the Switch Style, the labels, Savings Badge, Show First and the Currency Symbol.

  6. In Layout, set Columns, Gap, Featured Plan Size and Button Position.

  7. Style the cards, prices, features, ribbon and buttons in the Style tab.

Content options

Plans

Option What it does
Plans The list of plans. Each plan has Plan, Features and Button tabs.
Monthly Price The price shown when monthly is selected.
Yearly Price The price shown when yearly is selected.
Monthly Old Price (crossed out) A crossed out price before the monthly price. Yearly has its own field.
Yearly Note A small line under the yearly price, for example Billed yearly.
Features The feature list, one per line, with the - + and / markers.
Yearly Link An optional button link used while the yearly price is shown.
Featured Plan Marks the plan as featured so it gets its own size and style.
Ribbon Text Adds a ribbon to the plan.

Billing Switch and Price

Option What it does
Monthly / Yearly Switch Shows or hides the billing switch.
Switch Style Chooses Toggle or Segmented Buttons.
Savings Badge A short text next to the yearly label, such as Save 20%.
Show First Sets whether monthly or yearly prices show when the page loads.
Currency Symbol The symbol shown with every price.
Monthly Period Text The text after the monthly price, such as /month. Yearly has its own field.
Animate Price Change Counts the price up or down when the period changes.

Layout

Option What it does
Columns The number of plans per row, set per device.
Featured Plan Size Scales the featured plan up to 1.15 times.
Text Alignment Aligns the card content left or center.
Button Position Puts the button under the price or at the card bottom.
Included Icon The icon before included features. Not Included Icon sets the other one.
Hide Not Included Features Removes the lines that start with - from every plan.
Bright Addons Pro

Unlock this and 70+ more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $16 a year, with a 14-day money-back guarantee.

Style options

These sections are in the Style tab.

  • Billing Switch

    space below, typography, label colors for normal, hover and active, toggle and track colors, and savings badge colors.

  • Cards

    background, border, shadow and text color for normal and featured plans, plus radius, padding and hover lift.

  • Name and Description

    typography and colors of both, and plan icon size, color and background.

  • Price

    amount typography and color, currency and period typography, old price color and space around the price.

  • Features

    typography, spacing, dividers, and colors for included, not included and highlighted lines.

  • Ribbon

    ribbon style, typography, text color and background.

  • Buttons

    full width option and separate button styles for normal and featured plans, plus the note under the button.

Tips

  • The widget does not calculate yearly prices or savings. You type every price and the savings badge text yourself.

  • The price animation runs only for plain numbers such as 19, 19.99 or 1,299. Other text simply switches.

  • The Small Decimals switch shows the decimals of a price as small raised digits.

  • A plan with no Yearly Link keeps using the Monthly Link when yearly is selected.

Questions and answers

Can I use it without the monthly and yearly switch?

Yes. Turn off Monthly / Yearly Switch and set Show First to the price you want to display.

How do I add a tooltip to a feature?

Add | and the tooltip text after the feature, for example: 10 GB storage | Per workspace. A small question mark appears next to the line.

Can the featured plan button look different?

Yes. The Buttons style section has a second set of controls under Featured Plan Button.

Can more than one plan be featured?

Yes. Featured Plan is a switch on each plan, so any plan you turn it on for gets the featured style.

Need more help?

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

Troubleshooting guide
All guides