Pricing Table Element

Last Update: August 5, 2026

The Avada Pricing Table Element affords you a graphic way of showcasing your services, prices, and overall offerings. With the Avada Pricing Table Element, there are a huge number of options with which to design and style your pricing tables. You can have connected or separated columns, make a Column stand out for added visibility, change the type of currency and the currency position, change the length of payment time, such as monthly or weekly, and even add buttons to the footer section. These many options allow you to create beautiful, customized pricing tables throughout your site with ease.

Watch the video below for a visual overview of the Element, view the Avada Pricing Table Element page for live examples, and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Live Example!

View Avada Builder Elements!

How To Use The Pricing Table Element

The Pricing Table Element allows you to easily display pricing tables on your website . To start, add the element to your desired column. The Avada Pricing Table Element got a huge makeover in Avada 7.16. So now, instead of just two styles, there are now two types, and virtually unlimited styling options.

There are a plethora of new options with this element, including a grid based layout, incl. number of columns, column max width, alignment and column gap options with responsive controls, highlight badges, sub-heading, description, and above and below price texts, incl. strikethrough and chip backgrounds, added feature row icons, as well as excluded feature rows, CTA position, standout expansion and text scale, price dynamic data, inner borders, divider colors, box shadows, and per column overrides for all colors. Now you can make any sort of pricing tables you want! Try it out!

Read below for a detailed description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element in your Global Options > Avada Builder Elements > Pricing Table section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

Table Options

General

