How to Create a Pricing Table in WordPress: 2 Methods

Pricing tables are a fundamental element of any service or product website!

However, WordPress doesn’t have a built-in pricing table block. This means you will need either a plugin like RioVizual or custom code.

RioVizual is a free plugin that has a pricing table block for any type of pricing table creation.

In this article, we will show you how to create pricing table in WordPress using the Pricing Table block.

Our Created Pricing Table Preview

Here is a preview of the pricing table we created using RioVizual’s Pricing Table block:

Required Setup

• Latest version of WordPress is installed.
• RioVizual is installed and activated.

Method 1: Creating a Pricing Table from Scratch

After activating the RioVizual plugin, it’s time to create a pricing table using its Pricing Table block:

Step 1: Insert “Pricing Table” Block

Open a new page or any existing post where you want to add your pricing table. For this example, we created a pricing table on a new page:

• Click on the + button to open the block inserter.
• Search for “Pricing Table” block and insert it.
• After that, select “ Build From Scratch.”

Step 2: Add Necessary Content in the Table

After inserting the block, you will see a pricing table populated with pre-filled content. We replaced the existing content with our own.

Here is how we did it:

• Add a New Column: For our design requirement, we need 3 columns. Here is how to add a new column

• In the block settings’ “General” tab, navigate to Layout Settings > Columns in a Row and set it to 3. 

• Then, in the pricing table, duplicate a column by using the “Duplicate Column” option.

• Add Title: Click on the pricing table’s title and then change the title to reflect your specific offering.

• Add Price: Click on the price of each column and input your pricing for each plan. Then add a pricing period ( “/per user”) going to General tab > Content > Period. Click on each pricing plan one by one to specify the period for each. 

• Add Features: To add each pricing plan’s features, click on the feature list in the pricing table. Then, go to the General tab > Content and make the following changes:

• List Style Type: None
• Next use on “Duplicate” option to create two more features

• Then click on each feature and edit their text one by one

After adding features for the first plan, repeat this process for the remaining two plans. We changed all the plans feature list:

• Add Button: Simply click on each price plan’s button and change the text based on your needs.

Step 3: Customize and Style the Pricing Table 

To customize each element, cell, and column of your pricing table, you will find styling options in the “Style” tab. Within the style tab, you will see two sub-tabs for each element: global and custom.

We used the global tab for styling to maintain consistency across the entire table. To do the same, click on “Global Settings” from the pricing table’s top right corner and follow the following steps:

3.1: Customize Title: 

Go to Style tab > Title and then make these changes in the Title Style:

• Title Style:
  • Color: 000000
  • Typography: Family (Inter), Weight (600) and Font Size (18px)

• Wrapper Style: Alignment (left align)

3.2: Customize Price:

Next, click on “Price” in the “Style” tab to style the pricing table’s price elements. Here are the changes we made:

• Price Style:
  • Color: 000000
  • Typography: Family (IBM Plex Serif), Weight (600) and Font Size (32px)

• Period Style:
  • Color: 7A7A7A
  • Typography: Family (Inter), Font Size (12), Line Height (20px), Transform (capitalized case), Alignment (bottom)

• Wrapper Style:
  • Border: Bottom border, Border Width (1px), Border Color (000000)
  • Spacing: Padding (Bottom 26px), Margin (Top 10px)
  • Alignment: Left align

3.3: Customize Features

After customizing the price element, click on “Features” to customize the feature list:

• Item Gap: 8
• Typography:
  • Family: Inter
  • Weight: 400
  • Font Size: 15
  • Line Height: 24
  • Letter Spacing: 0.2
• Spacing: Bottom (Margin 10px)
• Alignment: Left align

3.4: Customize Button

Next in the “Style” tab, click on “Button” and then make the following changes in the “Button Style”

• Color: FFFFFF
• Background Color: 000000
• Typography:
  • Family: Inter
  • Weight: 400
  • Font Size: 14
  • Line Height: 24
  • Letter Spacing: 0.5
• Border: Border Radius top, right, button and left (35px)
• Sizing: Width (100%)

3.5: Customize Pricing Table Column

In the “Style” tab, click on “Column” and then make changes in the “Column Style”

• Border: 
  • Border Radius: Top, right, bottom, and left (24)
  • Border Style: None
• Spacing: Top, right, button and left (16px)

3.6: Customize Individual Column’s Background Color:

For our pricing table, we added three different plans and will now apply distinct background colors for each one.

To do that, first select the column and then navigate to Style tab > Column >  Column Style > Background and then change the color:

• Background: E5E1F8

After that, select rest two remaining columns individually and apply the following colors to them:

• For Second Column: C9EEF7
• For Third Column: F9F0E1

3.7: Add Hover Effect to Buttons

It’s time to add the hover effect and we added three different hover colors for 3 plans buttons. Here is how to do it:

• Click on the button you want to add the hover effect and go to Style tab > Button 
• Next, click on “Hover.” (You will find it in the top right corner)

• Again click on Background and add a background color
  • Background Color: 796CB5

Repeat these steps for the remaining buttons. We used the following hover colors:

• For Second Column: 6095A1
• For Third Column: C7AA77

Step 4: Preview and Publish the Pricing Table

If you have followed all the steps provided above, your table should be ready by now. Now simply preview and then publish the table.

Here is the final version of pricing table we created using RioVizual’s Pricing Table block:

Method 2: Creating Pricing Table Using a Premade Template

Does the first method look tough? In that case, you will be happy to know that you can create the same table we created above within a minute using the Pricing Table block’s premade templates.

Here is how to do it:

Step 1: Choose and Insert a Template

• Open the page/post where you want to add a pricing table. 
• Next, insert the “Pricing Table” block and browse through the available templates. 
• Select your desired template and click the “Import” button to add it to your page.

Step 2: Customize and Style the Pricing Table

Simply click on each element in the table to change its content. For example, click on title to change the title and follow the same for pricing, feature and button element.

Step 3: Publish or Update the Post/Page

Once you made all the customizations, click Publish to make your pricing table live.

Note: Learn more about this Pricing Table block’s settings, customizations, and design options in detail from its documentation.

Conclusion

Now you know how to create pricing table in WordPress using the RioVizual’s Pricing Table block. It’s a feature-rich block with extensive styling options, flexible row and column management, and much more.

The best part is that this block includes 19 pre-designed templates that lets you create professional-looking pricing tables in no time.

Get the RioVizual plugin today and start creating stunning pricing tables for your WordPress website.