Comparison Table

How to use Comparison Table Widget of Sky Addons for Elementor

The Sky Addons Comparison Table widget builds an accessible, side-by-side feature-comparison matrix where columns are your plans and rows are your features. Each cell renders a check, cross, dash, or any custom text value (“5 GB”, “Unlimited”) from a simple pipe-separated string, so populating the table is fast. A single accent color themes the highlight column, badges, buttons, and stripes, while the layout stays fully responsive with a pinned first column on narrow screens or an optional stack-to-cards mobile mode. You can add group headings, info tooltips, expandable feature descriptions, and a call-to-action button per column — all configured visually from the Elementor panel with no code. This documentation will guide you through the process of using the Comparison Table widget to present plans and features clearly and drive conversions.

Features:

1. Columns as Plans: A repeater for each plan column with a title, subtitle, badge, and its own call-to-action button, plus a switch to highlight the recommended column.
2. Features as Rows: A repeater where each row holds one feature, its per-column values, an optional info tooltip, an optional category group heading, and an expandable description.
3. Smart Cell Values: Enter values per column separated by “|” — 1 renders a check, 0 renders a cross, – renders a dash, and any other text renders as-is.
4. One Accent Color: A single accent themes the highlight column, badges, buttons, and stripe tints for an instantly cohesive table.
5. Custom Check & Cross Icons: Swap the default check and cross marks for any icon from the icon library.
6. Sticky Header & Row Hover: Keep plan headers visible while scrolling and highlight the row under the cursor for easier reading.
7. Animated Marks: Check and cross marks pop in as they scroll into view, with reduced-motion safety built in.
8. Responsive Mobile Layouts: Choose Auto (horizontal scroll with pinned feature labels) or Stack to Cards for small screens.
9. Feature Descriptions Accordion: Add rich descriptions that expand in a dedicated row for extra detail without cluttering the table.

Insert Comparison Table Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for Comparison Table in the widget panel and drag it onto the canvas.
3. The widget renders immediately with a sample three-plan table (Free, Pro, Team) and a set of demo feature rows you can edit.

Configure Columns (Plans)

The Columns (Plans) section is a repeater — each row becomes a plan column across the top of the table.

1. Title: The plan name shown as the column heading (e.g., “Free”, “Pro”, “Team”).
2. Subtitle: A secondary line under the title, ideal for pricing such as “$12/mo”.
3. Badge: An optional ribbon label above the plan (e.g., “Popular”) to draw attention.
4. Button Text: The label for the column’s call-to-action button. Leave empty to hide the button.
5. Button Link: The destination URL for the button, with the usual link options.
6. Highlight Column: A switch that visually emphasises this column as the recommended plan using the accent tint.

Configure Features (Rows)

The Features (Rows) section is a repeater — each row is one feature line compared across every plan.

1. Group Heading: Optional. Starts a new category heading before this feature, letting you organise rows into sections.
2. Feature: The feature name shown in the first column (e.g., “Storage”, “Priority Support”).
3. Values: One value per column, separated by “|”. Use 1 for a check, 0 for a cross, – for a dash, or any text such as “5 GB” or “Unlimited”.
4. Info Tooltip: Optional helper text shown in a tooltip beside the feature name to explain it further.
5. Description: Optional rich text shown in an expandable row (requires the Accordion setting enabled).

Configure Settings

The Settings section controls the table’s global behaviour, icons, and responsive mode.

1. First Column Label: The heading text for the top-left corner cell above the feature list (default: “Features”).
2. Accent Color: A single colour that themes the highlight column, badges, buttons, and stripes.
3. Check Icon / Cross Icon: Choose the icons used for positive (1) and negative (0) cell values.
4. Min Column Width: The minimum width per column (80–320px). Below this the table scrolls horizontally with the first column pinned.
5. Sticky Header: Keeps the plan header row visible as you scroll down long tables.
6. Row Hover Highlight: Highlights the row under the cursor for easier scanning.
7. Animate Marks: Marks pop in as they scroll into view (modern browsers, reduced-motion safe).
8. Feature Descriptions (Accordion): Enables the expandable description rows configured per feature.
9. Mobile Layout: Auto (scroll, pinned labels) or Stack to cards for how the table adapts on small screens.

