Monthly and yearly pricing side by side doubles the width of a pricing section and halves how carefully anyone reads it.
Putting each set of prices in one side of a Switcher gives the familiar toggle above the tables, with only one set on screen at a time.
For every External Form Styler setting in one place, see the main Switcher guide.
Before You Start
- Edition: Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.
- Block to enable: Switcher, switched on under Nexter > Blocks in your WordPress dashboard.
- Two sets of prices ready — one for each billing period.
Video Tutorial
Steps
- Add the Switcher block where the pricing section should go.
- Set the labels to Monthly and Yearly.
- Put your monthly pricing tables in the first pane.
- Put the yearly pricing tables in the second pane.
- Publish and check both sides on the real page.
The visitor’s choice is remembered only if they click the labels, not the slider. Measured on one page with both controls: clicking the label kept the second pane selected after a reload, while clicking the slider switched the panes but was forgotten on reload. This is reported to the development team; until it is fixed, do not rely on the choice surviving a page load.
How It Behaves
The Switcher shows one of two panes of content at a time, with a toggle between them. It is the block behind a monthly / yearly pricing switch, or any pair of alternatives that should not both be on screen at once.
- Monthly shows first. Measured: pane 1 is the visible one on load, so put the price you want seen first there — usually the lower monthly figure.
- Switching is instant — measured, the panes swap with no page load, so the visitor keeps their place on the page.
- The labels switch the panes on their own. Measured with the slider turned off: clicking either label still switched the content, so the toggle button is optional.
- The block does remember, by design. Measured: choosing the second pane by its label stored the choice in the browser, and the page opened on that pane after a reload. The choice is per browser, not per visitor account.
- The panes and the toggle work in the free plugin. Measured with Pro deactivated: both content panes rendered with their text and the toggle switched between them exactly as under Pro.
Limitations
- The visitor’s choice is remembered only if they click the labels, not the slider. Measured on one page with both controls: clicking the label kept the second pane selected after a reload, while clicking the slider switched the panes but was forgotten on reload. This is reported to the development team; until it is fixed, do not rely on the choice surviving a page load.
- Two billing periods only. A third option — a lifetime price, say — needs the Tabs Tours block instead.
- Both sets of prices are in the page source, since the hidden pane is hidden with CSS rather than withheld.
- The two panes are separate content. A price change means editing both sides; nothing is calculated from the other.
Troubleshooting
The yearly prices are empty
Content is added to each pane separately. Fill in the second pane as well as the first.
The two sides jump in height when I switch
The panes are only as tall as their content. Keep the same number of tables and roughly the same amount of text on each side, or set a minimum height on the block.
It forgets the visitor’s choice
The visitor’s choice is remembered only if they click the labels, not the slider. Measured on one page with both controls: clicking the label kept the second pane selected after a reload, while clicking the slider switched the panes but was forgotten on reload. This is reported to the development team; until it is fixed, do not rely on the choice surviving a page load.
I need a discount badge on the yearly side
Add it inside the second pane like any other content — each pane holds ordinary blocks.
