Elementor Pricing Table Widget: Free Tutorial + 5 Layouts

A pricing page is where visitors decide whether to hand over their money. The table has to read clean, make plans comparable at a glance, and point the reader at whichever option you actually want them to pick. The Elementor Pricing Table widget from Master Addons for Elementor covers all of that, free, no code.

This tutorial covers the full build: installing the plugin, dropping the widget into a section, and working through the 6 panels that control the content (layout, header, price, features, CTA button, and ribbon badge for the highlighted plan). You also get 5 built-in layouts, per-feature tooltips, Easy Digital Downloads on the button, and full typography control.

Once you have followed along, you will have a pricing table that looks right on any WordPress theme, stacks properly on mobile, and converts better than Elementor’s default pricing block.

What Is the Elementor Pricing Table Widget?

It is a drag-and-drop widget that builds a WordPress pricing table inside the Elementor editor. You get a plan header, the price with currency and billing period, a feature list, a call-to-action button, and an optional ribbon badge for the featured plan. No custom code, no shortcodes, no HTML wrangling.

The Master Addons Pricing Table widget is in the free plugin. The 5 layouts, ribbon, per-feature tooltips, and Easy Digital Downloads support all work without a Pro license. Install the plugin and the widget shows up in the Elementor panel under the Master Addons section, labelled “MA Pricing Table.”

Why a Good Pricing Table Matters

Your pricing page is high-intent traffic. The people landing on it are already thinking about buying. A sloppy pricing table quietly costs you real revenue. The usual reasons:

• Comparison friction. If visitors cannot compare plans at a glance, they bounce back to Google.
• No visual hierarchy. When every plan looks identical, nobody knows which one you actually want them to pick.
• Weak CTA. A grey “Learn More” button loses to a confident “Start Free Trial” every time.

A proper Elementor pricing table deals with all of that. Side-by-side columns, a highlighted plan with a ribbon, a distinct button color, and feature rows that line up across columns. The widget below ships with all of it.

How to Add a Pricing Table in Elementor (Step-by-Step)

Full setup below. This assumes Elementor is already installed. If not, grab the free version from the WordPress plugin directory first.

Step 1: Install Master Addons for Elementor

In WordPress admin, go to Plugins → Add New and search for “Master Addons for Elementor.” Install, activate, done. The installing Master Addons doc has the longer version if anything trips you up.

Step 2: Create a Section With the Right Number of Columns

Open the page in Elementor. Add a new section and pick the column count based on how many plans you want to show. Three columns for Personal / Business / Developer is the most common setup. Four columns start to feel crowded on tablets, and anything above four pretty much forces a horizontal scroll on mobile.

Step 3: Drag the MA Pricing Table Widget Into Your Section

In the widget panel, search for “Pricing Table.” You will see “MA Pricing Table” with the Master Addons badge. Drag it into the first column.

Step 4: Review the Default Layout

Elementor loads a fully populated default the moment you drop the widget in. Plan title, price, feature list, button, ribbon. Worth looking at before you change things so you know what each field actually controls.

Once one plan is configured the way you want it, right-click the widget and choose Duplicate (or copy-paste) to build out the other plans. Much faster than starting each card from scratch, and it guarantees the feature rows line up across columns.

The 6 Configuration Panels Explained

The Content tab has six collapsible panels. What each one does, and the setting inside it that actually matters:

1. Pricing Contents (Layout Picker)

This panel picks one of the 5 pricing table layout variations. Each layout arranges the header, price, and button slightly differently. The other thing that lives here is the “Highlight this table” switch. Turn it on for the plan you want visitors to pick. That toggle adds the visual emphasis and unlocks the ribbon settings at the bottom of the Content tab.

2. Header

The plan name (Personal, Business, Developer) and an optional subtitle (“For solo freelancers,” “For small teams”). You can change the HTML tag of the title. H3 is usually right, unless the section above the table already uses H3, in which case move it to H4 so your heading hierarchy stays clean. The header background color is independent of the rest of the card, so you can stripe the top bar a different color if you want.

3. Pricing

Currency symbol, price amount, original price (strikethrough for discounts), and billing period. The original price field is handy when you are running a promo. Put the sale price in the main amount and the regular price in the original field, and the widget renders the strikethrough automatically. No CSS needed.

4. Features

Add as many feature rows as you want. Each row takes feature text, an icon (checkmark, cross, anything from the icon library), and an optional tooltip. Tooltips are underused in most pricing tables. If a feature needs a 10-word clarification (“Includes 3 team seats” → “Extra seats are $5/mo each”), use a tooltip instead of cramming it into the main text.

