How to Create a Pricing Table With Toggle Switch in WordPress

Offering flexible and clear pricing options is very important for any website aiming to convert visitors into customers. A pricing table that comes with a toggle switch is an excellent tool for this purpose, enabling visitors to switch between billing periods or different plans effortlessly. 

This functionality not only makes it easier for visitors to understand your pricing structure but also enhances their overall experience on your WordPress website. If you don’t know how to implement a pricing table with the toggle switch, then don’t worry. 

In this post, I am going to show you the full process of creating a pricing table with the toggle switch in WordPress. Afterward, you will be able to create one on your own. 

Let’s start.

Creating a Pricing Table With Toggle Switch in WordPress

To create one, you’re going to need to install the Ultimate Blocks plugin. It comes with tabbed content and other awesome blocks that elevate your way of building content. The pricing table can be created with or without a plugin. If you want to go the easy way, then it is recommended to use a plugin. The plugin will help you to create and customize better.

Here, follow the steps and then try to create a pricing table with a toggle switch.

Step 1: Install Ultimate Blocks Plugin

From your dashboard, navigate to Plugins -> Add new Plugin and search for ‘Ultimate Blocks’. 

Click on the ‘Install Now’ button and install it. After the installation is complete, don’t forget to activate the plugin. 

Step 2: Add a Tabbed Content Block

Click on the ‘Add Block’ button and search for the ‘Tabbed Content’ block.

Add the block by clicking on it. 

Step 3: Add a Pricing Table

Now, it’s time to add a pricing table. Click on the add block button and search columns block. 

Insert the block by clicking on it. 

Depending on your pricing table size, select the number of columns.

Here, I am choosing 33/33/33. Therefore, it will be three columns. 

Then click on the ‘Add block’ button inside the column and create your pricing table.

Create the pricing table using the Heading, paragraph, spacer, button, and other necessary blocks.  

When you have created one pricing option, copy the whole column block to the next column. Or you can duplicate the block from the toolbar. 

If you use the duplicate option then delete the previous columns, as those are empty. In this way create ncessary number of columns. 

Now, change the content of the other columns. Finally, if you want to customize it further, you can make the middle column of different color.

Finally, you will have a pricing table like the one below.

Step 4: Add Pricing Table to Other Tabs

Now copy the whole column block. 

Now, create a tab by clicking on the ‘new tab’ button. 

Paste the column block that you have copied earlier. Then, change the content. In this way, create as many tabs as you require. 

Finally, you will find something like this below. 

Creating a Pricing Table With a Plugin

You can also create a pricing table using a plugin that will do the hard work for you. It comes with lots of customization options. 

All you have to do is install the WP Table Builder plugin. Then click on the Add New button and add a new table.

Provide a table name and click on any readymade template. When you hit the generate button, your table will be ready. 

Customize the table as you like.

When you are done customizing, click on the “Save Table” button at the top right corner. 

In this way, you can create as many pricing tables as you want. 

Then click on the cross button or navigate to WP Table Builder -> All Tables. 

Copy the shortcode.

Open the page/post and insert the ‘tabbed content block’. 

Insert the tabbed content, click on the ‘add block’ button, and search for shortcode block. 

Insert the block by clicking on it. Paste the shortcode that you copied earlier inside the shortcode block. 

If you want more pricing tables to other tabs, create a tab by clicking on the ‘new tab’ button. 

Insert the shortcode block and insert another pricing table shortcode that you created in WP Table Builder. Hit the save/update button. 

Finally, you will see the result below. 

To see a more detailed post about creating a pricing table, you may see this post ‘How to Create a Pricing Table in WordPress (With/out a Plugin)‘.

Final Words

Incorporating a toggle switch in your pricing table can significantly enhance your presentation of pricing plans. This is a very simple yet effective feature that allows users to effortlessly compare different options. 

If you liked this post, then please share it with your friends, and don’t forget to leave your thoughts in the comment box below. Happy building!