Creating Comparison Table in Elementor

Introduction

At times in most of the E-Commerce sites, you must have come across a table that compares related product features. However, using a comparison table to compare different products on your page helps in better decision-making. 

So, if you are looking for an easy solution to create a comparison between the number of items then EAE- Comparison Table is what you need.

Using the EAE – Comparison Table feature of our plugin Elementor Addon Elements serves many purposes. Like, compare products, sales, display schedules, and a lot more things. 

Step 1: Install & Activate Plugin

In order to use EAE – Comparison Table Widget, you have to first install and activate Elementor Addon Elements Plugin. 

Step 2: Add EAE – Comparison Table widget

To create a comparison table with Elementor, open the Elementor editor. Then just drag and drop the EAE- Comparison Table widget.

Step 3: Content Tab Customization

General Section: In this section, you have to specify the number of tables you want to display for comparison.

Feature Box: Here you have to give heading to the feature box and then add feature items based on which you want to make a comparison. Enable the Tooltip option to display some additional information to be displayed with the items.

Customizing Individual Table: This section gives you various setting options to customize the table content. Here you can also give the title to the table header. Modify the currency symbol and set the price of a package accordingly.

You can also use the toggle to enable or disable the discount option. If you enable this option, you can set the discounted price of the package accordingly.   

To display, a small slant highlighted text in the header enable the ribbon option. After enabling it, you will see a drop-down menu to change the ribbon style and the title of the ribbon.

You can modify the name and assign a link to the Call To Action button. After that add different features of the package.

Step 4: Style Tab Customization

After you are done with setting up the layout of the table, you can now style your table by clicking on the Style tab.

Therefore, under the General section, you can give a different background color to the odd and even rows. Add a border to the table from the border style option.

Similarly, there are more styling options available to style each individual section, like Feature Box, Ribbon, Heading, Price, Features, and Button section.  

Live Demo

Check out the Demo setup for Comparison Table widget.