Pricing Plans widget

The Pricing Plans widget lets you present your offers, packages, or subscription plans in a structured pricing section.

Each plan can include its own name, icon, price, description, features, call-to-action button, label, and highlight state. You can also offer monthly and yearly pricing with a billing toggle, or configure a plan as a single one-time purchase.

The widget works well for:

  • Subscription plans
  • Membership levels
  • Service packages
  • Course or program options
  • Software plans
  • One-time offers

This article explains how to create and manage pricing plans and customize how the pricing section is displayed.

Pricing Plans

The main Pricing Plans section contains all plans currently included in the widget.

From here, you can:

  • Add plans
  • Edit existing plans
  • Reorder plans
  • Delete plans

Add a plan

Click Add to create another pricing plan.

Reorder plans

Use the drag handle next to a plan to change its position.

The order shown in the settings determines the order in which plans appear on the page.

Edit a plan

Click the settings icon next to a plan to edit its pricing, features, button, and other information.

Delete a plan

Click the trash icon to remove a plan.

💡 Tip

Arrange plans in a logical progression, for example from the simplest or lowest-priced option to the most comprehensive. If there is one plan you particularly want visitors to consider, you can highlight it as the featured plan.

Plan details

Each custom plan contains the information displayed inside its pricing card or row.

Plan name

Enter the name of the pricing plan.

For example:

  • Starter
  • Pro
  • Business
  • Premium

Keep plan names short and easy to distinguish from each other.

Icon

Select an icon to display together with the plan name.

Icons can help visually differentiate plans, particularly when several options are displayed next to each other.

Currency

Enter the currency symbol used for the plan.

For example:

$

You can control whether the currency symbol appears before or after the amount in the widget's Styling settings.

Price / month

Enter the monthly price.

For example:

19

When monthly/yearly pricing is enabled, this is the amount shown when visitors select the monthly billing option.

Price / year

Enter the yearly price.

For example:

180

When visitors switch to yearly billing, the widget displays the yearly amount instead.

When both monthly and yearly prices are provided, the widget can also show the saving created by choosing yearly billing.

💡 Tip

If you offer a discount for annual payment, enter the actual yearly price rather than simply multiplying the monthly price by twelve. This makes the difference between the two billing options clear to visitors.

Single purchase

Enable Single purchase (no /month or /year) when the plan is sold for one fixed price rather than as a recurring monthly or yearly option.

This is useful for:

  • One-time courses
  • Fixed-price programs
  • Service packages
  • Digital products
  • Lifetime offers

When enabled, the price is presented as a single purchase without monthly or yearly terminology.

Plan content

Description

Use Description to briefly explain who the plan is for or what makes it different.

For example:

For individuals getting started.

Keep this short. The feature list below can provide the more detailed differences.

Features

Enter the features included in the plan under Features (one per line).

For example:

1 project

Basic analytics

Email support

Each line is displayed as a separate feature in the pricing plan.

💡 Tip

Focus on the differences that actually help visitors choose between plans. Very long feature lists can make pricing sections harder rather than easier to understand.

Call-to-action button

Each plan can include its own button.

Button text

Enter the text displayed on the button.

For example:

  • Get started
  • Choose plan
  • Join now
  • Buy now
  • Contact sales

Use action-oriented text that makes the next step clear.

Click Add Link to choose where visitors should be taken when they click the plan button.

The destination could for example be a checkout, funnel, page, booking flow, or another relevant next step.

You can visually emphasize a particular pricing option.

Label

Use Label to add a short message to a plan.

For example:

  • Most popular
  • Recommended
  • Best value

The label is displayed prominently on the plan and helps draw attention to it.

Enable Featured plan (highlight) to visually highlight the plan.

This can make one option stand out from the surrounding plans through accent styling.

💡 Tip

Usually, highlight only one plan. If several options are marked as featured, the visual hierarchy becomes less useful.

Layout

The Layout setting controls how pricing plans are presented.

Available options:

  • Cards
  • Columns (minimal)
  • Table (1 per row)

Cards

Displays each plan as a distinct pricing card.

This is a strong choice when visitors should compare a relatively small number of plans side by side.

