Go to athemes.com

Pricing Table

The Pricing Table Widget allows you to display a detailed pricing table on your website, including options for different pricing plans, features, and a call-to-action button. It’s perfect for showcasing your product or service plans in a visually appealing manner.

Activate the widget

This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget, and click on the switch to activate it. It will now be available in your Elementor interface.

Widget options

Header section

  • Icon type: Choose between “Icon” and “Image” to define the header type.
  • Icon: Select an icon for the header if “Icon” is chosen.
  • Image: Upload an image for the header if “Image” is chosen.
  • Title: Enter the title of the pricing table (e.g., “Basic”).
  • Title HTML Tag: Choose the HTML tag for the title (e.g., H1, H2, etc.).
  • Subtitle: Enter a subtitle for the pricing table.
  • Alignment: Align the header to the left, center, or right.

Price section

  • Currency: Enter the currency symbol (e.g., “$”).
  • Currency Position: Choose to display the currency before or after the price.
  • Full price: Enter the full price if you want it to be shown as slashed.
  • Amount: Enter the price amount.
  • Period: Enter the pricing period (e.g., “/ per month”).
  • Description: Enter a description for the pricing plan.
  • Alignment: Align the price to the left, center, or right.

Features section

  • Features: Add features for the pricing plan. Each feature can have an icon, text, and optional slashed text.
  • Feature text: Enter the text for each feature.
  • Icon: Select an icon for each feature.
  • Slashed text: Optionally, toggle to display slashed text for a feature.
  • Icon Color: Set the color of the feature icon.
  • Text Color: Set the color of the feature text.
  • Alignment: Align the features list to the left, center, or right.
  • Footer text: Enter text for the footer of the pricing table.
  • Button: Customize the call-to-action button including its text, alignment, and display options.

Ribbon section

  • Style: Choose the ribbon style (e.g., circle, ribbon, flag, etc.).
  • Text: Enter the text for the ribbon (e.g., “Hot”).
  • Size: Adjust the size of the ribbon.
  • Offset Horizontal: Adjust the horizontal offset of the ribbon.
  • Offset Vertical: Adjust the vertical offset of the ribbon.

Order section

  • Order: Set the order of the elements in the pricing table (e.g., icon, title, price, features, footer).
  • Description: A brief description of how to set the order for each element.

Style tab

Customize the appearance of your pricing table under this tab. You have a variety of options to ensure the widget matches your website’s design and branding perfectly.

Wrapper Style

  • Background: Customize the background color or image for the pricing table.
  • Border: Set the border properties for the table.
  • Box Shadow: Apply shadow effects to the pricing table.

Icon Style

  • Icon Color: Set the color of the icon.
  • Icon Size: Adjust the size of the icon.
  • Background Color: Customize the background color of the icon.
  • Border: Configure the border settings for the icon.
  • Box Shadow: Apply shadow effects to the icon.

Header Style

  • Margin: Adjust the margin around the header.
  • Padding: Adjust the padding inside the header.
  • Background: Customize the background color or image for the header.
  • Border: Set the border properties for the header.
  • Title Color: Set the color of the header title.
  • Title Typography: Customize the typography for the header title.
  • Subtitle Color: Set the color of the header subtitle.
  • Subtitle Typography: Customize the typography for the header subtitle.

Price Style

  • Padding: Adjust the padding inside the price area.
  • Border: Set the border properties for the price area.
  • Full Price Color: Set the color of the full price text.
  • Full Price Typography: Customize the typography for the full price text.
  • Price Color: Set the color of the price text.
  • Price Typography: Customize the typography for the price text.
  • Currency Color: Set the color of the currency symbol.
  • Currency Typography: Customize the typography for the currency symbol.
  • Period Color: Set the color of the price period text.
  • Period Typography: Customize the typography for the price period text.
  • Description Color: Set the color of the price description text.
  • Description Typography: Customize the typography for the price description text.

Features Style

  • Margin: Adjust the margin around the features list.
  • Spacing: Adjust the spacing between individual features.
  • Text Color: Set the color of the feature text.
  • Text Typography: Customize the typography for the feature text.
  • Slashed Text Color: Set the color of the slashed text for features.
  • Slashed Text Typography: Customize the typography for the slashed text of features.
  • Icon Color: Set the color of the feature icons.
  • Icon Size: Adjust the size of the feature icons.
  • Icon Spacing: Adjust the spacing between the icon and the text.
  • Text Color: Set the color of the footer text.
  • Text Typography: Customize the typography for the footer text.
  • Button Style: Customize the style of the call-to-action button, including background color, text color, border, padding, and hover effects.

Ribbon Style

  • Text Color: Set the color of the ribbon text.
  • Text Typography: Customize the typography for the ribbon text.
  • Background Color: Set the background color for the ribbon.