Pricing Table block lets you create pricing tables with elements like title, price, feature, and button. You can create various types of pricing tables with multiple columns to display different pricing plans.

This block also offers a wide range of customization options with both global and custom styling flexibility. More than that, it includes a right-click table management feature and over 15 free pre-made templates to streamline your design process.

In this documentation, we will cover everything, including detailed information about each element and their specific capabilities.

Pricing Table block is RioVizual’s latest addition. So make sure to update the plugin to get access to the new block.

Adding the Pricing Table Block #

• Open the post or page in your WordPress editor where you want to include a pricing table. 
• Click the “+” button, search for “Pricing Table,” and insert it.

• Choose “Build From Scratch” or start with any of the free pre-made templates.

Click on “Build From Scratch” to create a pricing table from scratch. Or, you can import a free pre-designed template by hovering over a template and clicking “Import.”

After inserting the block, you will see a pre-filled table with a block toolbar and a “Global Settings” option. Plus, when you hover over the table, you will see individual column and row settings.

The toolbar, along with the individual column and row settings, are all part of table management. Also, when you right-click any element inside the table, you will see specific management options for that element.

Alternatively, clicking on “Global Settings” will take you to the global state. That means in the settings panel, you will see global settings that apply to the entire pricing table.

We will explore the settings and available options, and discuss their use cases. Let’s begin with the table management options.

Table Management Options #

1. Block Toolbar #

In the toolbar, you will find some default options along with four unique options specifically offered by the Pricing Table block. Here is a list of those four options:

• Add Column: To create an exact copy of your selected column without its content.
• Add Element: Use this option to add a new element below the currently selected element. If your table cell is empty, the new element can be placed directly within the cell.
• Duplicate Element: To create an exact copy of your selected element.
• Delete Element: To delete any selected element from the table.

2. Right Click Menu #

When you right-click any element or cell, you will see a range of options to customize and control the table element’s behavior. The options include:

• Add Element: To add a new element under your selected element. However, if your table cell has no element, then you can add an element in the exact location where you are placing it.
• Duplicate Element: To create an exact copy of the selected element
• Move Element Before: To reposition the selected element to appear before another element within the same cell.
• Move Element After: To move the selected element to a position after another element.
• Delete Element: To remove the selected element from the table.

Note: Some options within the right-click menu may become active or inactive depending on certain conditions.

3. Individual Column and Row Settings #

To make things easier, RioVizual includes specific column and row settings options, which you can access by hovering over any column or row.

If you hover over a column, you will see options like:

• Select Column: To select an entire column for further customization or management.
• Duplicate Column: To make a duplicate copy of your selected column.
• Add Column: To add a new column beside your selected column.
• Delete Column: To delete your selected column.

On the other hand, if you look at the row settings, you will find a similar set of options specifically for rows:

• Select Row
• Duplicate Row
• Add Row
• Delete Row

Note: if you have multiple columns side by side, any modifications made through row settings will affect every column in that row.

4. Drag-and-Drop Facility #

The drag-and-drop option lets you rearrange elements within cells or move them between different cells.

Pricing Table Settings Panel #

In the settings panel, you will see three tabs: General, Style, and Advanced. Inside all of them, you will get various options to configure and customize your pricing table.

However, unlike others, the pricing table block has three exclusive features: normal, hover, and reset all styles. 

1. Normal: It’s a responsive option that allows you to customize your table specifically for different devices, such as desktops, tablets, and mobiles.
2. Hover: This feature allows you to apply a hover style for all table elements.
3. Reset All Styles: If you click this button, it will reset all the applied designs.

Now let’s talk about all three tabs and their offerings:

General #

After inserting the block, your pricing table will be in the global state, which is why you will initially only see “Column Settings” in the General tab.

However, when you click on any specific element within the pricing table, the General tab will show that element specific settings. For example, clicking on a title will reveal title-specific settings. This applies to all elements within the table.

Once you select an element, its specific settings will appear under the “Content” section within the General tab.

We will cover the settings options available for each element in detail. First, let’s explore what you’ll find in the column settings:

Column Settings #

• Column in a Row: Determine the number of columns in a row you want in your pricing table.
• Columns Gap: Set the spacing between your pricing table columns.

• Rows Gap: To adjust the spacing between the rows in your pricing table. This is useful when you have multiple pricing tables arranged one above the other.

• Columns Equal Height: Toggle this on to make columns in your pricing table the same height, even if they have different amounts of elements.
• Set Ribbon: To add a ribbon to your selected column.

Note: The “Set Ribbon” option becomes available only when you click inside any cell of the pricing table. If you enable this option, you will see the following settings:

• Ribbon Text: Enter the text you want to display on the ribbon.
• Ribbon Style: Choose from two styles
• Ribbon Position: Place the ribbon in the top right or top left corner.

Content #

As we mentioned earlier, when you click on an element within the pricing table, the General tab will display settings for that element inside “Content.”

Here are the settings you will get for each pricing table element:

For Title

If you click on the “Title”, you will get these title-related settings:

