Complete Tutorial on Creating Comparison Tables with Elementor

A product comparison table is a very useful way of displaying information such as core features, images, specifications and prices of multiple products side by side to help visitors make quick decisions. If you use Elementor Building a website may reveal that it doesn't have the ability to create product comparison tables directly on its own. But don't worry.HappyAddons The plugin does just that.

What are HappyAddons and how do they help you?

HappyAddons is a plugin extension for Elementor users that contains more than 130 useful widgets that greatly expand the boundaries of Elementor's functionality. Its Comparison Table widget makes it easy to build versatile product comparison tables.

Why do e-commerce websites need product comparison tables?

A product comparison table can present information about multiple products in a clearly structured manner, making it easy for customers to complete comparisons and make purchasing choices in a short period of time. The clear and intuitive presentation of information also increases trust and expresses the merchant's confidence in the product.

This type of table is common in e-commerce platforms, not only used to show the different models of their products, but also often used to compare their own products with competitors, so that the advantages and disadvantages appear. Consumers can see the difference between the products through a quick glance, reduce hesitation, and quickly place an order.

Steps for Creating a Product Comparison Table with HappyAddons

Step 1: Install the required plug-ins

Please install and enable the following two plugins before you start:

• Elementor (free version)
• HappyAddons (free version)

Then open the page or article you want to edit and go to the Elementor editor and make the following settings:

Step 2: Add the Comparison Table Widget

Type "Comparison Table" in the search bar of the left panel and drag the widget into the page.

A default form will load on the page and four main content setting areas will appear:

• Table Head Settings (Table Head)
• Table Row Settings (Table Row)
• Button Settings (Table Button)
• Table Settings

Setting the header content

Click "Add Item" to create a new header item. Each item supports setting alignment (left, center, right), icon position (left or right), title label, icon color, column width and so on.

It can also be turned on Sticky Header function, when turned on the table header will be fixed at the top of the page while scrolling.

Adding and Managing Table Rows

In its initial state the table has two rows of content, each containing multiple columns.

Click "Add Item" to add a new row, and then insert columns (Heading, Icon, Image) into the row.

For example to add a header column:

• Click Add Item → Set as Column → select "Content Type" as "Heading".

• importationcaption, descriptions, with the possibility of inserting icons, etc.

Tip: The contents of the columns are arranged from right to left by default.

Configure the button area

Go to the "Table Button" settings and enter the button title and link address.

If you need to beautify the button style, you can enable custom styles to further adjust the text color, background color, and shadow,hoverEffects, etc.

Setting the form width and responsiveness

"Table Settings" allows you to set the table width according to different devices. When viewed on a tablet or cell phone, the table content supports horizontal sliding, adapting to different screen widths.

Custom Style Area

In "Style", you can adjust the fonts, colors, margins, etc. of the table header, table rows and button areas to create a display style that is more in line with your brand's style.

Introduction to HappyAddons Pro's Advanced Comparison Table Features

If you intend to create more complex and informative comparison tables, try upgrading to HappyAddons Pro, which offers the Advanced Comparison Table widget.

Advanced Widget Feature Highlights:

• Supports up to 10 columns
• Icon position can be freely set
• Support expand/collapse toggle icon
• Support for responsive badge navigation
• Support for multiple content types (text, icons, images, buttons, prices, etc.)
• Table header can be set to fixed display
• Template import anddynamic labelingintegrated function

Steps to use:

• Installation: Elementor Free Edition + HappyAddons Free Edition + HappyAddons Pro
• Add Component: Drag and Drop into Advanced Comparison Table
• Initialization: three-column view is loaded by default, the number of columns can be expanded in the General option (up to 10)
• Fill content: Expand column by column to insert different types of content, such as text, icons,buttonset al. (and other authors)

Customize the setup options:

• Adjustable width of each column
• Flexible icon placement
• Line item support folding and unfolding
• Support for adding Tooltip descriptions per cell
• Import pre-defined templates or use short codes to embed dynamic data

Design beautification features:

• Custom colors,contexts, fonts, borders, etc.
• Supports even and odd row styles
• Individual styles can be set for each item (text, badges, buttons, etc.)
• Global color and font settings for overall consistency

Responsive Settings:

• Mobile support for navigation badge switching
• Separate settings for button styles on mobile devices

Advanced Feature Highlights Overview

• dynamic dataAccess: support for short codes and dynamic tags

• Sticky Header animation effect: header is always visible when content is sliding

• Predefined template import: quickly build complex table structures
• Versatile style control: adapting to different brand needs

Strengths and weaknesses of the Comparison Table Widget

Advantage:

• Easy to get started and highly customizable
• Available directly in the Elementor Manipulating in the Editor
• Table header fixation, description hints, collapsed rows, badges and many other enhancements
• Callable templates with dynamic content, flexible design

Insufficient:

• The maximum number of columns is 10
• Cannot be grabbed directly WooCommerce Product Data
• Form structure needs to be manually configured and does not have automatic generation logic

Sample application scenarios

• Product Comparison TableFor example, it shows the difference in features between the different lines of the Apple Watch.

• Comparison of service packages: Demonstration of service content for different price brackets

• Functional differentiation table: A functional module that showcases a product or service

These scenarios can be designed with the Advanced Comparison Table widget.

summarize

If you are building an e-commerce site or a showcase service site and need to create well-structured and visually friendly comparison tables.ElementorThis widget with HappyAddons will provide you with an efficient and aesthetically pleasing solution.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off