--- title: "How to make a toggle switch pricing table with the Switcher block?" url: https://nexterwp.com/docs/toggle-pricing-table-switcher/ date: 2023-02-02 modified: 2026-09-18 lang: en author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2024/05/toggle-pricing-table-switcher-1024x519.jpg word_count: 698 --- # How to make a toggle switch pricing table with the Switcher block? ## Key Takeaways - Switcher block shows monthly and yearly pricing in two panes, with only one set on screen at a time and the monthly pane visible first on load. - Nexter Blocks Free works with Nexter Blocks Pro, and the Switcher block is enabled under Nexter > Blocks in the WordPress dashboard. - Switcher labels are set to Monthly and Yearly, and clicking either label switches the content instantly without a page load. - Switcher remembers the selected pane only when the visitor clicks the labels, not the slider, and a reload keeps that choice only in the browser. 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](https://nexterwp.com/docs/add-switcher-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-content-switcher/) ## 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. ![Adding the Switcher block for pricing](https://nexterwp.com/wp-content/uploads/2023/02/switcher-select-editor-new.png) - Set the labels to **Monthly** and **Yearly**. ![Setting the monthly and yearly labels](https://nexterwp.com/wp-content/uploads/2023/02/switcher-create-pattern-editor-new.png) - Put your monthly pricing tables in the **first pane**. - Put the yearly pricing tables in the **second pane**. ![The second pane with yearly pricing](https://nexterwp.com/wp-content/uploads/2023/02/switcher-monthly-pricing-table-new.png) - 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. ## Related Docs - [Add a switcher in WordPress](https://nexterwp.com/docs/add-switcher-in-wordpress/)- [Connect a Carousel Remote with the Switcher](https://nexterwp.com/docs/connect-carousel-remote-with-switcher/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before building a toggle pricing table in WordPress?** A: Nexter Blocks provides the Switcher block for this layout, and the page says the free edition works in Nexter Blocks free and with Nexter Blocks Pro. The setup also needs two sets of prices ready, one for each billing period. That matters because the block shows one pane at a time, so the monthly and yearly content has to be prepared separately before you publish. **Q: How do I make a monthly and yearly pricing table with a switcher block?** A: The layout is built by placing the Switcher block where the pricing section should go, then setting the labels to Monthly and Yearly. Put the monthly pricing tables in the first pane and the yearly pricing tables in the second pane. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter enables this toggle pricing table WordPress pattern with one set visible at a time. **Q: Why should the monthly prices go in the first pane?** A: Monthly shows first on load, so pane 1 is what visitors see before they click anything. That makes it the right place for the price you want seen first, usually the lower monthly figure. The practical benefit is simple: people do not have to switch just to see your default offer, which keeps the pricing section easier to read. **Q: Does a switcher pricing table work without Pro?** A: The panes and the toggle work in the free plugin. The page says both content panes rendered with their text and the toggle switched between them exactly as under Pro when Pro was deactivated. That means the core monthly and yearly switch is available without relying on Pro for this specific layout. **Q: Why does my yearly price section show up empty?** A: Each pane is filled separately, so an empty yearly side usually means only the first pane has content. The second pane needs its own tables and text because nothing is copied over automatically. That separation is useful when prices differ by billing period, but it also means both sides must be edited independently. **Q: How do I add a discount badge on the yearly side of a toggle pricing table?** A: Put it inside the second pane like any other content. Each pane holds ordinary blocks, so a discount badge can sit alongside the yearly tables instead of being treated as a special setting. That keeps promotional copy tied to the yearly offer without affecting the monthly side.