Advanced Price Table

Estimated reading: 14 minutes 465 views

It is an essential widget for showcasing pricing information in an effective and engaging manner. This widget offers a combination of elements to be displayed, including title, description, icon, price, button, and more. With this widget, you can create and showcase any number of price boxes, allowing for easy comparison and selection.

One of the standout features of this widget is its ability to highlight sale prices, drawing attention to special offers and promotional discounts. It also supports tab features, allowing you to present your prices in a dual tab format, making it easy for users to differentiate between different options. Additionally, tooltips seamlessly integrate with the widget, providing additional information or descriptions when users hover over specific features or by adding an info icon.

Moreover, it can highlight specific price boxes, allowing you to draw attention to key offerings or promotional deals. You can further enhance the display by adding badges to particular price boxes, enabling you to include additional information.

The “Advanced Price Table” widget features the following controls.

Content

General

  • Number of Price Table: Specify the number of tables to be shown.
  • Show Tabs: Enable the option to display dual tabs pricing.
Advanced Price Table: General Settings
Advanced Price Table: General Settings

Plan

Content

  • Tab: Select tab preference for displaying individual plans(applicable when “Show Tabs” is enabled in the General section).
  • Title: Enter the title.
  • Description: Enter the description.
  • Price Prefix: Specify the prefix of price.
  • Price: Enter the price value.
  • Sale Price: Enter the sale price value.
  • Duration: Specify pricing duration: monthly, yearly, or other.
  • Highlight: Enable the option to highlight the particular price table.
    • Value: Enter the highlighted value in percentage.
Advanced Price Table: Plan Content Settings
Advanced Price Table: Plan Content Settings
  • Feature List
    • Features: Enter the feature.
    • Icon Type: Select from the icon library or upload an SVG.
    • Feature not available: Enable the option to display Feature currently unavailable.
    • Tooltip Text: Enter the tooltip text, if needed.
Advanced Price Table: Feature List Settings
Advanced Price Table: Feature List Settings
  • Button
    • Text: Enter the text for the button.
    • URL: Enter the URL to link with the button.
    • Icon Type: Select from the icon library or upload an SVG.
Advanced Price Table: Button Settings
Advanced Price Table: Button Settings

Badge: Enable the option to apply a badge on price table.

Note: There are different settings controls available for each badge style preset.

  • Badge Style Preset: Choose a preset from available styles.
  • Text: Enter the text of the badge.
  • Badge Position: Select the position of the badge.
  • Width: Specify the width.
  • Vertical Position: Select the vertical position.
  • Horizontal Position: Select the horizontal position.
Advanced Price Table: Badge Settings
Advanced Price Table: Badge Settings
  • Badge Style
    • Badge Typography: Set the typography.
    • Color: Select the color of the badge.
    • Background Type: As we mentioned below, you can select either classic or gradient. Check here.
    • Border Radius: Set the border radius.
    • Padding: Set the padding.
Advanced Price Table: Badge Style Settings
Advanced Price Table: Badge Style Settings

Icon

  • Icon Type: Choose from a list of Icons, Images, or Lottie animations.
    • Icon
      • Icon: Select from the Font Awesome icon library or upload an SVG image.
    • Image
      • Image: Either upload an image or select a dynamic tag for display.
      • Image size: Choose the size for your icon image display.
    • Lottie Animation
      • Source Choose the source of the Icon by either adding an External URL or selecting a media file.
      • Loop – Enable the loop option to display the animation continuously.
      • Reverse Activate the reverse option to display the animation in reverse order.
  • View – Select from default, stacked, or framed display options.
  • Shape – Select either Circle or Square shape for the stack or frame.
Advanced Price Table: Icon Settings
Advanced Price Table: Icon Settings

Style

  • Override style: Enable the option to override the styling options.
    • Title
      • Typography: Set the typography.
      • Color: Select the color of the title.
      • Hover Color: Select the hover color of the title.
    • Description
      • Typography: Set the typography.
      • Color: Select the color of the description.
      • Hover Color: Select the hover color of the description.
    • Price Prefix
      • Font Size: Enter the font size of the prefix.
      • Color: Select the color of the prefix.
      • Hover Color: Select the hover color of the prefix.
