How to Create Comparison Table with Elementor Comparison Table Widget

A comparison table provides an impressive way to display multiple products side-by-side, highlighting their key features, images, specifications, prices, and more. It clearly presents this information in an organized way that helps customers make informed decisions with confidence.

If your site is built with Elementor, you might be looking for ways to create your comparison table with it. But unfortunately, Elementor doesn’t have a readymade comparison table-making option. But no worries, HappyAddons has an interesting Comparison Table widget to overcome this limitation.

If you don’t know yet, HappyAddons is a popular Elementor. It has 130+ widgets and dozens of features to further power up your site. This article will show you how to create a product comparison table with the Elementor comparison table widget using HappyAddons.

Why Product Comparison Tables are Important for Business Sites

A product comparison table provides a structured format for your customers, users, and visitors to research their product information to decide which one to buy. This can save them a huge amount of time, quickening the decision-making process.

Transparent and comprehensive product comparisons build trust with customers. This demonstrates that businesses have nothing to hide and are confident in their offerings. Below is an example of such a product comparison table.

It is mainly used in eCommerce websites to share different products models, images, features, pricing, description, etc. However, website owners also use a comparison table to prove their product is the best product by comparing their competitor products under the same table.

It helps customers to find the pros & cons of a product in a glimpse. Using this effective comparison table data, customers can select the right product in minutes and save valuable time.

How HappyAddons Helps to Create Product Comparison Table

Indeed, you can create a table with the default Gutenberg table block. But the block lacks many advanced features required to create a captivating table. Such as you can’t add any image, CTA button, bullet list, etc., to the default table.

And in this case, you must use a third-party plugin, which has the ability to overcome these limitations. If your site is already designed with Elementor, why should you look for a Gutenberg plugin? HappyAddons Comparison Table widget is ready to overcome all these limitations.

Plus, this Elementor comparison table widget is completely free. You can use it with the HappyAddons lite version. Let’s see how this widget can benefit you.

• Mobile friendly
• Covers a large library of pre-made template
• Add images in a column
• A wide range of support icons
• Offer readymade table designs

How to Create a Comparison Table with the Elementor Comparison Table Widget

It’s now the tutorial time. But before you start the tutorial, make sure you have the following plugins installed on your site.

• Elementor (Free)
• Happy Addons (Free)

Once these plugins are installed and activated, open your desired post or page with Elementor and start following the below steps. You may follow this process from this YouTube tutorial as well.

What we have covered in this video has been explained in the below discussion as well. Keep reading!

Step 1: Add Comparison Table Widget

Type Comparison Table in the search box on the Elementor panel. Once it appears, drag and drop it to your selected Elementor canvas area.

Comparison Table Content Area

After adding the widget, you get the default table design like the image below. The content area has the necessary settings to manage the table content.

Here you’ll get.

• Table Head
• Table Row
• Table Button
• Table Settings

Now, we’ll cover each of the settings so that you can easily manage the table content.

Step 2: Manage Table Head

The Table Head option allows you to add the head item of the table by clicking the ADD ITEM button. You are able to Copy and Remove an item. Also, you can easily set the Alignment (left, center & right) and Icon Position (left & right) of the entire table head content.

Customize Table Head Items

To customize the Table Head individual item, you need to open an item first. Then you can add the Title, select Title HTML Tag set Content Width, insert an Icon, set the Icon Color, and write a Description.

The entire Column Width is defined as 100%. Here, you notice that we’ve set the Column Width 60 (%). That means the feature column gets 60% space and the other two columns get 20% space.

You can also write a Description. First, you switch on the Description option. Then you’ll get the text editor to write the description. We don’t need to add the description that’s why we didn’t enable it.

Add a Sticky Header

If you want to add the Sticky Header, you need to activate the Sticky Header option first. Then your table header will display on the top whenever you scroll down.

Step 3: Manage Table Row

By default, the widget comes with two Rows with Columns. You can add a new row and insert the required columns in it.

For customizing the row and column content, you need to open a row or a column and then change the content based on your purposes.

Add a New Table Row

To add a new Table Row, you need to click on the ADD ITEM first.

After that, you’ll get the option to insert a Row. You have to choose the Row instead of a Column and set the Content Type->Blank as it’s a row. It’s not necessary to change the Image Size so keep it default.

However, you are able to add three types of content in the column Heading, Icon, and Image.

Add a Column with Heading

Let’s show you how to add a column in a row.

First, you need to add an item by simply clicking the ADD ITEM button. Second, select the Column (Row/Column) and set Content Type > Heading. Finally, you can write the Title of the heading.

Write the Description

You are able to write a description under the Title. First, Show the Description option. Then you’ll get the text editor panel and you can write the description in your own way.

We’ve also added two columns. And this time we’ve used the Content Type > Icon. Here is the current table view.

Note: Remember whenever you add content into a column the content will display from Right to Left.

Step 4: Manage Table Button

Go to the Content > Table Button area then you can write the Title and insert a Link to the button.

Customize Button

You are able to add the Custom Style to decorate the button. Active the Custom Style first. Then you’ll get the essential settings to add a new button style.

You add the Text Color, Background Color, and Box Shadow to the button. You also can add different styles on the button Hover.

Step 5: Table Settings

The Table Settings area gives you the option to set the Table Width according to your devices. In the Tablet and Mobile view, the table items will be scrollable. That way, you’ll control the table’s responsiveness.

Step 6: Style Comparison Table

The Style area has the necessary styling options to customize the Table Head, Table Row, and Table Button.

Using this widget, you can design this type of Elementor comparison table to compare your product side-by-side.

Final Output of Your Product Comparison Table

After designing all the parts of your comparison table you’ll get a perfect look to showcase your products in an attractive way including features, images, and other elements. Below is the table we’ve created today-

Use different style options to make a design that aligns with your brand. You can also check the full documentation of the Comparison Table widget.

FAQ on How to Create Comparison Table with Elementor Comparison Table Widget

Hope you are satisfied with the tutorial. We’ll now answer some frequently found questions online around the Elementor comparison table in this section.

Ready To Create Comparison Tables with Elementor?

An interactive comparison table gives your users a better view while comparing the products. Designing a comparison table using Elementor and HappyAddons is not difficult anymore if you follow the above steps.

In this guide, we’ve shown why you need to use the Happy Addons’ Comparison Table widget. Also, we’ve shown you how to create a comparison table on your WordPress site.

If you still have any queries regarding this blog, you can comment on us.

We request you to join our newsletter. Don’t forget to connect our social channels Facebook, Twitter, and YouTube.