Heading		Description
Type		Select whether the pricing columns are connected, sharing one frame, or displayed as separate boxes.
Number of Columns		Set the number of columns per row. Leave at 0 to fit all pricing columns into a single row, up to a maximum of 6.
Gap		Set the column and row gap between the pricing columns. The row gap applies once columns wrap onto multiple rows. Enter values including any valid CSS unit, ex: 24px. Leave empty for the default spacing of 24px.
Column Maximum Width		Set the maximum width of each pricing column. Enter value including any valid CSS unit, ex: 320px. Leave empty for the columns to share the full available width.
Columns Horizontal Alignment		Choose how the pricing columns are aligned horizontally in the space their maximum width leaves free.
Column Vertical Alignment		Choose how columns of unequal height align vertically. Stretch makes all pricing columns equally tall and aligns the heading, price, features and footer areas across columns.
Ribbon Style		Choose "Wrapped" to make the ribbon look like it wraps around the column box, with folded ends and a shadow.
Heading HTML Tag		Choose the HTML tag of the main heading, either div, p or the heading tag, h1-h6.
Preserve Column Gap On Standout		When enabled, a standout column that expands outward keeps the defined column gap to the columns beside it, instead of overlapping into them. Applies to the separated layout while all columns sit in a single row.
Margin		Enter values including any valid CSS unit, ex: 4%.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Column Border Size		Set the size of the outer border area surrounding each pricing column. Enter value including any valid CSS unit, ex: 9px. Leave empty for the default of 9px.
Column Border & Base Background Color		Set the color of the outer border area surrounding each pricing column. It also serves as the base background of the pricing and CTA areas, which can be overridden with their individual background color options.
Column Border Radius		Enter values including any valid CSS unit, ex: 10px.
Inner Border Size		Set the size of the hairline surrounding each column's content area, inside the outer border. Enter value including any valid CSS unit, ex: 1px. Leave empty for the default of 1px, use 0px to remove it.
Inner Border Color		Set the color of the hairline surrounding each column's content area. Leave empty to use the divider color.
Divider Color		Set the color of the dividers in-between the content sections and feature rows.
Box Shadow		Set to "Yes" to enable box shadows.
Box Shadow Position		Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px.
Box Shadow Blur Radius		Set the blur radius of the box shadow. In pixels.
Box Shadow Spread Radius		Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.
Box Shadow Color		Controls the color of the box shadow.
Box Shadow Style		Set the style of the box shadow to either be an outer or inner shadow.
Highlight Badge Position		Choose how column badges are displayed. As a full-width cap on top, as a chip or vertical band inside the heading area, or as a corner ribbon. The badge text is set on each pricing column.
Highlight Badge Padding		Controls the padding and thereby the size of the badges. Enter values including any valid CSS unit, ex: 8px. Not available for ribbons.
Highlight Badge Typography		Controls the typography of column badges. The badge and ribbon shapes scale proportionally with the font size.
Highlight Badge Text Color		Set the text color of column badges.
Highlight Badge Background Color		Set the background color of column badges.
Heading Padding		Controls the padding of the heading area. Enter values including any valid CSS unit, ex: 15px. On standout columns, the expansion is added on top of the vertical paddings.
Heading Typography		Controls the typography of the column headings.
Heading Color		Set the color of the column headings.
Heading Background Color		Set the background color of the heading area. Leave empty for the style default, the features background color for "connected" and the primary color for "separate".
Sub-Heading Typography		Controls the typography of the column sub-headings.
Sub-Heading Color		Set the color of the column sub-headings.
Description Typography		Controls the typography of the column descriptions.
Description Color		Set the color of the column descriptions.
Above Price Typography		Controls the typography of the texts displayed above the price, set on the columns.
Above Price Color		Set the color of the text displayed above the price.
Above Price Background Color		Set the background color of the text displayed above the price.
Above Price Border Radius		Set the border radius of the above price text background, from square to a fully rounded pill.
Strike Above Price Text		Choose to display the above price texts with a line through them, ex: for showing the regular price during a sale.
Price Typography		Controls the typography of the whole price area, covering the price, currency, decimal and time period parts. The currency, decimal and time period scale proportionally to the price font size, unless they are given their own size below.
Price Color		Set the color of the price text.
Currency Position		Choose the default position of the currency symbol relative to the price. Individual columns can override this.
Currency Font Size		Set the font size of the currency symbol. Use em values to scale proportionally with the price font size, ex: 0.4em. Leave empty for the default proportional size.
Currency Color		Set the text color of the currency symbol.
Time Period Font Size		Set the font size of the time period. Use em values to scale proportionally with the price font size, ex: 0.25em. Leave empty for the default proportional size.
Time Period Color		Set the text color of the time period.
Below Price Typography		Controls the typography of the texts displayed below the price, set on the columns.
Below Price Color		Set the color of the text displayed below the price.
Below Price Background Color		Set the background color of the text displayed below the price.
Below Price Border Radius		Set the border radius of the below price text background, from square to a fully rounded pill.
Strike Below Price Text		Choose to display the below price texts with a line through them.
Pricing Background Color		Set the background color of the pricing area. Leave empty to use the Column Border Color.
Pricing Padding		Controls the padding of the pricing area. Enter values including any valid CSS unit, ex: 15px.
Features Alignment		Choose the alignment of the feature rows.
Features Row Padding		Controls the padding of the feature rows. Enter values including any valid CSS unit, ex: 15px.
Features Icon		Choose an icon displayed in front of every feature row. Leave empty for no icon.
Features Excluded Icon		Choose an icon displayed in front of excluded feature rows. Start a feature row with "- " to mark it as excluded. Leave empty to use the regular features icon.
Strike Excluded Features		Choose to display excluded feature rows with a line through the text. Start a feature row with "- " to mark it as excluded.
Features Typography		Controls the typography of the feature rows.
Features Text Color		Set the text color of the feature rows.
Features Icon Color		Set the color of the feature row icons.
Features Excluded Icon Color		Set the icon color of excluded feature rows. Leave empty to use the regular features icon color.
Features Background Color		Set the features area background color.
Features Alternate Background Color		Set the background color of every other feature row, for a striped look. Leave empty for no striping.
Column Base Background Hover Color		Set the background hover color of the column base, applied to the content area and the feature rows. Individually set area background colors take precedence over the hover color.
CTA Background Color		Set the background color of the CTA area. Leave empty to use the Column Border Color.
CTA Padding		Controls the padding of the CTA area. Enter values including any valid CSS unit, ex: 15px. On standout columns, the expansion is added on top of the vertical paddings.
CTA Position		Choose where the CTA area, usually holding the button, should be displayed.

Extras

