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.
Table of Contents
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.
Not being able to remove the Features column seems to be a serious limitation
This feature is not available. You can try the Data Table widget for this.
I see where you can change the background for secondary row under the feature box but how do you do this for the prices? In your demo, under each pricing the options for Storage, Support, and Security have a grey background while the others are white. I don’t see a setting for that anywhere.
Nevermind, I found it under General Settings.