1. Home
  2. Docs
  3. Happy Elementor Addons Fr...
  4. Widgets
  5. Comparison Table​

Comparison Table​

Do you want to add a comparison table to your Elementor powered website to compare your product? Take a look at Happy Addons’ new free Comparison Table widget. From now, you can efficiently design and customize a responsive table for product comparison.

How To Use Happy Addons’ Comparison Table Widget


To use that amazing widget, you need to install and active the following plugins to your website:

  • Elementor (Free)
  • Happy Addons (Free)

Let’s get started:

Step 1: Find & Add Comparison Table Widget

First, find the widget from the Elementor left sidebar menu. Then select the widget and drag it to the suitable area of your page.

Add Comparison Table Widget

Step 2: Add Comparison Table Content

In the content section, you’ll get the Content options so that you can add content into the comparison table. The options are.

  • Table Head
  • Table Row
  • Table Button
  • Table Settings
Content Comparison Table

Table Head

In the Content–>Table Head, you can add the table head item by clicking the Add Item button. You can easily copy and remove an item from here. You are able to set the Alignment and Icon Position of the head content.

Manage Table Head Content
Add Sticky Header

Also, you can activate the Sticky Header option to display the header on the top of the table whenever you scroll down.

How To Add Sticky Header
Manage Table Head Items

If you want to add content to an individual item, you need to open an item first. After that, you can add a Title, manage Content Width, add Icon, and set the Icon Color according to your need.

Add Table Head Single Item

Note: The default entire Column Width is defined 100%. As we’ve added three Columns we’ve set the first Column Width 60%. And the other two Column Width is set at 20%. You can also use the Pixel (PX) for setting the table Column Width.

Set Column Width

Table Row

To customize the Table Row, you need to open the table row first. Here, you see by default we’ve added two rows with columns.

Content Table Row
Add a Table Row

Let’s create a row and add a couple of columns to it. To do this first click the Add Item. Then you’ll get the option for adding a row. Here, you select the Row instead of a Column and set the Content Type blank as it’s a row. And you don’t need to change the Image Size so keep it default.

You can add three types of content in the column like Heading, Icon, and Image.

Add Table Row
Add Column with Heading

Now, it’s time to add a Column into the Row. For doing this, you need to add an Item first. Then select the Column and set Content Type–> Heading. Finally, write the Title of the heading.

Add Column with Heading
Add Column with Icon

You can also add an Icon to the column and set a unique color on it.

Add Column with Icon
Add Column with Image

Similarly, we’ve also created another Column. Now we’ve set the Content Type–>Image and added an image to the column.

Add Column with image

We also added another column with an image.

Note: When you add content to a column then the content will display from Right to Left.

Table Button

If you want to customize the Table Button content, you should go to the Content–>Table Button area. Here, you can add the Title and insert a Link to the button.

Content Table Button

Table Settings

In the Content–>Table Settings, you can manage the Table Width.

Content Table Settings

Step 3: Style Comparison Table

You’ll get all the necessary settings in the Style area to customize the table Head, Row, and Button.

Style Comparison Table

Style Table Head

To style the Table Head section, you need to go to the Style–>Table Head area. Here, you can change the Padding, Border Radius, Border Type, and Background Type of the table header. You are able to set the TitleTypography and Color.

You can also change the Icon’s Spacing, Size, and Color in this area. Before changing the Icon Color, you should read the below note.

Note: If you’ve added Custom Style then Icon Color will be overwritten for that cell.

Style Table Head

Style Table Row

You can easily customize the Table Row default style using the Table Row style options. You can change the Row Padding, Border Type, Background Color (Even), Background Color (Odd), Color (Even), and Color.

Also, customize the Title–>Typography, Image Width & Height, and Icon’s Spacing, Size, and Color.

Note: If you’ve added Custom Style then Background Color, Color, Icon Size, and Icon Color will be overwritten for that cell.

Style Table Row

Style Table Button

According to your need, you can change the ButtonTypography, Border Radius, Padding, Border Type, Text Color, Background Color, and Box Shadow.

Style Table Button

Step 4: Advanced Settings

If you want to add motion effects, happy effectsbackground, or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor.

Addvanced Options

Give a read to this Document to know more about advanced features & functions.

Final Preview

Using this exclusive widget, you can easily create this type of comparison table.

Comparison Table Demo

You can check out this handy video tutorial to learn how to use this widget.

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

Here is an example of a product page with a comparison table.

Product Page with Comparison Table

Feature Enhancement of Comparison Table (Version 3.4.4)

Happy Addons’ version (3.4.4) comes with some enhancements to its Comparison Table widget. Here is the list of Comparison Table widget enhancements.

  • Add Title HTML Tag in the Table Head section
  • Write Description in Table Head/Column area
  • Customize button with new Custom Style option

Let’s see how these features work:

Title HTML Tag

In the Table Head area, you can set the heading HTML tag to the individual item. To do this, open an item first. Then you need to select the required HTML using the Title HTML Tag option.

You are able to write a description under the heading items. Enable the Description option. After that, you’ll get a text editor for writing your description.

Manage Title HTML Tag

Write Description To Table Column

Go to Table Row first. Then click an individual table column and enable the Description option. And write a suitable description using the text editor.

Add Description To Table Column

Add Custom Style to the Table Button

Now, you are able to design your custom button using the Custom Style option. Active the Custom Style first. Then you can add Text Color, Background Color, and Box Shadow to your button. Also, you can set the different button styles on the Hover mood.

Add Description To Table Column

That’s it.

How can we help?