Pricing Tables

Flexible pricing box card. Supports default, simple, minimal, and extended layouts with optional pricing switcher, feature list, and CTA button. It is shown in the block inserter as Canvas Pricing Table and registered as canvas-core/pricing-table.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Layout

Part OrderDefaulttitle,price,sentence,features,action

Comma-separated: icon, title, sentence, price, features, action. Omit a part to hide it.

Shown when Box Style is "Fancy design family"
Plan IconDefaultEmpty

Glyph class for the plan icon (shown when "icon" is in the part order).

Shown when Box Style is "Fancy design family"
Split Price for AnimationDefaultOff

Wraps the amount and the period separately so a design can move them apart on hover.

Shown when Box Style is "Fancy design family"
Decorated HeaderDefaultOff

Heads the item with the design's layered wave graphic.

Shown when Box Style is "Fancy design family"
Parts Inside the HeaderDefaultprice,title

Which parts sit inside the decorated header, comma-separated.

Shown when Decorated Header is on
Styled ConjunctionDefaultEmpty

A character inside the plan name that the design styles separately (e.g. the ampersand in "Cafés & Nightclubs").

Shown when Box Style is "Fancy design family"
Text AlignDefaultCenter

Whether the box contents sit centred or aligned to the start of the line.

ChoicesCenterLeftNone (inherit)
Featured / HighlightedDefaultOff

Adds the pricing-highlight class to mark this plan as popular.
Plan Heading ClassesDefaultfw-medium ls-0

Classes on the heading itself in the Extended layout. Clear it for a plain heading.

Shown when Box Style is "Extended (Side-by-side)"
Subtitle PositionDefaultAutomatic (per box style)

Where the badge line sits. Automatic follows the chosen box style.

ChoicesAutomatic (per box style)Above the titleBelow the title
Switched Call to ActionDefaultOff

Render one CTA per pricing-switcher state, so the button can differ between the two tenures.
Pre-hide Alternate PricesDefaultOn

Hide the alternate price and its button in the markup so they cannot flash before the switcher takes over. Turn it off when your own styling already handles the starting state.
Box StyleDefaultDefault

The overall shape of the pricing box.

ChoicesDefaultSimpleMinimalExtended (Side-by-side)Fancy design family

Content

Plan NameDefaultBasic Plan

Name of the plan.
Subtitle / BadgeDefaultEmpty

Short badge line beside the plan name, for wording such as Most Popular.
DescriptionDefaultEmpty

Short plan description. Rendered by the Extended layout and as the sentence part of the Fancy designs; the other box styles have no place for it.

Shown when Box Style is "Extended (Side-by-side)" or "Fancy design family"
Title TagDefaultH3

Heading level for the plan name.

ChoicesH2H3H4H5H6pspan
Small TitleDefaultOff

Use smaller, uppercase title styling.
Title ImageDefault0

Optional image (icon or logo) shown inside the .pricing-title block.
Title Image Alt TextDefaultEmpty

Overrides the attachment alt text.

Pricing

PriceDefault19

The figure shown as the price. Enter it without the currency symbol.
Currency SymbolDefault$

Symbol shown in front of the price.
Billing PeriodDefault/mo

Billing period printed after the price, for example /mo.
Meta Text (above price)DefaultEmpty

Small line above the price, for wording such as As Low As.
Enable Pricing SwitcherDefaultOff

Show alternate price when a Pricing Switcher block toggles ON.
Alternate PriceDefaultEmpty

The price shown once the switcher is turned on, for example the yearly rate.

Shown when Enable Pricing Switcher is on
Alternate PeriodDefaultEmpty

Billing period printed after the alternate price.

Shown when Enable Pricing Switcher is on

Features

FeaturesDefaultEmpty

The lines listed in the body of the box, one per row.

Each row of Features takes:
- Feature TextDefaultEmpty
  
  Wording of this feature row. Basic formatting is allowed.
- Icon Class (optional)DefaultEmpty
  
  Icon for this row, used instead of the default feature icon.
- Row Classes (optional)DefaultEmpty
  
  Classes on this feature row.
ColumnsDefault1 Column

Whether the feature list runs down one column or splits across two.

Choices1 Column2 Columns
Features Extra ClassesDefaultEmpty

Extra classes on the box around the feature list.
Show IconsDefaultOff

Display icons before each feature item.
Default Icon ClassDefaultbi-check-lg

Default icon applied to all feature items that have no per-item override.

Shown when Show Icons is on
Feature Icon Spacing ClassDefaultme-2

Utility class added to every feature icon for the gap before the text. Clear it when the icon class already carries its own spacing or sizing.

Shown when Show Icons is on

Button

Button LabelDefaultGet Started

Wording on the button.
Button URLDefault#

Where the button sends the reader.
Button StyleDefaultPrimary

Preset look for the button.

ChoicesCanvas - Rounded (Large)Canvas - RoundedCanvas - 3DCanvas - BorderPrimarySecondarySuccessDangerWarningInfoLightDarkand 2 more
Full Width ButtonDefaultOff

Stretch the button across the full width of the box.
Theme Color on HighlightDefaultOff

When the box is highlighted, apply bg-color / border-color to the button.

Shown when Featured / Highlighted is on
Button AttributesDefaultEmpty

Extra attributes on the button, one per line as key=value. Only data attributes and accessibility attributes are kept, and a bare key becomes a data attribute.
Button Attributes (Switcher ON)DefaultEmpty

When set (with the price switcher), the CTA renders once per tenure state inside .pts-content wrappers: this set applies to the switcher-ON copy.

Shown when Enable Pricing Switcher is on
Button Inline StyleDefaultEmpty

Inline style on the button. Unsafe declarations are stripped.

Style

Feature List ClassesDefaultEmpty

Classes on the feature itself (the wrapper and the list are separate hooks).
Feature List Inline StyleDefaultEmpty

Inline style on the feature list, for a colour or spacing the classes do not cover.
Subtitle ClassesDefaultEmpty

Classes on the badge line above the plan name.
Action Area ClassesDefaultEmpty

Classes on the area holding the button.
Button Classes (override)DefaultEmpty

Replaces the derived CTA classes entirely. Leave empty to use the Button Style preset.

Appearance

Background ClassDefaultEmpty

Background class for the whole box, for example bg-light.
Accent Color ClassDefaultEmpty

Adds a top accent border in simple style.

Shown when Box Style is "Simple"
Title Extra ClassesDefaultEmpty

Extra classes on the box around the plan name.
Title Image ClassesDefaultEmpty

Classes on the picture above the plan name.
Title Image WidthDefault0

Width attribute in pixels. Leave at 0 to omit it.

Style tab

Box Background

A style control in the Box group of the Style tab.
Box Border Color

A style control in the Box group of the Style tab.
Box Border Radius

A style control in the Box group of the Style tab.
Title Color

A style control in the Title group of the Style tab.
Title Background

A style control in the Title group of the Style tab.
Title Font Size

A style control in the Title group of the Style tab.
Price Color

A style control in the Price group of the Style tab.
Price Font Size

A style control in the Price group of the Style tab.
Features Font Size

A style control in the Features group of the Style tab.

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Canvas: Alerts, Buttons, Code Highlight, Counters, Dividers, Dropcaps.

Was this page helpful?