Marketing · Gutenberg
Pricing Section block for WordPress
All-in-one multi-tier pricing section with monthly/yearly toggle, feature rows, popular badge, and per-plan CTAs.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
All-in-one multi-tier pricing section with monthly/yearly toggle, feature rows, popular badge, and per-plan CTAs.
Inspector panels on this block: Section Header, Billing Toggle, Plans (, Layout & Cards. Those titles come from index.js, not from a shared template.
Behavior controls: “Heading tag” options: H2, H3, H4, p; “CTA style” options: Filled, Outline, Subtle, Link; “Card style” options: Elevated (shadow), Flat, Bordered, Ghost.
Where to find it
Gutenberg inserter → Marketing → search “Pricing Section” (block name `blockenberg/pricing-section` in block.json). Style it in the sidebar after insert.
How to use Pricing Section block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Pricing Section”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Section Header. Set “Show heading”, “Heading text”, “Heading tag”, “Show sub-text”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show heading | On/off toggle in the inspector. On by default. Saved as `showSectionHeading`. |
| Heading text | Text field in the inspector. block.json default: Simple, transparent pricing. Saved as `sectionHeading`. |
| Heading tag | Select control; the chosen value is saved on the block. Options: H2; H3; H4; p. block.json default: h2. Saved as `headingTag`. |
| Show sub-text | On/off toggle in the inspector. On by default. Saved as `showSectionSubtext`. |
| Sub-text | Text field in the inspector. block.json default: No hidden fees. Cancel anytime.. Saved as `sectionSubtext`. |
| Show monthly/yearly toggle | On/off toggle in the inspector. On by default. Saved as `showToggle`. |
| Monthly label | Text field in the inspector. block.json default: Monthly. Saved as `toggleLabelMonthly`. |
| Yearly label | Text field in the inspector. block.json default: Yearly. Saved as `toggleLabelYearly`. |
| Show savings badge | On/off toggle in the inspector. On by default. Saved as `showSavingsBadge`. |
| Savings badge text | Text field in the inspector. block.json default: Save 25%. Saved as `savingsBadge`. |
| Default to yearly view | On/off toggle in the inspector. Off by default. Saved as `defaultYearly`. |
| Plan name | Text field in the inspector. Saved as `plans`. |
| Eyebrow | Text field in the inspector. Saved as `plans`. |
| Description | Text field in the inspector. Saved as `plans`. |
| Monthly price (number only) | Text field in the inspector. Saved as `plans`. |
| Yearly price (number only) | Text field in the inspector. Saved as `plans`. |
| Period label (monthly) | Text field in the inspector. Saved as `plans`. |
| Period label (yearly) | Text field in the inspector. Saved as `plans`. |
| CTA label | Text field in the inspector. Saved as `plans`. |
| CTA URL | Text field in the inspector. Saved as `plans`. |
| CTA style | Select control; the chosen value is saved on the block. Options: Filled; Outline; Subtle; Link. Saved as `plans`. |
| Mark as popular | On/off toggle in the inspector. Saved as `plans`. |
| Popular badge text | Text field in the inspector. Saved as `plans`. |
| Columns | Numeric range control in the inspector. Range 1–4. block.json default: 3. Saved as `columns`. |
| Gap (px) | Numeric range control in the inspector. Range 0–60. block.json default: 24. Saved as `gap`. |
| Max width (px) | Numeric range control in the inspector. Range 600–1600. block.json default: 1100. Saved as `maxWidth`. |
| Container padding (px) | Numeric range control in the inspector. Range 0–120. block.json default: 48. Saved as `containerPadding`. |
| Card style | Select control; the chosen value is saved on the block. Options: Elevated (shadow); Flat; Bordered; Ghost. block.json default: elevated. Saved as `cardStyle`. |
| Card border radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `cardRadius`. |
| Card padding (px) | Numeric range control in the inspector. Range 16–64. block.json default: 32. Saved as `cardPadding`. |
| Currency symbol | Text field in the inspector. block.json default: $. Saved as `currencySymbol`. |
| Show eyebrow | On/off toggle in the inspector. On by default. Saved as `showEyebrow`. |
| Show description | On/off toggle in the inspector. On by default. Saved as `showDescription`. |
| Show feature list | On/off toggle in the inspector. On by default. Saved as `showFeatures`. |
| Section Heading | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `headingTypo`. |
| Subtext | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `subtextTypo`. |
| Plan Name (Name Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `nameTypo`. |
| Price | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `priceTypo`. |
| Description (Desc Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `descTypo`. |
| Feature | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `featureTypo`. |
| Container Background | Color control in the inspector. Saved as `containerBg`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Popular Plan Background | Color control in the inspector. block.json default: #6366f1. Saved as `popularBg`. |
| Plan Name Color | Color control in the inspector. block.json default: #111827. Saved as `nameColor`. |
| Price Color | Color control in the inspector. block.json default: #111827. Saved as `priceColor`. |
| Period Color | Color control in the inspector. block.json default: #6b7280. Saved as `periodColor`. |
| Description Color | Color control in the inspector. block.json default: #6b7280. Saved as `descColor`. |
| Feature Color | Color control in the inspector. block.json default: #374151. Saved as `featureColor`. |
| Missing Feature Color | Color control in the inspector. block.json default: #d1d5db. Saved as `featureMissingColor`. |
| Included Icon Color | Color control in the inspector. block.json default: #10b981. Saved as `includedIconColor`. |
| Popular Name Color | Color control in the inspector. block.json default: #ffffff. Saved as `popularNameColor`. |
| Popular Price Color | Color control in the inspector. block.json default: #ffffff. Saved as `popularPriceColor`. |
| Toggle Active Background | Color control in the inspector. block.json default: #6366f1. Saved as `toggleActiveBg`. |
| Heading Color | Color control in the inspector. block.json default: #111827. Saved as `headingColor`. |
| Subtext Color | Color control in the inspector. block.json default: #6b7280. Saved as `subtextColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- All-in-one multi-tier pricing section with monthly/yearly toggle, feature rows, popular badge, and per-plan CTAs — that is the job of Pricing Section, not a generic content block.
- Use it when you need the editor control labeled “Show heading”, which exists on this block’s inspector.
- It matches pages about pricing, plans, subscription.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Pricing Section block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Pricing Section”. It sits under Marketing. After insert, open Section Header and set “Show heading”, “Heading text”, “Heading tag”, “Show sub-text”.
What makes Pricing Section different from other Blockenberg blocks?
All-in-one multi-tier pricing section with monthly/yearly toggle, feature rows, popular badge, and per-plan CTAs. Inspector labels on this block include “Show heading”, “Heading text”, “Heading tag”, “Show sub-text”.
Is the Pricing Section Gutenberg block free?
Yes. Pricing Section ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Pricing Section to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Section Header, Billing Toggle, Plans (, Layout & Cards).
Related marketing blocks
Pricing Table
Pricing card with plan name, price, features list, and CTA button. Highlight popular plans with a badge.
Comparison Cards
Visual side-by-side product or plan comparison cards with features, pricing, and CTA. Distinct from the tabular Comparison Table block.
Pricing Slider
Interactive pricing section with a usage/tier slider — drag to select a plan and prices update dynamically with smooth animation.
Comparison Checklist
Two-column 'With / Without' checklist comparison to highlight the value of your product or service.
Comparison Section
Us vs. Them comparison table with feature rows, checkmark/cross icons, highlighted winner column, and full colour/typography controls.
Comparison Wall
Side-by-side feature comparison with two columns — ideal for before/after, free vs pro, etc.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Pricing Section from the Gutenberg inserter.