Advanced Price Table: Individual Item Style Settings
Advanced Price Table: Individual Item Style Settings
  • Price
    • Font Size: Enter the font size of the price.
    • Color: Select the color of the price.
    • Line Through Color: Select the strike-through color of the price.
    • Hover Color: Select the hover color of the price.
  • Fractional
    • Font Size: Enter the font size of the fractional value.
    • Color: Select the color of the fractional value.
    • Hover Color: Select the hover color of the fractional value.
  • Sale Price
    • Font Size: Enter the font size of the sale price.
    • Color: Select the color of the sale price.
    • Hover Color: Select the hover color of the sale price.
  • Duration
    • Typography: Set the typography.
    • Color: Select the color of duration.
    • Hover Color: Select the hover color of duration.
Advanced Price Table: Individual Item Style Settings
Advanced Price Table: Individual Item Style Settings
  • Features
    • Typography: Set the typography.
    • Color: Select the color of the features.
    • Hover Color: Select the hover color of features.
  • Tooltip
    • Color: Select the color of the tooltip.
    • Icon Color: Select the icon color of the tooltip.
    • Icon Hover Color: Select the icon hover color of the tooltip.
    • Arrow Color: Select the arrow color of the tooltip.
    • Background Type: Select either Classic or Gradient.

Classic

  • Color: Choose the color for the background.
  • Image: Either upload an image or select a dynamic tag for display.

Gradient

  • Color: Select the color for the background.
  • Location: Determine the position of the color on the background by specifying their location in percentage.
  • Second Color: Select the second color for the background.
  • Location: Determine the position of the second color on the background by specifying their location in percentage.
    • Type: Select either Radial or Linear.
      • Radial
        • Position: Set the position.
      • Linear
        • Angle: Set the angle using DEG, GRAD, RAD, and TURN.
Advanced Price Table: Individual Item Style Settings
Advanced Price Table: Individual Item Style Settings
  • Icon
    • Primary Color: Select the primary color of icon.
    • Secondary Color: Select the secondary color of icon.
    • Primary Hover Color: Select the primary hover color of icon.
    • Secondary Hover Color: Select the secondary hover color of icon.
  • Button
    • Color: Select the button text color.
    • Border Color: Select the border color.
    • Background Type: As we mentioned above, you can select either classic or gradient. Check Here.
    • Hover Color: Select the button hover text color.
    • Hover Border Color: Select the button hover border color.
    • Hover Background Color: Select the button hover background color.
  • Button Box
    • Background Type: As we mentioned above, you can select either classic or gradient. Check Here.
    • Border Color: Select the border color.
    • Padding: Set the padding.
Advanced Price Table: Button Style Settings
Advanced Price Table: Button Style Settings
  • Price Table
    • Background Type: As we mentioned above, you can select either classic or gradient. Check Here.
    • Box Shadow: Set the box shadow.
    • Border Type: Select the border type.
    • Border Radius: Set the border radius.
    • Padding: Set the padding.
    • Hover Border Color: Select the hover border color.
    • Hover Background Color: Select the hover background color.
    • Hover Box Shadow: Select the hover box shadow.
Advanced Price Table: Price Table Style Settings
Advanced Price Table: Price Table Style Settings

Tab

Note: This section will be only available when the “Show Tabs” option is enabled in General Section.

  • Skin: Select the skin from available skin styles.
  • Active Tab: Choose the tab which you want to active on load.
  • Tab 1
    • Icon Type: Select from icon library or upload an SVG.
    • Text: Enter the text for tab 1.
  • Tab 2
    • Icon Type: Select from the icon library or upload an SVG.
    • Text: Enter the text for tab 2.
Advanced Price Table: Tab Settings
Advanced Price Table: Tab Settings

Settings

  • Title HTML Tag: Select the HTML tag of the title.
  • Gap: Specify the gap between the price tables.
  • Stacked device: Select either Mobile or Tablet.
  • Feature not available icon: Select either from Line Through(StrikeThrough) or Icon.
  • Tooltip Display: Choose either “features” or “icons.” If you select “features,” the tooltip text will appear when you hover to features text; else, in icon, the tooltip will be displayed when you hover to the icon.

Order: Choose the order of displaying individual items.

Note: If any of these elements have a lower priority than others, they can be placed first on the webpage. This feature gives you greater control over the visual hierarchy of your webpage.

  • Icon
  • Title
  • Description
  • Price
  • Features
  • Button
Advanced Price Table: Settings
Advanced Price Table: Settings

Style

Box

  • Padding: Set the padding of the box.
Advanced Price Table: Box Style Settings
Advanced Price Table: Box Style Settings

Price Table

Normal

  • Background Type: As we mentioned above, you can select either classic or gradient. Check Here.
  • Box Shadow: Set the box shadow.
  • Border Type: Select the border type.
Advanced Price Table: Price Table Style Settings(Normal)
Advanced Price Table: Price Table Style Settings(Normal)

