Creating a pricing table is a must if you want to sell your products and services through your website. But to display multiple pricing plans that customers can compare easily without leaving the page, you must add the toggle feature to the table.
The toggle feature allows users to navigate or switch between different sets of pricing options, creating an interactive interface. For example, users can toggle between monthly, yearly, and lifetime subscription plans.
In this blog post, we’ll show you a step-by-step guide on how to create a WordPress table with toggle. Let’s begin.
Create Beautiful Tables
With Block Editor
How to Create a WordPress Pricing Table with Toggle
Before diving into the tutorial, you must have TableBerg and Ultimate Blocks plugins installed on your site. With TableBerg, you can create a pricing table, and Ultimate Blocks will let you add the toggle feature to the table.
Once you have the plugins installed on your site, jump into the tutorial process.
Step 01: Add the Tabbed Content Block
Once the Ultimate Blocks plugin is installed and activated, you’ll get the Tabbed Content in the block library. Find and add the block to the editor.
The Tabbed Content block will be added to the editor instantly.
Step 02: Add the TableBerg Block Inside the Tabbed Content Block
The Tabbed Content block will let you add other blocks within it. Click the plus (+) button. Find the TableBerg block and add it.
Step 03: Create a Pricing Table in the First Tab
Define the number of rows and columns for your table. We are selecting 3*3 as we want to create a three-column table.
You can see the table layout is ready.
Step 04: Add Content to the Table
The TableBerg block allows you to add various types of content to its cells. You can add texts, lists, images, CTA buttons, and more.
# Add Column Titles
First, we need to add titles to the columns of the table. We’ll create a pricing table for an imaginary plugin here. So, our content will be accordingly.
You can see we have added three titles, aligned them centrally, and increased their size.
# Add Pricing Plans
Next, add pricing plans to the columns. We have colored them using the Highlight option on the Gutenberg toolbar.
# List Product Features
It’s now time to list the features of each plan. TableBerg allows you to add the List block to the table. Find and add the List block to the table.
You can see that we have listed all the features of each plan in all columns.
# Add CTA Buttons
Finally, start adding CTA buttons to the columns using the Button block.
The CTA buttons are ready on the pricing table.
So, your table is ready. You can further customize and stylize the table as you want. Hope you can do it alone.
Step 05: Create a New Table on Another Tab
Create a new tab by clicking the plus (+) icon. Don’t forget to rename the tabs to your preferences.
Create a new table in this tab in the same way we described above. We have centrally aligned the tab titles for better visualization.
So, your pricing table with the toggle feature is ready. Preview the table in a new tab to see if everything is working fine.
Conclusion
Creating pricing tables with the toggle feature is now a smartness followed by almost all standard-class websites. Most websites create them using page builders and similar types of solutions, which often make the page heavy.
However, as TableBerg and Ultimate Blocks are two block-based plugins, they will never make pricing pages heavy. You can even test them on your staging sites or local host. You will enjoy lightweight and quick speed.
Let us know your feedback in the comment box below. Besides, don’t hesitate to ask us if you have any questions.
