Advanced Pricing Table Overview

The Divi Advanced Pricing Table module helps businesses create customizable, visually appealing pricing tables to showcase tiers, highlight features, and compare plans.

Version Availability: The Advanced Pricing Table Module is available starting from version 1.4.9. Make sure your plugin is updated to access this feature.

Activation Required: This module is disabled by default. To use it, you need to enable it manually. Refer to our guide for step-by-step instructions.

To create a pricing table, first insert the Pricing Table Module on the page where you would like to display it. Inserting the module once will create a single pricing plan. To create multiple plans, you’ll need to use Divi Rows. For each row, insert the Pricing Table Module to create an individual plan. This way, you can build a complete pricing table with multiple plans, each customizable in its own row.

DiviFlash Advanced Pricing Table Module in use

Content Tab

Add New Pricing Item

To add a new pricing item to your pricing table, click on the plus icon labeled “Add New Pricing Item.” This will take you to the Advanced Pricing Table Item Settings, where you can add and customize the details of your new pricing item.

To learn more about adding and customizing pricing table items, click here.

Note: By default, some of the pricing table items are added to the pricing table.

Elements Animation

Enable Stagger Animation: Enable this option if you want the pricing table items to appear one after the other with a slight delay.
Types: Choose the type of stagger animation from 19 different present animation options.
Delay: Define the delay between the appearance of each pricing table item.
Duration: Adjust the total duration of the animation.

Feature Tooltip

Enable Tooltip: Enable this option to show a tooltip over the features.
Placement: Choose where the feature tooltips will appear.
Animation: Pick a reveal animation for the tooltips.
Trigger: Choose which action will trigger the tooltips, hover, click, or hover and click.
Cursor Style: Choose how the cursor would look when hovering over the features.
Transition Duration: Specify how long it will take for the feature tooltips to appear.
Hover Over Tooltip: Enable this option to let your users hover over the tooltips.
Tooltip Hover Area: Modify the size of the invisible hover area that triggers the tooltip.
Tooltip Content Hide Delay: Set the time delay for the tooltip to hide.

Note: The tooltip hover-related options are only available if you enable “Hover Over Tooltip.”

Max Width: Set a maximum width limit for the tooltip.
Vertical Distance: Adjust the vertical distance of the tooltips from their respective features.
Horizontal Distance: Adjust the horizontal distance of the tooltips from their respective features.
Box Shadow: Select a shadow effect for the tooltips and customize different aspects of it.

Link

Comes by default with Divi. No real use case.

Background

Add a background color, gradient, image, and more to the module.

Admin Label

Change the module name or label if required which will only be visible to you.

Design

Sizing

Adjust the width, height, and alignment of the entire module.

Spacing

Add custom margin and padding to the entire module’s container.

Border

Border customization options for the whole module’s container. You have the option to style each border individually or all the borders together.

Filters

Add color filters to all the module items.

Transform

Make changes to the scale and position of the module.

Animation

Apply a reveal animation effect to the module and customize the delay, duration, repeat, etc. of the animation.

Advanced

The default tab for all Divi modules to add custom CSS code, conditions, visibilities, etc.

Advanced Pricing Table Item Settings

From here, you can add and customize each pricing table items separately. Keep in mind that, the settings you apply here will take precedence over the settings applied in the “Advanced Pricing Table Settings.”

Content

Element

Element Type: Choose the type of element you want to add to the pricing table. You have 9 options. Each element will unlock different features for customizing that specific pricing table element.

If you choose “Text”

Text Content: Input the text you want to display in the pricing table.

If you choose “Price”

Regular Price: Submit the regular price.
Price Prefix: Add text, symbols, etc. which will be displayed before the regular price.
Prefix Vertical Alignment: Change the vertical position of the price prefix relative to the regular price.
Price Suffix: Add text, symbols, etc. which will be displayed after the regular price.
Suffix Vertical Alignment: Change the vertical position of the price suffix relative to the regular price.
Enable Sale Price: Enable this option to display a sale price along with the regular price.
Gap Between Regular and Sale Price: Adjust the gap between sale and regular price.
Sale Price Placement: Choose if you want to place the sale price before or after the regular price.
Sale Price: Submit the sale price.
Price Prefix: Add text, symbols, etc. which will be displayed before the sale price.
Prefix Vertical Alignment: Change the vertical position of the sale price prefix relative to the sale price.
Price Suffix: Add text, symbols, etc. which will be displayed after the sale price.
Suffix Vertical Alignment: Change the vertical position of the sale price suffix relative to the sale price.

