Pricing Table

The JupiterX Pricing Table widget offers a dynamic and efficient way to display pricing plans on websites created with the JupiterX WordPress Theme. This widget is designed to be highly user-friendly, featuring a drag-and-drop interface that simplifies the creation process. Users can quickly design beautiful, responsive pricing tables that are well-suited for various types of businesses, such as startups or new ventures. The widget's flexibility and ease of use make it an essential tool for any website looking to present pricing information clearly and attractively​​.

View Live Demo

Content Tab

Header

  • Title: Input the title of your pricing table.
  • Description: Provide a description or subtitle for the pricing table.
  • Title HTML Tag: Choose the appropriate HTML tag for your title, like H1, H2, H3, etc., to maintain SEO hierarchy.

Pricing

  • Currency Symbol: Select the currency symbol you want to display, like the Dollar sign, Euro, etc.
  • Price: Enter the price value for the service or product.
  • Currency Format: Choose the format in which the price should be displayed (e.g., 1,234.56).
  • Sale: Toggle to indicate if the item is on sale.
  • Period: Specify the billing period, such as monthly or annually.

Features

  • Customize the list of features included in your pricing plan. For each feature, you can:
    • Text: Add the feature text.
    • Icon: Choose an icon to represent the feature.
    • Icon Color: Select the color for the icon.

Footer

  • Button Text: Enter the text for the call-to-action button.
  • Link: Provide the URL or page to which the button will link.
  • Additional Info: Add any additional information or disclaimers here.

Ribbon

  • Show: Toggle to display a ribbon on the pricing table, which is useful for highlighting a particular plan, like "Best Value" or "Most Popular".
  • Title: Input the text for the ribbon.
  • Position: Choose the position where the ribbon should appear on the table.

Style Tab

Header

  • Background Color: Customize the header's background color.
  • Padding: Adjust the space within the header.
Title
  • Color: Set the title text color.
  • Typography: Control font, size, weight, transform, style, decoration, line-height, and letter spacing for the title.
Sub Title
  • Color: Select the subtitle text color.
  • Typography: Modify font, size, weight, transform, style, decoration, line-height, and letter spacing for the subtitle.

Pricing

  • Background Color: Define the pricing area's background color.
  • Padding: Control space within the pricing section.
  • Color
    • Color: Set the price text color.
    • Typography: Customize typography for the price text.
  • Currency Symbol
    • Size: Adjust the currency symbol size.
    • Position: Set the currency symbol's vertical position relative to the price.
  • Fractional Part
    • Size: Change the size of the price's fractional part.
    • Vertical Position: Adjust its vertical position relative to the price.
  • Period
    • Color: Choose the period text color.
    • Typography: Define the period text typography.
    • Position: Position the period text above or below the price.

Features

  • Background Color: Set the features area's background color.
  • Padding: Adjust space within the features section.
  • Color: Choose the feature text color.
  • Typography: Customize typography for the feature text.
  • Alignment: Set the feature text alignment.
  • Width: Control the feature text container's width.
Divider
  • Style: Select the divider style (solid, dashed, dotted, etc.).
  • Color: Pick the divider line color.
  • Weight: Set the divider line thickness.
  • Width: Adjust the divider line width.
  • Gap: Control space above and below the divider line.

Footer

  • Background Color: Choose the footer's background color.
  • Padding: Set space within the footer.
  • Button
    • Size: Select the button size.
    • Typography: Define button text typography.
    • Border Type: Choose the button's border type.
    • Border Radius: Adjust the button's corner curvature.
    • Text Padding: Set the button text spacing.
  • Additional Info
    • Color: Set additional info text color.
    • Typography: Customize typography for additional info text.
    • Margin: Adjust space around the additional info area.

Ribbon

  • Background Color: Choose the ribbon's background color.
  • Distance: Adjust the ribbon's distance from the corner.
  • Text Color: Pick the ribbon text color.
  • Typography: Customize typography for the ribbon text.
  • Box Shadow: Apply a shadow effect to the ribbon.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Articles