Comparison Table

Estimated reading: 6 minutes 274 views

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.
Comparison Table: General Settings
Comparison Table: General Settings

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.
Comparison Table: Feature Box Settings
Comparison Table: Feature Box Settings

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
Comparison Table: Plan Settings
Comparison Table: Plan Settings
  • 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).
Comparison Table: Plan Features Settings
Comparison Table: Plan Features Settings

Button

  • Heading: Assign a title to the Call to Action row.
Comparison Table: Button Settings
Comparison Table: Button Settings

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.
Comparison Table Settings
Comparison Table Settings

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.
Comparison Table: General Style Settings
Comparison Table: General Style Settings

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.
Comparison Table: Feature Box Style Settings
Comparison Table: Feature Box Style Settings

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.
Comparison Table: Tooltip Icon Style Settings
Comparison Table: Tooltip Icon Style Settings

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.
Comparison Table: Tooltip Text Style Settings
Comparison Table: Tooltip Text Style Settings

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.
Comparison Table: Ribbon Style Settings
Comparison Table: Ribbon Style Settings

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.
Comparison Table: Heading Style Settings(Normal)
Comparison Table: Heading Style Settings(Normal)
  • 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.
Comparison Table: Heading Style Settings(Active)
Comparison Table: Heading Style Settings(Active)
  • 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.
Comparison Table: Heading Style Settings
Comparison Table: Heading Style Settings

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.
Comparison Table: Original Price Style Settings
Comparison Table: Original Price Style Settings

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.
Comparison Table: Currency Style Settings
Comparison Table: Currency Style Settings

Price

  • Color: Choose the color of the price.
  • Typography: Set the typography options for the pricing area.
Comparison Table: Price Style Settings
Comparison Table: Price Style Settings

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.
Comparison Table: Fractional Style Settings
Comparison Table: Fractional Style Settings

Duration

  • Color: Choose the color of the duration text.
  • Typography: Set the typography options for the duration text.
Comparison Table: Duration Style Settings
Comparison Table: Duration Style Settings
  • Background Color: Choose a background color for the pricing area.
  • Alignment: Set the alignment of the duration.
  • Padding: Set the padding of price.
Comparison Table: Price Style Settings
Comparison Table: Price Style Settings

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.
Comparison Table: Features Style Settings
Comparison Table: Features Style Settings

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.
Comparison Table: Button Style Settings
Comparison Table: Button Style Settings
Share this Doc

Comparison Table

Or copy link

CONTENTS