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 Comparison Table is what you need.

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

Key Takeaways: What You’ll Learn

  • How to set up and customize a responsive comparison table
  • Ways to highlight pricing, discounts, and features
  • Styling tips to match your site’s brand
  • Real-world use cases for comparison tables

How to Create Comparison Table in Elementor

Step 1: Install & Activate Plugin

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

Step 2: Add Comparison Table widget

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

Add Comparison Table in Elementor
Add Comparison Table in Elementor

Step 3: Content Tab Customization

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

Comparison Table Elementor
Comparison Table Elementor General Settings

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.

Comparison Table Elementor Feature Box

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.

Comparison Table Elementor Settings
Comparison Table Elementor Settinggs

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.  

Comparison Table Elementor Style
Comparison Table Elementor Style

FAQs on Elementor Comparison Table

What is a Elementor comparison table used for?

A comparison table helps visitors compare products, services, or plans side-by-side to make informed choices.

How many items can I compare in one table?

There’s no hard limit—you can add as many columns or feature rows as needed.

What’s the difference between Comparison Table and Pricing Table?

Comparison tables focus on comparing features across multiple items, while pricing tables are more about showcasing a single plan’s price and features.

How do I highlight the best plan in the comparison table?

Use the “Ribbon” features in the widget to draw attention to your most recommended or popular plan.

Is it possible to link the CTA buttons to external checkout pages?

Yes, you can add any internal or external URL to the button, allowing users to go directly to product or checkout pages.

Conclusion

Creating an effective comparison table in Elementor doesn’t have to be difficult. With the Comparison Table widget, you can build professional-looking tables that help visitors quickly understand their options—and make smarter choices. Give it a try and enhance your site’s usability and conversion rates today!

Check out the Demo setup for Comparison Table widget.

4 Comments

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

Leave a Reply

Your email address will not be published. Required fields are marked *