Marketing · Gutenberg
Pricing Switcher block for WordPress
Monthly/Yearly toggle that shows or hides pricing columns on the page.
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
Monthly/Yearly toggle that shows or hides pricing columns on the page.
Inspector panels on this block: Labels & Default. Those titles come from index.js, not from a shared template.
Behavior controls: “Default Active” options: Monthly, Yearly; “Switch Style” options: Pills, Slider, Toggle.
Where to find it
Gutenberg inserter → Marketing → search “Pricing Switcher” (block name `blockenberg/pricing-switcher` in block.json). Style it in the sidebar after insert.
How to use Pricing Switcher block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Pricing Switcher”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Labels & Default. Set “Monthly Label”, “Yearly Label”, “Default Active”, “Saving Badge Text”.
- Check the published page. The view script reads HTML data attributes: data-default, data-switcher, data-target. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Monthly Label | Text field in the inspector. block.json default: Monthly. Saved as `labelMonthly`. |
| Yearly Label | Text field in the inspector. block.json default: Yearly. Saved as `labelYearly`. |
| Default Active | Select control; the chosen value is saved on the block. Options: Monthly; Yearly. block.json default: monthly. Saved as `defaultActive`. |
| Saving Badge Text | Text field in the inspector. block.json default: Save 20%. Saved as `savingBadge`. |
| Show Saving Badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Switch Style | Select control; the chosen value is saved on the block. Options: Pills; Slider; Toggle. block.json default: pills. Saved as `switchStyle`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 40. Saved as `borderRadius`. |
| Label | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `labelTypo`. |
| Badge | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `badgeTypo`. |
| Accent Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Colors — Background | Color control in the inspector. block.json default: #f3f3f7. Saved as `bgColor`. |
| Active Text | Color control in the inspector. block.json default: #ffffff. Saved as `activeText`. |
| Inactive Text | Color control in the inspector. block.json default: #555555. Saved as `inactiveText`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-default, data-switcher, data-target.
When this is the right block
- Monthly/Yearly toggle that shows or hides pricing columns on the page — that is the job of Pricing Switcher, not a generic content block.
- Use it when you need the editor control labeled “Monthly Label”, which exists on this block’s inspector.
- It matches pages about pricing, toggle, switcher.
- 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 Switcher block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Pricing Switcher”. It sits under Marketing. After insert, open Labels & Default and set “Monthly Label”, “Yearly Label”, “Default Active”, “Saving Badge Text”.
What makes Pricing Switcher different from other Blockenberg blocks?
Monthly/Yearly toggle that shows or hides pricing columns on the page. Inspector labels on this block include “Monthly Label”, “Yearly Label”, “Default Active”, “Saving Badge Text”.
Is the Pricing Switcher Gutenberg block free?
Yes. Pricing Switcher ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Pricing Switcher 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: Labels & Default).
Related marketing blocks
Pricing Slider
Interactive pricing section with a usage/tier slider — drag to select a plan and prices update dynamically with smooth animation.
Comparison Cards
Visual side-by-side product or plan comparison cards with features, pricing, and CTA. Distinct from the tabular Comparison Table block.
Feature List
Rich feature checklist showing included / not-included / partial / coming-soon states per item. Ideal for pricing pages, plan comparisons, and product spec sheets.
Pricing Section
All-in-one multi-tier pricing section with monthly/yearly toggle, feature rows, popular badge, and per-plan CTAs.
Pricing Table
Pricing card with plan name, price, features list, and CTA button. Highlight popular plans with a badge.
Split Price CTA
Two-column sales section: pricing offer on the left, CTA with supporting benefits on the right. Common on SaaS pricing and checkout pages.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Pricing Switcher from the Gutenberg inserter.