Note: The sale price-related options are only available if you enable “Sale Price.”

Alignment: Change the horizontal position of the price element relative to the container of the pricing table.

If you choose “Feature”

Feature Text: Input the feature text.
Enable Tooltip Content: Enable this option to add the content of the tooltip for this particular feature.
Tooltip Content Area: Submit the content for the feature tooltip.
Feature Icon: Choose an icon to display beside the feature.
Gap Between the Feature Text and Icon: Adjust the gap between the feature text and its icon.
Icon Placement: Decide if you want to place the feature icon on the left or the right side of the feature text.

If you choose “Icon”

Icon: Choose the icon you want to display in the pricing table.

If you choose “Image”

Image: Upload the image you want to display in the pricing table.
Image Alt: Submit the alt text for the image you uploaded.

If you choose “Ribbon”

Choose Type: Choose what type of ribbon you want to use in the pricing table. You have 5 options: Text Only, Text With Icon, Text With Image, Image Only, Icon Only. The customization options you get will depend on the type of ribbon you choose.
Ribbon Text: Input the text you want to display as the ribbon.
Text Orientation: Choose if you want to display the ribbon text horizontally or vertically.
Ribbon Text Margin: Add custom margin to the ribbon text’s container.
Ribbon Text Padding: Add custom padding to the ribbon text’s container.
Ribbon Icon: Choose the icon you want to display with the ribbon.
Icon Placement: Decide if you want to place the feature icon on the left or the right side of the ribbon.
Icon Size: Adjust the size of the ribbon icon.
Icon Color: Pick a color for the ribbon icon.
Icon Background Color: Pick a background color for the ribbon icon.
Ribbon Icon Margin: Add custom margin for the ribbon icon’s container.
Ribbon Icon Padding: Add custom padding for the ribbon icon’s container.
Ribbon Image: Upload the image you want to display with the ribbon.
Image Alt: Submit the alt text for the ribbon image.
Image Width: Adjust the width of the image.
Horizontal Position: Adjust the horizontal position of the ribbon. Doesn’t work if you chose to display the ribbon vertically.
Vertical Position: Adjust the vertical position of the ribbon. Doesn’t work if you chose to display the ribbon horizontally.
Ribbon Position: Choose the placement of the ribbon.
Enable Animation: Enable this option to animate the ribbon.

If you choose “Divider”

Line Height: Adjust the width of the divider line.
Line Color: Pick the color of the divider line.

If you choose “Button”

Button Text: Input the button text.
Button URL: Attach a link to the button.
Button Link Target: Decide if the attached link will open in a new or the same tab.
Enable Button Fullwidth: Enable this option to make the button fullwidth relative to the pricing table container.
Button Alignment: Change the horizontal placement of the button relative to the container of the pricing table.
Enable Button Badge: Toggle this option on to use a badge with the button.
Badge Text: Input the text of the badge.
Badge Position: Choose the position of the badge relative to the button.
Badge Alignment: Change the vertical placement of the badge relative to the button.
Enable Badge Animation: Toggle this option on to animate the button badge.

Note: The badge-related option will only be available if you turn on “Enable Badge.”

If you choose “Rating”

Rating Number: Submit the rating number.
Use Custom Icon: Enable this option to use custom icon for the rating instead of stars.
Rating Label: Input a label for the rating.
Icon & label Gap: Adjust the gap between the label and the rating icons.
Icon Size: Adjust the size of the rating icons.
Icon Gap: Adjust the gap between the rating icons.
Color: Pick a color for the rating icons.
Inactive Color: Pick a color for the rating icons when they are inactive.
Alignment: Change the horizontal placement of the rating icons relative to the container of the pricing table.

Link

Comes by default with Divi. No real use case.

Background

Add a background color, gradient, image, and more to the element.

Admin Label

Change the module name or label if required which will only be visible to you.