How to Create a WordPress Pricing Table with Toggle

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 directly from the 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.

Add the Tabbed Content Block

The Tabbed Content block will be added to the editor instantly.

Tabbed Block added to the editor

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.

Define rows and columns for your table

You can see the table layout is ready.

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.

Add Pricing Plans

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

Display product features

# Add CTA Buttons

Finally, start adding CTA buttons to the columns using the Button block.

Add CTA Buttons

The CTA buttons are ready on the pricing table.

CTA buttons 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 tab with the Tabbed Content block

Create a new table in this tab in the same way we described above. We have centrally aligned the tab titles for better visualization.

Create a new table in a new tab

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Early Bird Offer Is Live Now!
This is default text for notification bar