• Title: Enter your title text.
• Title Tag: Select your tag from various options.
• Show Subtitle: Toggle this on to display a subtitle under the title.
  • Subtitle: To write down your subtitle text.

For Price

Next, if you click on the “Price“, you will get these options:

• Currency: Input your currency symbol. By default, you will see a dollar symbol.
• Currency Placement: Choose the placement of the currency symbol(left or right).
• Price: Enter the price amount.
• Period: Write down the pricing period, such as year, month, or any other time frame.

For Features

Clicking on “Features”, you will these options:

• List Style Type: You can choose from 5 different styles to your feature list.
• Feature List: When you select a feature, you can modify its text and enable “Text Opacity.” The opacity option allows you to make a feature’s text partially transparent. Additionally, you can also use the duplicate and delete options for managing individual features within the list.

You can also use the “Add New” option to add a new feature to the list.

Note: You can easily rearrange the feature list by dragging and dropping the items as needed.

For Button 

For the “Button”, you will see these options:

• Button Text: Enter the text you want to display on the button.
• Link URL: Specify the URL where the button will link to when clicked.
• Additional Info: Enable this to add any additional information just below the button.
  • Add Info: To add text for additional info. 
• Open in New Tab: Enable this option to make the link open in a new tab when clicked.
• Add NoFollow Link: Enable this option if you want to discourage search engines from indexing the linked page.
• Enable Auto Text Break: Enable this option to allow the button to automatically adjust its size to accommodate the text.

In short, when you click on any element in your pricing table, you will get a specific set of settings options in the “General” tab.

Style #

Immediately after inserting the block, clicking on the “Style” tab will show you the styling options for all elements in the pricing table.

However, when you click on a specific element within the table, the “Style” tab will display styling options relevant to that element. For example, clicking on “Title” will reveal styling options specific to the title. This applies to all elements within the table.

Additionally, you will find two distinct sub-tabs for each element of the pricing table block. They are:

• Global Tab: This tab lets you apply consistent styling across the entire element. For example, if you change the cell background color in the Global tab, this will affect all cells.
• Custom Tab: Initially, there are no customization options available here. However, once you click on an element within the table, customization options for that element will appear.

Now let’s see what styling options you will get from each styling function in the “Style” tab.

Title #

• Title Style: To change title text color and typography. Inside the typography option, you will find a variety of font styles and settings.
• Subtitle Style: To change subtitle title text color and typography.
• Wrapper Style: To customize the title’s background color, border style, and alignment. You can also apply a box shadow and adjust spacing.

Price #

• Price Style: To customize the color of the price text, currency symbol, typography, currency size, and currency alignment.
• Period Style: To adjust the color, typography, and alignment of the period text (e.g., monthly, yearly).
• Wrapper Style: To modify the background, border, box shadow, spacing, and alignment of the wrapper around the pricing table.

Features #

• Items Gap: To set the gap between feature items.
• Items Color: To change the color of the feature items.
• List Type Color: To change the color of the list type markers.
• Typography: To customize the typography of the feature items, including font family, size, weight, and other text properties.
• Spacing: To adjust the top, right, bottom, and left margins of feature items.
• Alignment: To set the alignment of feature items within the list.

Button #

• Choose from filled or outline:
  • Filled: A button style with a solid background color, making it stand out more prominently.
  • Outline: A button style with a border and transparent background, giving it a more subtle, minimalistic look.
• Button Style: To adjust the button’s text color, background color, typography, border, box shadow, sizing, and spacing.
• Info Style: To customize the color and typography of the info associated with the button.
• Wrapper Style: To modify the spacing and alignment of the button’s wrapper.

Cell #

• Background: To change the background color of all cells.
• Spacing: To adjust the top, right, bottom, and left padding and margins of all cells.
• Alignment: To modify the vertical alignment of the cell content.

Column #

• Column Style: To customize the background color, border style, and spacing of all columns. You can also add box shadows to enhance the column’s appearance.
• Ribbon Style: To adjust the ribbon’s text color, background color, and typography.

As we mentioned earlier, when the pricing table is in a global state, only the “Global” tab will display styling options. And you won’t see any option in the “Custom” tab.

But, when you click on any element within the table, you will see styling options available in both the “Global” and “Custom” tabs. For example, if you select “Features” in the table, you will find styling options in the “Custom” tab.

Note: Depending on the selected element, the Global and Custom tabs may have different styling options.

Multiple Item Select and Style #

Pricing Table block enables you to style multiple items at once. For example, if you have a table with three rows and wish to modify the background color of two row titles, you can do it easily.

Simply select your desired items and apply the desired background color.

Advanced #

After inserting the block, if you click on the “Advanced” tab, you will only see “Additional CSS Class(ES) of Pricing Table.” This will let you add custom CSS classes to the entire pricing table.

But as you click on any element in the table, you will see these options:

• Additional CSS Class (ES) of Selected Element: To add custom CSS classes to your selected element within the pricing table.
• Additional CSS Class (ES) of Selected Cell: To add custom CSS classes to your selected cell within the pricing table.