Alignment tip: Keep the same feature list order across all three plans. People scan pricing tables horizontally, row by row. If row 3 is “Unlimited users” on the Personal plan but “24/7 support” on Business, you break that scan pattern and visitors give up halfway.

5. Footer (The Call-to-Action Button)

Button text, URL, nofollow toggle, new-tab toggle, plus an optional line of secondary text below the button (“14-day money-back guarantee”). If you sell through Easy Digital Downloads, the EDD Add-to-Cart option is in this panel. Toggle it on and the button becomes a buy-now trigger instead of a plain link.

6. Ribbon (Featured Plan Badge)

The ribbon only appears on the plan where you toggled “Highlight this table” back in panel 1. Common ribbon text is “Popular” or “Best Value.” You can change alignment (top-left, top-right, top-center) and color. Keep the ribbon short. Two words max. Long ribbons wrap awkwardly on mobile.

Styling Your Elementor Pricing Table

Switch to the Style tab. You get a panel for each of the six content sections, plus a General panel for the card itself (border radius, shadow, background). Every panel covers typography, color, spacing, and border settings.

What to actually change:

• Card background and border radius. Match your site. 8–12px radius works for most modern designs. Flat (0 radius) for a more corporate look.
• Featured plan background. Make the highlighted plan visually distinct. A solid brand color on the featured card next to white cards is the simplest move and it works nearly every time.
• Price typography. The price should be the biggest text in the card, bigger than the plan name. 40–56px is typical. Anything smaller and the whole card reads as generic marketing copy.
• Button. Match your site’s primary button. Featured plan gets a solid filled button. Other plans get outlined buttons. That visual gap guides the eye to your preferred plan without needing an arrow or a “choose this” label.

For a deeper walkthrough of the visual decisions that move the conversion needle, see our Elementor pricing table tips post.

Pricing Table Design Tips That Actually Convert

Patterns that hold up on real pricing pages:

• Three plans, not four. Personal / Business / Developer works because three options keeps the decision simple. Four plans slow people down and a non-trivial share of them leave without picking anything.
• Anchor the middle plan. Put your target plan in the middle column and mark it as featured. Visitors compare the cheap plan to it and decide the middle is better. They compare the expensive plan to it and decide the middle is enough.
• Price first, then features. People scan top to bottom. Put the price near the top of the card so they see the number before the feature list.
• Short feature labels. “Unlimited projects” beats “You can create an unlimited number of projects without any restrictions.” Use tooltips for the long version.
• One CTA per card. One button per plan. Do not put “Learn More” next to “Buy Now” on the same card. That split kills conversion because visitors pick the lower-commitment click every time.
• Money-back note near the button. A small “14-day money-back guarantee” line under the CTA reduces purchase anxiety. Free field in the Footer panel.

5 Use Cases for the Elementor Pricing Table Widget

1. SaaS pricing page. Three-tier plans with a ribbon on the middle plan. The default use case and the one the widget is tuned for.
2. Service pricing. Freelancers and agencies use the same widget for service packages (Basic / Standard / Premium). Swap “per month” for “per project” in the billing period field.
3. Membership site plans. Pair it with a feature like restrict content to gate access by tier.
4. Course pricing. Single course, single cohort, lifetime access. Put the ribbon on the lifetime option since that is usually the highest-margin sale.
5. WooCommerce plan comparison. For digital products or subscription boxes, the widget doubles as a plan comparison above the buy button.

If you need to compare many features across many plans (not just 3-6 bullet points per card), the Master Addons Comparison Table widget is the better fit. It handles feature-heavy pages with 15+ rows without looking cramped.

Free vs Pro: What You Get

The MA Pricing Table widget sits in the free Master Addons plugin. All 5 layouts, the ribbon, tooltips, icons, and EDD integration work without a Pro license. Pro unlocks other widgets and the broader feature set around it.

If you only need the pricing table, free is enough. If you want the full 76+ widget library, Theme Builder, Popup Builder, and Template Kits, check Master Addons Pro pricing. For a side-by-side with the other major Elementor addon pack, see Master Addons vs Ultimate Addons.

Frequently Asked Questions

Wrapping Up

A pricing page built with the Elementor pricing table widget from Master Addons handles the cases that matter for most WordPress sites: three plans, a featured option, clean buttons, and full style control from the Elementor panel. No code required. If you want details on every setting, the official Pricing Table documentation has the full reference.

Pair the pricing table with a strong call-to-action section above it and you have a pricing page that works. For more conversion-focused widget ideas, the Elementor marketing widgets guide is a good next read.

Related reading: Pricing table design tips | Elementor FlipBox widget | Master Addons icon library