Create Pricing Tables With The Gutenberg Block Editor

In more than a year we have seen a great evolution in the Gutenberg block editor. Compared to the classic WordPress editor, we can now design elements in our posts and pages that before could only be done by coding.

For example, with the classic editor, the easiest way to show a table in a post was to create create said table in a spreadsheet, export it as an image, and then insert it into the post where you wanted to show it. But one of the blocks that we now find in the new WordPress editor is the table block. Let’s see how we create a table with Gutenberg and to what extent we could create a price table with this same block.

The Table Block

Creating a table is as easy as adding a new Table block in which we indicate the number of rows and columns we want and their alignment.

In a Table block, we can customize the following properties:

We can also indicate in each cell the alignment of the text and whether the font is bold or italic, and add links. In addition, we can modify the table at any time by adding or removing rows and/or columns.

In this way, we see that we can easily create the following table:

This is much simpler and faster than what we could do with the classic editor. And the result obtained can surely serve to show a table of data.

Table Block Limitations

Although it has been very easy for us to create the previous table, we encountered quite a few limitations. On the one hand, the tables that you design with the Table type block in Gutenberg are not responsive. That is, the table doesn’t break but becomes smaller without being able to show the different elements of the table by columns:

A table that fully adapts to the devices shows the elements of the table by breaking the table into columns, so that all cells are displayed much better.

In addition to the (in)ability to adapt to devices, as you may have noticed, in a table block we cannot easily change the font type and size, colors, etc. in each cell. That is to say, due to all its limitations, the Gutenberg table block is not useful to create an attractive price table for your products.

How can we create these responsive tables?

Nelio A/B Testing

Native Tests for WordPress

Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.

More Info

Alternatives

The Columns Block

An alternative would be to try to lay out the table with the column block:

The advantage of the column block, compared to the Table block, is that it is fully responsive, and on a mobile screen we will see that each of the plans is displayed behind the other.

We see that the columns are fully responsive. And surely the columns, to show little information and without too many complications, are an alternative to consider.

Price Table Block Plugins

My recommendation if you have to create attractive price tables is that you install some of the plugins that include blocks for this. They may not allow you, without touching code, any kind of customization, but in many cases you can get very elegant results. Let’s look at some examples fully integrated with the Gutenberg block editor.

CoBlocks

Coblocks is a plugin that includes a whole set of blocks totally adapted to Gutenberg. One of them is the Price Table block.

It’s very simple and easy to use and, with no coding, you can customize the number of columns and some aspects related to typography, as well as the colors of the columns and text. You quickly have a fully responsive price table like the one shown in the following image.

Getwid

Similarly, the Getwid plugin also includes a whole set of blocks fully compatible with the Gutenberg editor. Quickly, you can easily build a fully responsive price table like this one:

In this case, you can customize the fonts and the background and text colors.

Premium Blocks for Gutenberg

The Premium Blocs for Gutenberg plugin also includes blocks with which you can create very attractive price tables. Below I show you a price table image that I created with the Pricing Table block inserted in columns.

This block allows you to customize colors, fonts, the type of buttons, if you want to include an icon, properties of how to display the price, features, and description, among others. As you can see, it allows you very complete customization.

Plugins With Built-in Editors

Alternatively, you’ll find other types of plugins that include a built-in pricing table editor that integrates into your WordPress dashboard and with which you can create very complete and customized tables. Once the desired table is built, this table can be included in any page or post by using a shortcode. Let’s see some examples:

Responsive Pricing Table

Responsive Pricing Table is a plugin that adds a new editor to your WordPress so you can create price tables. You can add a large number of plans and customize each of them.

For each plan, you can add the name, subtitle, description, and price. You can also add a list of features, customize the purchase button and change the color scheme of the plan.

Once the plan is created, you just have to add it using a shortcode on the pricing page.

Pricing Table by Supsystic

The Supsystic Pricing Table plugin adds a drag-and-drop editor to your WordPress dashboard with which you can build tables. It offers you a lot of responsive table designs. In the free version, you have up to 7 designs available.

After selecting the desired table design, you have an editor that allows you to modify the number of columns and customize a lot of features of each of the plans shown. And you can also change the layout at any time. Finally, as before, the table can be included in any page or post with a shortcode.

Other free plugins that integrate price table editors are:

• Pricing Table by ARPrice
• Pricing Tables WordPress Plugin – Easy Pricing Tables by Fatcat Apps
• Responsive Pricing Table Builder – wpPricing Builder
• WRC Pricing Tables
• Pricing Table Builder – AP Pricing Tables Lite
• TC Pricing Table by themesCode
• Pricing Table – bh A WP Life

Conclusion

As you see, in WordPress you have a wide variety of alternatives to build price tables at no extra cost and without having to code directly. So it’s just a matter of choosing the option that best suits your needs.

Remember that the page where you show the prices of your products ends up being the most critical to get customers. So, the time you spend making it attractive will not be in vain. And to inspire you, you can take a look at the design of the price table of our Nelio A/B Testing product, which is the one that stands out as a featured image of this post ?.