Style Your Comparison Table

Use the Style tab to customise every part of the table.

1. Table:
   Row divider colour, stripe tint, highlight tint, and cell padding.
2. Header:
   Header background, title colour and typography, subtitle colour, plus badge background and text colour.
3. Feature Column:
   Feature text colour and typography, group heading colour, and info icon colour.
4. Cells:
   Value text colour and typography, icon size, and separate check and cross colours.
5. Button:
   Normal and Hover tabs with text colour, border colour, background, typography, border radius, and padding for the column buttons.

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page to see your Comparison Table widget in action.

Best Practices

1. Enable Highlight Column on the plan you want visitors to choose, and give it a “Popular” badge — the accent tint plus badge nudges buyers toward it.
2. Use Group Heading rows to break long feature lists into categories (e.g., “Collaboration”, “Security”) so visitors scan faster.
3. Mix icons and text in the Values field — use 1/0 for yes/no features and plain text like “50 GB” for quantitative ones for a richer comparison.
4. Add Info Tooltips to jargon-heavy features instead of long inline text to keep the table clean while still explaining each row.
5. On mobile, prefer Stack to cards when you have many columns so each plan reads as its own tidy card rather than a wide scroll.

Troubleshooting

1. Cells show text instead of check/cross marks: The Values field only converts 1, 0, and – (plus yes/no/true/false) into marks. Any other text renders literally — check for stray spaces or wording in that column’s value.
2. Values do not line up with the right columns: Each feature’s Values must contain one entry per column, separated by “|”, in the same order as your columns. Add an empty or “-” entry for columns that have no value.
3. Feature description does not expand: The expandable description row only appears when the Feature Descriptions (Accordion) setting is enabled and the feature has a Description filled in.
4. Tooltip does not appear: Confirm the feature has Info Tooltip text and that the widget’s Tippy tooltip library is loading — check the browser console for JS errors.

Frequently Asked Questions

How do I add or remove a plan column?

Open the Columns (Plans) section and add or delete a repeater item. Remember to update each feature’s Values field so it still has one “|”-separated value per column.

Can I use custom text in a cell instead of a check or cross?

Yes. Any value that is not 1, 0, or – renders exactly as typed, so you can enter values like “Unlimited”, “5 GB”, or “Coming soon” directly in the Values field.

How do I highlight the recommended plan?

Turn on Highlight Column for that plan in the Columns section. It uses the Accent Color and Highlight Tint to stand out, and pairs well with a Badge such as “Popular”.

Is the table responsive on mobile?

Yes. Choose the Mobile Layout setting: Auto keeps the table scrolling horizontally with the feature labels pinned, while Stack to cards turns each plan into its own card for narrow screens.

Can I change the check and cross icons?

Yes. In the Settings section, use the Check Icon and Cross Icon controls to pick any icon from the icon library, and set their size and colours in the Cells style section.

Related Documentation

Explore other Sky Addons widgets that pair well with the Comparison Table widget:

• Pricing Table: Present individual plan cards with prices, features, and a call-to-action button.
• Table: Build a general-purpose data table for content that is not a plan comparison.
• WooCommerce Products: Display WooCommerce products in a grid alongside your comparison.

Conclusion

The Comparison Table widget from Sky Addons turns a dense feature matrix into a clear, conversion-focused layout that visitors can scan in seconds. With per-column plans, smart cell values, one-color theming, tooltips, group headings, and responsive mobile modes, you can present plans and features exactly how buyers need to see them — all without code. If you have any questions or need help, visit the Sky Addons support center.