How To Create A Product Comparison Table In WordPress

How To Create A Product Comparison Table in WordPress

Product comparison tables can be seen everywhere when you’re shopping online. Whether it’s an eCommerce site or a blog, these comparison tables help you understand what the different products offer. 

It helps you make a more informed purchasing decision. If you’re running an affiliate blog, you know the importance of product comparison tables. 

With comparison tables, you can compare the different products on your page and get more affiliate commission. 

Creating a table to compare products nicely is quite simple and doesn’t take much of your time. But it’s important that the comparison table you create should be engaging to the reader. 

Your comparison table should incite some action to the user. Whether it’s purchasing a product or just clicking on the purchase link. 

In this article, I’ll show you how to create an awesome product comparison table in WordPress. 

Let’s get started. 

How To Create A Product Comparison Table Using WP Table Builder

We’ll be creating the following example table in this tutorial:

Example product comparison table

As you can see, this table has everything that comparison tables usually have. I’ll explain in detail each to help you create the exact table as shown above. 

And, the first step of this tutorial begins with installing a plugin. 

Step #1: Install WP Table Builder Plugin 

We’ll be using WP Table Builder Plugin to create a product comparison table. It’s a free drag-and-drop table builder.

This table is perfect for creating comparison tables and has a lot of options to customize your table. 

This table builder plugin has the following elements: 

  • Text
  • Image
  • Button
  • Star Rating
  • List

To install this plugin, go to your WordPress dashboard > Plugins. Click on ‘Add New’ and search for ‘WP Table Builder‘. Click install and activate to install the plugin on your website. 

WP Table Builder

Alternatively, you can download the plugin from the WordPress repository and upload it to your website. 

Step #2: Create A New Table

To create a new table in the WP Table Builder Plugin, you have to go to the Table Builder > Add New. 

Add a new table

You’ll see the table drag-and-drop builder as shown below: 

Drag and drop WordPress table builder

You can give a name to your table and set the number of rows and columns. Once you set the number of rows and columns you want to have in your table, click on the generate button. 

This will generate your table as shown below: 

Setting up your product comparison table layout

Step #3: Add Content To Your Table

It’s time to add content to your table. WP Table Builder lets you drag and drop elements to the cells of your tables. 

You can select the element from the left sidebar and drag them to your table. Here’s how my table looks after adding content: 

Adding content for comparison

I’ve used just the text, image, and button element to create the table. And it looks really clean and beautiful. 

But, I’m going to show you how you can make your table even more attractive using this plugin. 

Step #4: Make The Table Beautiful & Responsive

There are many ways you can make your table look gorgeous in WP Table Builder. This plugin has so many customization options to help you make your table more attractive and engaging. 

Here’s how to make your table beautiful in this plugin: 

Configure Table Border

WP Table Builder lets you add a border to your table. You can find this option in the table settings on the left. 

You can set the border size and change its color and you can also apply an inner border to your table. 

Adjust colors

Cell Padding

The cell padding option changes the padding of each cell of your table. You can change the padding of the cell and change the way your table looks. 

Adjust padding

Header Background 

You can also customize the background color of the header of your table. This adds a bit more style to your table. 

Adjust header bg

For this table, I’ve set the header background to white so that the logos blend well in the table. 

Even/Odd Row Background

Alternate colors for rows are very popular in product comparison tables and you can do this with the WP Table Builder plugin. 

Even/odd row bg

You can set the even and odd row background to create some contrast in your table. 

Now that your table looks beautiful, you also have to make sure it looks the same on mobile devices too. 

The good thing is, you don’t have to worry about doing a lot of leg work. All you need to do is to click on the ‘Make Table Responsive’ toggle. This will make your table look beautiful and engaging even on mobile devices. 

Make a responsive product comparison table

Lastly, also enable the ‘Top Row As Header’ option to set your top row as the header of the table. 

Your table is ready to go! 

Step #5: Insert The Table Via Shortcode

Now that your table is ready, you need to insert it into your content. You can do this easily by inserting the shortcode of the plugin. 

To find the shortcode of the table, click on the ‘Embed’ button at the top of the table builder. This will open a popup with the shortcode of the table. 

Insert comparison table via shortcode

Now, you can copy and paste this shortcode anywhere in your content. 

Another way to find the shortcode of the table is to go to the Table Builder > All Tables. Here, you’ll find all the tables you have created. 

All tables list

You can also copy the shortcode of the table right from this page. 

Conclusion

That’s how easy it is to create engaging product comparison tables in WordPress. With the WP Table Builder plugin, the whole process of creating a table is simplified and can be done in minutes. 

There are many customization options as well that let you customize the look and feel of the table you’re creating.

If you have any questions about this tutorial, please ask them in the comments section below. I’d be happy to help you out with your doubts and questions. 

Leave a Reply

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

[FREE GUIDE]
[FREE GUIDE]
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']