How To Create Comparison Table in Elementor

How To Create A Product Comparison Table in WordPress

A comparison table gives users quick details about similar or different products by showing them side-by-side. It helps customers in decision-making as well as enhances the customer experience on your site.

However, it might be a little bit tricky if you want to add custom features to your comparison table. Fortunately, Elementor makes the process easier by offering a wide range of helpful addons like Happy Addons. With Happy Addons ‘Comparison Table‘ widget, you can easily display multiple products’ features in one frame.

In this tutorial blog, you are going to learn how to create a comparison table inside your WordPress site. Let’s start with the basic query-

Why is Product Comparison Important for Your Business Website

A comparison table refers to a table where you can display groups of data of multiple products or services side-by-side for a better undestanding.

Example of a comparison table
Example of a 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 are able to select the right product in minutes and save valuable time.

How Does Happy Addons Help to Create Product Comparison Table

Why Should You Use Happy Addons’ Comparison Table Widget

With the new Gutenberg block editor, you can create a table for your basic need. But, if you want to create a product comparison table for product comparison, you need a 3rd party plugin or write custom code for this feature. That consumes a lot of time and money because the free plugin comes with some initial features.

You can solve these types of barriers using Happy Addon’s new free widget called ‘Comparison Table‘. With this widget, you can efficiently create and customize responsive tables to compare your products side-by-side in a more organized way.

Let’s see why you need to use the Happy Addons widget:

Designing The Perfect Feature Comparison Table Inside WordPress

It’s time to show you how to use the Happy Addons’ Comparison Table widget and create an interactive product comparison table for your website.

Before that, you need to install and activate the following plugins in your WordPress website:

Watch: How to Design Your Comparison Table with Happy Elementor Addons

You can add the comparison table to any part of your website. But here, we’ll demonstrate the widget into a blank page.

You can also check this guide to learn how to create a new page on WordPress.

Here are the steps you need to follow to create the comparison table:

  • Step 1: Add Comparison Table Widget
  • Step 2: Manage Table Head
  • Step 3: Manage Table Row
  • Step 4: Manage Table Button
  • Step 5: Table Settings
  • Step 6: Style Comparison Table

Let’s get started:

Step 1: Add Comparison Table Widget

First, you need to find and add the widget into the suitable place of your website. You get the widget from the Elementor widget gallery area.

Add Comparison Table Widget

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
Content Comparison Table

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.

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.

Manage Table Head Single Item

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 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.

How To Add Sticky Header

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 & column content, you need to open a row or a column then change the content based on your purposes.

Content Table Row

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 like Heading, Icon, and Image.

Table Row Start

Add 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.

Add Column with 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.

Write Description

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

Column with Icon

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.

Content of Table 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.

Customize Table Content

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 responsiveness.

Table Settings

Step 6: Style Comparison Table

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

Style Comparison Table

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-

Product Page with Comparison Table

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

Ready To Create Comparison Tables On Your WordPress Site?

An interactive comparison table gives your users a better view while comparing the products. Designing a comparison table using Elementor & Happy Addons 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.

Subscribe to our newsletter

Get latest news & updates on Elementor

Share this post

Related Post

2 Responses

  1. The list is Great, well designed, and very creative thinking. I suggest a website where we can get more knowledge about web development, It helped me to succeed in my various projects.

    1. Thanks for your comment. We are always trying to help others with our content. And we’ll produce more effective content in the future so join our newsletter to get new tutorials regarding WordPress and Elementor.

Leave a Reply

Your email address will not be published.