Go to athemes.com

Using the Pricing Table Widget

Want to display clear, professional pricing options on your website? The Pricing Table widget in aThemes Addons for Elementor lets you build fully customizable pricing tables with headers, feature lists, buttons, and ribbons – all without writing any code.

In this guide, we’ll walk you through how to use the Pricing Table widget in aThemes Addons for Elementor.

Table of Contents
  1. Activating the Widget
  2. Exploring Widget Options
  3. Customizing the Style Tab

Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor.

Activating the Widget

Go to your WordPress admin dashboard and navigate to the aThemes Addons dashboard. Search for the Pricing Table widget and toggle it on to activate it. The widget is now available in the Elementor editor.

Exploring Widget Options

The Pricing Table widget provides several content sections that let you build out every part of your pricing table. Each section includes its own set of controls.

Configuring the Header Section

The Header section controls the top area of your pricing table. Configure the following options:

  • Icon Type – Choose between an Icon or an Image to display at the top of the table.
  • Icon – Select an icon from the icon library.
  • Image – Upload or select an image from the media library.
  • Title – Enter the plan name or heading for the pricing table.
  • Title HTML Tag – Set the HTML tag for the title (H1 through H6, div, span, or p).
  • Subtitle – Add a subtitle below the title for additional context.
  • Alignment – Set the alignment of the header content to left, center, or right.

Configuring the Price Section

The Price section lets you display your pricing details. Configure the following options:

  • Currency – Enter the currency symbol (e.g., $, EUR).
  • Currency Position – Place the currency symbol before or after the amount.
  • Full Price – Enter a slashed-through original price to show a discount.
  • Amount – Enter the main price amount.
  • Period – Add a billing period label (e.g., “/per month”).
  • Description – Add a short description below the price.
  • Alignment – Set the alignment of the price content.

Configuring the Features Section

The Features section displays a list of features included in the pricing plan. Each feature item includes the following options:

  • Feature Text – Enter the text for each feature.
  • Icon – Select an icon to display next to the feature text.
  • Slashed Text – Toggle to strike through the feature text, indicating it is not included in the plan.
  • Icon Color – Set a custom color for the feature icon.
  • Text Color – Set a custom color for the feature text.
  • Alignment – Set the alignment of the features list.

The Footer section adds a call-to-action area at the bottom of your pricing table. Configure the following options:

  • Footer Text – Enter additional text to display in the footer area.
  • Button – Configure the button text, alignment, and display settings.

Configuring the Ribbon Section

The Ribbon section lets you add an eye-catching badge to highlight a specific pricing plan. Configure the following options:

  • Style – Choose between Circle, Ribbon, or Flag styles.
  • Text – Enter the ribbon label text (e.g., “Popular”, “Best Value”).
  • Size – Adjust the size of the ribbon element.
  • Offset Horizontal – Shift the ribbon position horizontally.
  • Offset Vertical – Shift the ribbon position vertically.

Configuring the Order Section

The Order section lets you rearrange the order of the pricing table sections. Drag and drop the sections to position the Header, Price, Features, and Footer in the order you prefer.

Customizing the Style Tab

The Style tab lets you customize the appearance of every element in your pricing table. Each section has its own set of styling controls.

Styling the Wrapper

Adjust the overall container styling with these options:

  • Background – Set a background color or gradient for the entire pricing table.
  • Padding – Control the inner spacing around the content.
  • Border – Add and customize borders around the table.
  • Border Radius – Round the corners of the pricing table.
  • Box Shadow – Add a shadow effect to the pricing table container.

Styling the Icon

Customize the header icon appearance:

  • Size – Adjust the icon size.
  • Color – Set the icon color.
  • Background – Add a background color behind the icon.
  • Border Radius – Round the icon background corners.

Styling the Header

Customize the header section appearance:

  • Title Color – Set the title text color.
  • Title Typography – Adjust the title font family, size, weight, and style.
  • Subtitle Color – Set the subtitle text color.
  • Subtitle Typography – Adjust the subtitle font settings.
  • Background – Set a background color for the header area.
  • Padding – Control the inner spacing of the header section.

Styling the Price

Customize the price section appearance:

  • Amount Color – Set the main price color.
  • Amount Typography – Adjust the price font settings.
  • Currency Color – Set the currency symbol color.
  • Period Color – Set the billing period text color.
  • Description Color – Set the description text color.
  • Background – Set a background color for the price area.
  • Padding – Control the inner spacing of the price section.

Styling the Features

Customize the features list appearance:

  • Text Color – Set the feature text color.
  • Typography – Adjust the feature text font settings.
  • Icon Color – Set the feature icon color.
  • Slashed Text Color – Set the color for struck-through feature text.
  • Background – Set a background color for the features area.
  • Padding – Control the inner spacing of the features section.
  • Spacing – Adjust the space between individual feature items.

Customize the footer section appearance:

  • Text Color – Set the footer text color.
  • Typography – Adjust the footer text font settings.
  • Button Text Color – Set the button label color.
  • Button Background – Set the button background color.
  • Button Border – Add and customize the button border.
  • Button Hover – Configure the button hover state colors and styles.
  • Padding – Control the inner spacing of the footer section.

Styling the Ribbon

Customize the ribbon appearance:

  • Text Color – Set the ribbon label color.
  • Background – Set the ribbon background color.
  • Typography – Adjust the ribbon text font settings.

That’s it! You’ve successfully learned how to use the Pricing Table widget in aThemes Addons for Elementor to create professional pricing tables with full styling control.

Next, would you like to add dynamic animations to your Elementor widgets? Check out our guide on using the Animation Effects extension to learn more.

image_print