---
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-08-22
author: "Aditya Sharma"
description: "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..."
image: https://nexterwp.com/wp-content/uploads/2024/05/toggle-pricing-table-switcher-1024x519.jpg
word_count: 535
---

# How to make a toggle switch pricing table with the Switcher block?

## Key Takeaways

- Nexter Blocks Switcher block supports two layout methods for pricing tables: Editor and Pattern, letting a monthly and yearly toggle sit on the same page.
- Editor method builds the monthly layout in Content 1 and the yearly layout in Content 2 directly inside the block editor, using Nexter Blocks Container and Pricing Table blocks.
- Pattern method saves two reusable layouts, such as “Monthly Pricing Table” and a yearly pattern, then assigns each one to a Switcher block state through Select Source set to Pattern.

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](/docs/switcher-block-settings-overview/).

**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

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-content-switcher/)

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.

![](https://nexterwp.com/wp-content/uploads/2023/02/switcher-select-editor-new.png)

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**.

![](https://nexterwp.com/wp-content/uploads/2023/02/switcher-create-pattern-editor-new.png)

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.

![](https://nexterwp.com/wp-content/uploads/2023/02/switcher-monthly-pricing-table-new.png)

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](https://nexterwp.com/docs/connect-carousel-remote-with-switcher/).

To add a dark mode toggle using the same Switcher block, see [How to Add a Dark Mode Switcher in WordPress](https://nexterwp.com/docs/add-dark-mode-switcher-wordpress/).