Compare product bundles or packages side-by-side with the versatile Comparison List widget, making it easy to showcase features, pricing, and unique benefits at a glance. This tool allows users to evaluate products, services, or features side by side, making it easier to decide what best fits their needs. By incorporating a comparison table into your Elementor website, you can enhance user experience, increase engagement, and ultimately drive conversions.
Popular Use Cases for using a Comparison Table in an Elementor Website
Automotive Websites
Use a comparison table to help buyers compare cars based on fuel efficiency, safety features, and price.
E-commerce Websites
Allow customers to compare product specifications, features, and pricing to help them make informed purchasing decisions.
Hosting and Web Services
Compare hosting providers based on bandwidth, storage, and pricing to help businesses find the right solution.
Tech and Gadgets Blogs
Use a comparison table to compare smartphones, laptops, or other gadgets based on specs like battery life, performance, and price.
Real Estate Websites
Compare houses or apartments based on price, location, size, and amenities to streamline decision-making.
Step #1: Install and activate Unlimited Elements
Before getting started you will need to purchase Unlimited Elements pro from the link below to access the Comparison List widget.
Then follow these steps:
Go to Plugins → Add New → Upload Plugin.
Choose the zip file you downloaded, upload, and then click Activate.
Once activated, you’ll need to enter your license key.
Now that you have the plugin installed, it’s time to start creating the Comparison Table.
Step #2: Adding the Comparison List widget to your Elementor website
To create a Comparison Table you need to install the Comparison List widget from the Unlimited Elements Widget library.
Go to Unlimited Elements in the WordPress Dashboard
Search for the "Comparison List"
Hover over the widget and click install
Step #3: Add a Comparison Table to your Elementor page
Now, in the Elementor editor, Find the Comparison List widget and drag it to the desired part of your page.
Choose the Items Source
Choose the Items Source from the dropdown. We can select Posts, Woo products, ACF repeater fields, JSON or CSV files, gallery, terms, users, menu items, and more. For our guide, we’ll use static data and leverage the items repeater to add our content.
General Settings
Enable Accordion
Enable the accordion option to display more information when expanded upon clicking.
RTL
Enable this for "Right to Left" websites.
Layout Settings
Header Title
Choose a a title for the header.
Show Package Price
Enable this to show package price.
Show Package Button
Enable this to show package button.
Show Package Label
Enable this to show package label.
Package Button Text
Enter the package button text.
Show Graphic Element
Select the graphic element to be an icon, or an image.
Packages/Plans
Enable up to six packages based on your use case. Activating a package or plan will add a new column to the comparison table.
Enter the Details for each package
Package Name
Enter the packag name.
Price
Enter the packag price.
Link
Enter the packag link.
Graphic Image
Choose a graphic image for the package.
Accordion Settings
Open-Close Duration (ms)
Enter the Open-Close Duration in milliseconds.
Close Others on Open
Enable this option to automatically close other accordions when a new one is opened.
First Appearance
Choose the "First Appearance" option to either 'Close', 'First Opened', or 'All Opened'.
Expand All Accordion
To expand all accordions using an external button, enter a unique ID without '#' in this field and assign the same ID to the external button or element you want to use for opening the accordions.
Inactive Icon
Choose an icon for inactive state.
Active Icon
Choose an icon for active state.
Connected Widgets Settings
Enable Remote Connection
Widget Name for Connection
Choose this to "Auto Detectable", so it will automatically detect the remote widgets.
Sync
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Features (Item)
Title
Enter the title for the first feature.
Content
Enter the content for the accordion.
Row Background Color
Choose a color for the row background if needed.
Text
Enter the text for all the packages (P1, P2,...P6) accordingly.
Icon
Select an icon if needed.
Icon Color
Choose the icon color.
Text Color
Choose the text color.
Wrapping it Up!
A comparison table is more than just a feature—it’s a powerful way to guide your audience through their decision-making journey. By presenting clear, concise, and visually appealing comparisons, you can build trust, reduce bounce rates, and foster better engagement. Whether you’re running an e-commerce site, a SaaS platform, or an informational blog, implementing a comparison table can set your website apart. Start leveraging this simple yet impactful design widget and watch as your website becomes a go-to resource for informed choices.
