Skip to main content

Pricing Table

Pricing plans side by side, with a monthly / yearly toggle, a featured column and per-plan feature lists.

The block renders through the pricing_table element — the same PHP that runs in the page builder, so the front end is identical either way.

What the sidebar exposes

OptionWhat it does
plansThe plans — name, price, features and button
billing_toggleOffer a monthly / yearly switch
billing_defaultWhich period is shown first
billing_monthly_labelLabel for the monthly option
billing_yearly_labelLabel for the yearly option
billing_noteSmall print under the toggle
designTable design preset
columnsHow many plans per row
gapSpace between plans
featured_styleHow the featured plan is emphasised
button_presetButton style for every plan
alignText alignment
product_schemaEmit product structured data
box_styleCard box / border preset
icon_badge_presetBadge behind feature icons
accent_colorAccent colour
bg_colorSection background
card_bgPlan background
title_colorPlan name colour
price_colorPrice colour
text_colorFeature text colour
font_size_presetText size preset

Anything not listed stays available in the page builder, and round-trips untouched — the block only writes the values you change, so an element styled in the builder keeps every setting this sidebar does not show.

note
plans is a repeater

It is an addable-popup: each plan expands in place in the sidebar, with its own name, prices, feature list and button.

caution
billing_default decides what people see first

A yearly default advertises the lower monthly-equivalent figure. Whether that is the honest framing or the misleading one depends on what the plans actually charge — and it is the setting most likely to be left at whatever it happened to be.

Use billing_note to say plainly what a yearly price bills as.

The toggle does not switch in the canvas

It is a real control on the front end. Here it would change which prices are displayed, so the preview would be showing one set of numbers while the sidebar edited the other.

Margin and padding come from Gutenberg

The block declares core spacing support, so the element's own spacing option is not exposed here — use the Dimensions panel at the top of the sidebar.