How to Create a Pricing Table in WordPress

A pricing table is a well-structured representation of products and services along with their corresponding prices and features. It allows customers to compare different pricing plans and choose the one that suits them.

The default WordPress table lacks many advanced features. You cannot create comprehensive price tables with it. You need a table builder plugin like TableBerg to create stunning pricing tables.

You can create conversion-centric pricing tables even with its free version. In this article, we’ll show you how to create a pricing table in WordPress using the TableBerg plugin.

美しいテーブルを作る
ブロックエディター付き

ステップ01: TableBergプラグインのインストールと有効化

こちらへ プラグイン > 新規プラグインの追加. Type テーブルバーグ in the search box. インストール そして アクティブ化 the plugin after it appears below.

TableBergプラグインをインストールして有効化する

Step 02: Add the TableBerg Block to Your Post or Page

Open the post or page where you want to create the pricing table. Add the テーブルバーグ・ブロック to the editor.

Set its row and column number. However, you can increase or decrease the number of rows and columns after creating the table as needed. But for now, we are selecting a 4*4 row and column.

行番号と列番号を設定する

As you add lots of content, you may need more space within the table cells. So, it’s better if you increase the table width. Select the entire table by clicking the TableBerg icon three times on the toolbar.

You’ll get the 設定タブ appearing on the right sidebar. Under the settings table, you’ll find the Table Width option. Increase its width as you need.

Increase the table width

Step 03: Add Titles to the Table Columns

Add suitable titles to the table columns. Suppose we’ll create a pricing table for a web hosting business. There are four pricing plans in the table. So, the column title will be Economy, Deluxe, Ultimate, そして Maximum.

You can customize the title text and its background color from the respective tab on the right sidebar. You can also increase the text typography and its size.

Add titles to the pricing table columns

Step 04: Add Prices and Discount Rates to the Pricing Table Columns

First, add the prices of the plans to their respective columns. We have made the price texts bold, a bit bigger, and colorized with blue.

Add prices to the pricing table

The discount rate usually sits very close to the main price. Place your cursor on the pricing cell and create space below them, pressing the Enter button on your keyboard.

After that, type your desired discount rates in the respective columns.

Add discount rates

We will now highlight the discount rate so it becomes more visible. Select the discount rate text area with your cursor. Click the More option on the toolbar. Choose the Highlight option.

Select the discount rate text in the pricing table

Use a background highlighter to the discount rate text. We have applied the color code #fcdc4b in the background of the discount rate on the pricing table.

Use a background highlighter to the discount rate text

Apply the same process to each column in respective areas.

Use a background highlighter to all the discount text

If there are any special notes for the plans, you must specify them within the pricing area. See, we’ve done it using the first bracket sign.

Add special notes to the pricing plans

Step 05: Add CTA Buttons to the Table

By adding CTA buttons, you cannot provoke users to buy your products. Select the cell to which you want to add the CTA button. Press the プラス(+)アイコン on the cell and select the CTA button.

Add the button block to the TableBerg tables

We’re not covering this part in full detail. All you have to do here is write a compelling CTA copy for each button. Link buttons to the checkout page. Add background and text colors for the buttons.

Customize the CTA buttons

Step 06: Add Features to the Pricing Table

Finally, you need to list all the features of your products and services based on their pricing plans. If there are any special words that you want to highlight, you can bold them.

List features to the pricing tables

Step 07: Preview the Pricing Table

Before you publish the pricing table, it’s better if you see it in the preview mode to check if there is any mistake. If the table is totally clean, you can make it live.

Preview the Pricing Table

結論

Thus, you can create informative pricing tables on your site that help customers make informed decisions. TableBerg is coming up with more new features by which you can create more advanced tables on your site.

If you love this post, comment below and let us know your feedback. Take a look at ワードプレスで比較表を作成する方法.



テーブルバーグ・チーム

早割キャンペーン実施中
これは通知バーのデフォルトテキストです。