One of the most common uses of a Switcher block is showing different pricing plans — for example, a monthly and yearly toggle — so visitors can compare options and make a decision without leaving the page.
The Switcher block in Nexter Blocks supports two methods for building this layout: the Editor method, where you design the layout directly inside the switcher, and the Pattern method, where you save a reusable layout as a pattern and then attach it to each switcher state.
To check the complete feature overview documentation of the Nexter Blocks Switcher block, click here.
Requirement – This block is a part of Nexter Blocks. Make sure it is installed and activated.
Best Used For:
- SaaS and software pricing pages with a monthly and yearly billing toggle
- Membership and subscription sites comparing two or three plan tiers with a single switch
- Service pages with a toggle between basic and premium pricing packages
In this example, we will create a toggle pricing table for a monthly and yearly pricing plan.
Add the Switcher block to the page. In the Content 1 tab, go to Select Source and choose Editor. Use this method when you want to build the layout directly inside the block editor without saving a pattern first.
With the Editor option selected, use the block editor inside the Content 1 area to build your first pricing layout. Add the Nexter Blocks Container and Pricing Table blocks to create the monthly pricing structure.
Once the Content 1 layout is ready, click the toggle button on the page to switch to the Content 2 state. Build the yearly pricing layout there using the same blocks.
This method works well when you need to build the pricing layouts quickly and do not plan to reuse them elsewhere on the site.
The second option is the Pattern method. Use this when you want to reuse the same pricing layout in multiple places or load a pre-built layout into the switcher. In this method, you create two separate patterns — one for monthly and one for yearly pricing — and then attach each pattern to a switcher state.
To create a pattern, build your pricing layout using the Nexter Blocks Container and Pricing Table blocks. Once the layout is complete, select the main container, click the 3 dots menu at the top right of the block, and click Create Pattern.
Give the pattern a descriptive name such as “Monthly Pricing Table”. Follow the same steps to create the yearly pricing layout and save it as a second pattern.
Once both patterns are saved, go to the Content 1 tab in the Switcher block. Set Select Source to Pattern and from the Pattern dropdown, choose the monthly pricing pattern.
Go to the Content 2 tab and follow the same process to attach the yearly pricing pattern.
Your toggle pricing table is now ready. Visitors can click the toggle to switch between the monthly and yearly pricing layouts.
For other Switcher block layouts, see How to connect a Carousel Remote with Switcher in WordPress.
To add a dark mode toggle using the same Switcher block, see How to Add a Dark Mode Switcher in WordPress.