Hover

Styling controls for the hover state are available under this section. These settings will be applied when someone hovers over the price table.

Advanced Price Table: Price Table Style Settings(Hover)
Advanced Price Table: Price Table Style Settings(Hover)
  • Content Gap: Specify the gap between content in px.
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
Advanced Price Table: Price Table Style Settings
Advanced Price Table: Price Table Style Settings

Content

Title

  • Typography: Set the typography.
  • Text alignment: Select the alignment of the title.
  • Normal
    • Color: Select the color of the title.
  • Hover
    • Color: Select the hover color of the title.
Advanced Price Table: Content Style Settings
Advanced Price Table: Content Style Settings
  • Background Type: As we mentioned above, you can select either classic or gradient. Click Here.
  • Border Type: Select the border type.
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
  • Margin: Set the margin.
Advanced Price Table: Content Style Settings
Advanced Price Table: Content Style Settings

Description

  • Typography: Set the typography.
  • Text alignment: Select alignment from Left, Right, or Center.
  • Normal
    • Color: Select the color of the description.
  • Hover
    • Color: Select the hover color of the description.
Advanced Price Table: Description Style Settings
Advanced Price Table: Description Style Settings
  • Background Type: As we mentioned above, you can select either classic or gradient.Click Here.
  • Border Type: Select the border type.
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
  • Margin: Set the margin.
Advanced Price Table: Description Style Settings
Advanced Price Table: Description Style Settings

Icon

  • Icon Alignment: Select the alignment of the icon.

Normal

  • Primary Color: Choose the primary color for the icon.
  • Secondary Color: Choose the secondary color for the icon.
Advanced Price Table: Icon Style Settings(Normal)
Advanced Price Table: Icon Style Settings(Normal)

Hover

Styling controls for hover state are available under this section. These settings will be applied when someone hovers the icon.

Advanced Price Table: Icon Style Settings(Hover)
Advanced Price Table: Icon Style Settings(Hover)
  • Size: Set the size of the Icon.
  • Padding: Set the padding for the Icon.
  • Rotate: Set the rotation of your Icon in degrees.
  • Border Width: Set the border’s width.
  • Border Radius: Set the border’s radius.
  • Margin: Set the margin.
Advanced Price Table: Icon Style Settings
Advanced Price Table: Icon Style Settings

Price

  • Price Prefix
    • Typography: Set the typography.
    • Vertical alignment: Select the alignment.
    • Normal
      • Color: Select the color of the price prefix.
    • Hover
      • Color: Select the hover color of the price prefix.
Advanced Price Table: Price Prefix Style Settings
Advanced Price Table: Price Prefix Style Settings
  • Price
    • Typography: Set the typography.
    • Vertical alignment: Select the alignment.
    • Normal
      • Color: Select the color of the price.
    • Hover
      • Color: Select the hover color of the price.
    • Line through color: Select the strikethrough color on the price.
Advanced Price Table: Price Style Settings
Advanced Price Table: Price Style Settings
  • Sale Price
    • Typography: Set the typography.
    • Normal
      • Color: Select the color of the sale price.
    • Hover
      • Color: Select the hover color of the sale price.
Advanced Price Table: Sale Price Style Settings
Advanced Price Table: Sale Price Style Settings
  • Fractional
    • Typography: Set the typography.
    • Vertical alignment: Select the alignment.
    • Normal
      • Color: Select the color of the fractional price value.
    • Hover
      • Color: Select the hover color of the fractional price value.
Advanced Price Table: Fractional Price Style Settings
Advanced Price Table: Fractional Price Style Settings
  • Duration
    • Typography: Set the typography.
    • Vertical alignment: Select the vertical alignment.
    • Alignment: Select the alignment.
    • Normal
      • Color: Select the color of duration.
    • Hover
      • Color: Select the hover color of duration.
Advanced Price Table: Price Duration Style Settings
Advanced Price Table: Price Duration Style Settings
  • Background Type: As we mentioned above, you can select either classic or gradient. Check Here.
  • Hover Background Color: Select the hover background color.
  • Text alignment: Select the alignment.
  • Border Type: Select the border type.
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
  • Margin: Set the margin.
Advanced Price Table: Price Box Style Settings
Advanced Price Table: Price Box Style Settings

Features

  • Typography: Set the typography.
  • Alignment: Select the alignment.
  • Color: Select the color of the features.
  • Hover Color: Select the hover color of features.
  • Background Type: As we mentioned above, you can select either classic or gradient. Click Here.
  • Gap: Specify the gap.
  • Border Type: Select the border type.
  • Padding: Set the Padding.
  • Margin: Set the margin.