Cards also work particularly well when plans include:

  • Icons
  • Descriptions
  • Feature lists
  • Labels
  • Prominent call-to-action buttons

Columns (minimal)

Displays the plans in a more minimal column-based presentation.

Use this when you want a lighter pricing section with less visual emphasis around each individual plan.

Table (1 per row)

Displays one plan per row in a more horizontal format.

This can work well when:

  • You have several pricing options
  • Plans contain more content
  • Side-by-side cards would become too narrow

💡 Tip

Use Cards for a classic pricing overview. If the main goal is a detailed feature-by-feature comparison, use the dedicated Pricing Comparison widget instead.

Monthly / yearly pricing

Enable Monthly / yearly toggle to let visitors switch between monthly and yearly pricing.

The toggle appears above the pricing plans.

This is useful when the same plans are available using both billing periods.

Default billing

The Default billing setting controls which billing option is selected when the page first loads.

For example:

  • Monthly
  • Yearly

Choose the option that best matches the offer you want to emphasize.

If yearly billing provides better value, you may want to make Yearly the default.

💡 Tip

When you offer both billing options, make the difference easy to understand. A meaningful annual saving can help visitors see why yearly billing may be the better-value option.

Styling

The Styling settings control the overall appearance of the pricing section.

Theme

Controls the overall visual theme used for the pricing plans.

Choose the theme that works best with the background and surrounding page design.

Name & price font

Controls the font family used for prominent pricing information such as:

  • Plan names
  • Prices

For consistency, it is usually best to use typography that matches the rest of your website.

Currency symbol position

Controls where the currency symbol appears in relation to the price.

Available options:

  • Before the amount
  • After the amount

For example:

$180

or:

180 $

Choose the format that is appropriate for the currency and audience.

Plan border radius

Controls how rounded the corners of the pricing plans are.

  • Lower values create sharper corners
  • Higher values create more rounded cards

Use a radius that matches the visual style used elsewhere on your website.

Colors

Several colors can be customized to match your website design.

Accent color

Controls prominent accent elements such as highlighted plans, feature icons, labels, and other emphasis elements.

Card background

Controls the background color of the pricing plan cards.

Text Color

Controls the primary text color used within the pricing plans.

Make sure there is sufficient contrast against the selected card background.

Toggle text color

Controls the color of the text around the monthly/yearly billing toggle.

For consistency, use colors from your website's Global Colors whenever possible.

Common use cases

The Pricing Plans widget works particularly well for:

  • Subscription plans
  • Membership levels
  • Course packages
  • Coaching packages
  • Service tiers
  • Software plans
  • Program options
  • Monthly and annual subscriptions
  • One-time offers

Best practices

  • Keep plan names short and distinct
  • Arrange plans in a logical order
  • Make the main differences between plans easy to understand
  • Keep descriptions concise
  • Focus feature lists on information that influences the buying decision
  • Use clear call-to-action buttons
  • Highlight only one primary or recommended plan
  • Use the monthly/yearly toggle only when both billing options are genuinely available
  • Make yearly savings clear when annual billing is discounted
  • Use Single purchase for offers that are not recurring
  • Check the pricing section carefully on both desktop and mobile

💡 Tip

A pricing overview should help visitors answer three questions quickly: Which option is right for me? What does it cost? What do I do next? If the section becomes too detailed for that, consider moving the full feature breakdown into the Pricing Comparison widget.

Summary

  • The Pricing Plans widget presents multiple plans, packages, or pricing options
  • Create and manage plans directly using Custom plans
  • Add plan names, icons, monthly/yearly prices, descriptions, and features
  • Configure plans as subscriptions or single purchases
  • Add individual button text and links
  • Add labels and highlight a featured plan
  • Choose between Cards, Columns (minimal), and Table (1 per row)
  • Offer a Monthly / yearly toggle and choose the default billing period
  • Customize fonts, currency position, border radius, theme, and colors
  • Use the dedicated Pricing Comparison widget when visitors need a more detailed feature-by-feature comparison

Used well, the Pricing Plans widget provides a clear overview of your offers and helps visitors quickly understand the available options and choose the plan that best fits their needs.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.