Heading		Description
Conditional Rendering		Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results.

Table Item Options

General

Heading		Description
Standout		Choose to apply standout styling to the pricing column..
Standout Expansion		Set how far the standout column extends above and below the other columns. The heading and CTA area padding increases to fill the added height. Enter value including any valid CSS unit, ex: 10px. Use 0px for a flat standout look.
Standout Text Scale		Proportionally scales the text of the standout column to emphasize it, covering the heading area, price, badge and feature rows. Buttons in the CTA area keep their own size settings.
Highlight Badge Text		Add a badge to the pricing column, ex: Most Popular. Leave empty for no badge. The badge position and colors are set on the parent element.
Column Title		The title for the pricing column.
Column Sub-Title		An optional sub-title, displayed below the column title.
Column Description		An optional short description, displayed below the column title and sub-title.
Text Above Price		An optional text displayed above the price, ex: the regular price during a sale. The optional strikethrough and styling can be set on the parent element.
Currency Symbol		Set the curreny symbol if desired.
Currency Position		Choose the position of the currency symbol relative to the price. Default uses the position set on the parent element.
Price		Set the price.
Time Period		Set the period for the price.
Text Below Price		An optional text displayed below the price, ex: save $200/year. Styling can be set on the parent element.
Feature Rows		Organize and add content to the pricing table. Start a row with "- " (hyphen followed by a space) to mark the feature as excluded, displaying it with the excluded icon and optional strikethrough.
CTA Content		Enter some content for column CTA area.

Design

Heading		Description
Column Border & Base Background Color		Set the color of the outer border area of this column, also serving as the base background of its pricing and CTA areas. Leave empty to inherit from the parent element.
Inner Border Color		Set the color of the hairline surrounding this column's content area. Leave empty to inherit from the parent element.
Divider Color		Set the color of the dividers in-between this column's content sections and feature rows. Leave empty to inherit from the parent element.
Highlight Badge Text Color		Set the text color of this column's badge. Leave empty to inherit from the parent element.
Highlight Badge Background Color		Set the background color of this column's badge. Leave empty to inherit from the parent element.
Heading Color		Set the color of this column's heading. Leave empty to inherit from the parent element.
Heading Background Color		Set the background color of this column's heading area. Leave empty to inherit from the parent element.
Sub-Heading Color		Set the color of this column's sub-heading. Leave empty to inherit from the parent element.
Description Color		Set the color of this column's description. Leave empty to inherit from the parent element.
Above Price Color		Set the color of this column's text displayed above the price. Leave empty to inherit from the parent element.
Above Price Background Color		Set the background color of this column's text displayed above the price. Leave empty to inherit from the parent element.
Price Color		Set the color of this column's price text. Leave empty to inherit from the parent element.
Currency Color		Set the text color of this column's currency symbol. Leave empty to inherit from the parent element.
Time Period Color		Set the text color of this column's time period. Leave empty to inherit from the parent element.
Below Price Color		Set the color of this column's text displayed below the price. Leave empty to inherit from the parent element.
Below Price Background Color		Set the background color of this column's text displayed below the price. Leave empty to inherit from the parent element.
Pricing Background Color		Set the background color of this column's pricing area. Leave empty to inherit from the parent element.
Features Text Color		Set the text color of this column's feature rows. Leave empty to inherit from the parent element.
Features Icon Color		Set the color of this column's feature row icons. Leave empty to inherit from the parent element.
Features Excluded Icon Color		Set the icon color of this column's excluded feature rows. Leave empty to inherit from the parent element.
Features Background Color		Set the background color of this column. Leave empty to inherit from the parent element.
Features Alternate Background Color		Set the background color of every other feature row, for a striped look. Leave empty for no striping.
Column Base Background Hover Color		Set the background hover color of this column's base, applied to the content area and the feature rows. Individually set area background colors take precedence. Leave empty to inherit from the parent element.
CTA Background Color		Set the background color of this column's CTA area. Leave empty to inherit from the parent element.

Pricing Table Element

How To Use The Pricing Table Element

Element Options

Table Options

General

Design

Extras

Table Item Options

General

Design

In this article