Advanced Price Table: Features Style Settings
Advanced Price Table: Features Style Settings

Icon

  • Icon alignment: Select the alignment.
  • Icon gap: Specify the gap between the features and the icon.
  • Normal
    • Primary Color: Choose the primary color for the icon.
    • Secondary Color: Choose the secondary color for the icon.
Advanced Price Table: Feature Icon Style Settings(Normal)
Advanced Price Table: Feature Icon Style Settings(Normal)

Hover

Styling controls for the hover state are available under this section. These settings will be applied when someone hovers the icon.

Advanced Price Table: Feature Icon Style Settings(Hover)
Advanced Price Table: Feature Icon Style Settings(Hover)
  • Size: Set the size of the Icon.
  • Padding: Set the padding for the Icon.
  • Rotate: Set the rotation of your Icon in degrees.
  • Border Width: Set the border’s width.
  • Border Radius: Set the border’s radius.
Advanced Price Table: Feature Icon Style Settings
Advanced Price Table: Feature Icon Style Settings
  • Tooltip
    • Preview Tooltip Content: Enable the option to display the tooltip preview(for editor purposes only).
    • Width: Set the width of the tooltip.
    • Typography: Set the typography.
    • Color: Select the text color of the tooltip.
    • Arrow Color: Select the arrow color.
    • Background Type: As we mentioned above, you can select either classic or gradient. Click Here.
    • Border Type: Select the border type.
    • Border Radius: Set border radius.
    • Padding: Set the padding.
Advanced Price Table: Tooltip Style Settings
Advanced Price Table: Tooltip Style Settings
  • Features Not Available
    • Color: Select the color of the not available features.
    • Icon Size: Set the icon size.
    • Icon Color: Select the icon color.
Advanced Price Table: Feature not available Style Settings
Advanced Price Table: Feature not available Style Settings

Button

  • Typography: Set the typography.
  • Position: Select the position of button.
  • Normal
    • Color: Select the text color of the button.
    • Background Type: As we mentioned above, you can select either classic or gradient. Check Here.
    • Border Type: Select the border type.
    • Box Shadow: Set the box shadow.
Advanced Price Table: Button Style Settings(Normal)
Advanced Price Table: Button Style Settings(Normal)
  • Hover

Styling controls for the hover state are available under this section. These settings will be applied when someone hovers the button.

Advanced Price Table: Button Style Settings(Hover)
Advanced Price Table: Button Style Settings(Hover)
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
  • Margin: Set the margin.
Advanced Price Table: Button Style Settings
Advanced Price Table: Button Style Settings

Icon

  • Position: Select the position of the icon.

As we mentioned above regarding Icon styling, you can Check Here.

Advanced Price Table: Button Icon Style Settings
Advanced Price Table: Button Icon Style Settings

Box

  • Background Type: As we mentioned above, you can select either classic or gradient. Click Here.
  • Border Type: Select border type.
  • Border Radius: Set border radius.
  • Padding: Set the padding.
Advanced Price Table: Button Box Style Settings
Advanced Price Table: Button Box Style Settings

Tab

Note: This section will be only available when the “Show Tabs” option is enabled in General Section.

  • Typography: Set the typography.
  • Normal
    • Color: Select the text color of the tab.
    • Background Color: Select the background color of the tab.
    • Box Shadow: Set the box shadow.
    • Border Type: Set border type.
  • Hover

Styling controls for the hover state are available under this section. These settings will be applied when someone hovers over the tab.

  • Border Radius: Set border radius.
  • Padding: Set padding.
Advanced Price Table: Tab Style Settings
Advanced Price Table: Tab Style Settings

Icon

  • Gap: Specify the gap between the tab icon and to text.
  • Position: Select the position of the icon.

As we mentioned above regarding Icon styling, you can Check Here.

Advanced Price Table: Tab Icon Style Settings
Advanced Price Table: Tab Icon Style Settings
  • Button alignment: Select the alignment of the button.
  • Gap: Specify the gap.
  • Background Type: As we mentioned above, you can select either classic or gradient. Click Here.
  • Box Shadow: Set the box shadow.
  • Border Type: Select border type.
  • Border Radius: Set border radius.
  • Padding: Set the padding.
  • Margin: Set the margin.
Advanced Price Table: Tab Button Alignment Style Settings
Advanced Price Table: Tab Button Alignment Style Settings
Share this Doc

Advanced Price Table

Or copy link

CONTENTS