Comparison Table

The comparison table is a widget that allows you to compare different costs and plans based on your choices. You can make it look better by changing its appearance to your liking. It’s useful for showing and organizing your plans and can include special deals. To use this feature, you need to install the Elementor Addon Elements first.

Content

General

• Plan: Enter the number of Product tables you want to display.

Feature box

• Heading: Enter the title for the feature box content.
• Enable Tooltip: Enable or disable the tooltip.
• Type: Select the tooltip type like Link or the Icon.
• Features: Enter the list of all the features you are offering. Click on the Add Item button to add another item to the list.
• Tooltip: Enter the tooltip text.

Plan

• Hide Plan: Enable the option to hide a particular plan from the table(we have included this feature in our version 1.13)
• Title: Enter the title of the specific price plan
• Currency Symbol: Give a custom currency symbol.
• Price: Set the pricing of your product.
• Offering Discount: Enable it if you want to display the discounted price.
  • Original Price: Enter the discounted price.
• Duration: Enter the period for each payment that appears under the price.
• Ribbon: Enable or disable the corner ribbon.
  • Ribbon Text: Enter the text to be displayed on the ribbon
  • Position: Display the ribbon on the Top, Left, and Right of the table
• Button text: Write the text that will appear for the button
• Link: Enter the URL for the item’s link. Click the setting icon to either add nofollow to the link or to open the link in a new window

• Feature: Add a list of all the features you offer for the particular product.

• Override Styles: Enable this option to style a particular plan. It contains options for styling(Heading, price, features, Buttons).

Button

• Heading: Assign a title to the Call to Action row.

Settings

• Hide Title Row: Enable to hide titles of the plans.
• Hide Bottom Row: Enable to hide the bottom row of the plan.
• Hide Price Row: Enable to hide the price row for plans.

Style

General

• Odd Row Color: Choose a background color for the odd row.
• Even Row Color: Choose a background color for the even row.
• Border Type: Select the border type from none, solid, double, dotted, dashed, or grooved.
• Border Width: Set the thickness of the border.
• Color: Select the border color.

Feature box

• Color: Set the color for the feature box text.
• Primary Background Color: Choose a primary background color.
• Secondary Row Color: Choose Secondary Color.
• Typography: Set the typography options for the feature box text.
• Alignment: Align the text to the right, left, or center.
• Padding: Set the padding.

Tooltip Icon

• Size: Set the size of the tooltip icon.
• Color: Set the color for the Tooltip icon.
• Background Color: Choose a background color for the tooltip icon.
• Hover Color: Set the color for the Tooltip icon.
• Hover Background Color: Choose a background color for the tooltip on hover.
• Padding: Set the padding.

Tooltip Text

• Color: Set the color for the Tooltip text.
• Background Color: Choose a background color for the tooltip.
• Typography: Set the typography.
• Padding: Set the padding.

Ribbon

• Distance: Control the distance between the ribbon and the corner
• Color: Set the color for the Ribbon.
• Background Color: Choose the background color of the ribbon
• Typography: Set the typography options for the ribbon’s text
• Border Type: Select the border type from none, solid, double, dotted, dashed, or grooved
• Padding: Set the padding.

Heading

• Tab Format: Choose from the list of Formats available.
• Normal
  • Color: Set the heading text color.
  • Background Color: Choose the background color of the header row.

• Active
  • Color: Set the color for the active heading tab.
  • Background Color: Choose the background color of the header row when in the active state.

• Height: Adjust the height of the header row.
• Typography: Set the typography options for the heading text.
• Alignment: Align the heading to the right, left, or center.
• Padding: Set the padding.

Price

Original Price

• Color: Choose the color of the price.
• Text decoration Color: Choose the text decoration color of the price.
• Typography: Set the typography options for the pricing area.
• Vertical Alignment: Select alignment from Top, Bottom, or Center.

Currency

• Color: Set the color of the currency symbol.
• Typography: Set the typography options for the currency.
• Vertical Alignment: Set the currency symbol to display at the price’s top, middle, or bottom.

Price

• Color: Choose the color of the price.
• Typography: Set the typography options for the pricing area.

Fractional

• Color: Choose the color of the fractional part.
• Typography: Set the typography options for the fractional part.
• Vertical Alignment: Select alignment from Top, Bottom, or Center.

Duration

• Color: Choose the color of the duration text.
• Typography: Set the typography options for the duration text.

• Background Color: Choose a background color for the pricing area.
• Alignment: Set the alignment of the duration.
• Padding: Set the padding of price.

Features

• Color: Choose the color of the features list text.
• Check Icon Color: Choose the icon color.
• Close Icon Color: Choose the close icon color.
• Background Color: Select the background color.
• Typography: Set the typography options for the features list text.
• Alignment: Align the list to the right, left, or center.
• Padding: Customize the padding of the features list.

Button

• Text Color: Choose the color of the button’s text.
• Background Color: Choose the background color of the button.
• Column Background Color: Select the background color for the button row.
• Typography: Set the typography options for the button’s text.
• Text shadow: Set the text-shadow of the button.
• Box shadow: Set the Box shadow of the button.
• Border Type: Select the border type from none, solid, double, dotted, dashed, or grooved.
• Border Radius: Set the border radius of the button to control corner roundness.

Check out the Demo page of Comparison Table.