---
title: "How to Add a Pricing Table in WordPress?"
url: https://nexterwp.com/docs/add-a-pricing-table-in-wordpress/
date: 2024-12-10
modified: 2026-04-14
author: "Aditya Sharma"
description: "A well-designed pricing table not only enhances the visual appeal of your website but also simplifies the decision-making process for potential buyers by clearly outlining the features and costs associated..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Pricing-Table-in-WordPress_-1024x519.jpg
word_count: 1136
---

# How to Add a Pricing Table in WordPress?

## Key Takeaways

- Nexter Blocks Pricing Table block adds pricing tables to a WordPress website and requires the default WordPress Block editor plus the Nexter Blocks plugin to be active.
- Nexter → Blocks lets the Pricing Table block be activated by searching for Pricing Table and turning on the toggle, and the block is Freemium with extra features in the PRO version of Nexter Blocks.
- Pricing Table block offers Multiple Layout, Previous Price, Ribbon, Tooltip (Pro), Show More Options, and Scale Effect (Pro) for highlighting a pricing table.
- Pricing Table block supports Design from Scratch or Import Pre-Designed Template, plus separate controls for Title Area, Price Area, Content Area, Button, Call to Action, and Ribbon.

A well-designed pricing table not only enhances the visual appeal of your website but also simplifies the decision-making process for potential buyers by clearly outlining the features and costs associated with each option.

With the Pricing Table block from Nexter Blocks, you can easily add beautiful pricing tables to your WordPress website.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-pricing-table/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- Make sure the Pricing Table block is activated, to verify this visit Nexter → Blocks → and Search for Pricing Table and activate.

- This is a Freemium block, to unlock the extra features, you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

## Learn via Video Tutorial

https://www.youtube.com/watch?v=RCmNUbEATzo&t

## How to activate the Pricing Table Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block name** **and** turn on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/12/pricing-table-activate-new-1.png)

## Key Features

- **Multiple Layout** - You can select from multiple predesigned layouts (free and pro).

- **Previous Price** - You can easily show a previous price in the pricing table.

- **Ribbon **- You can easily [add a ribbon tag to highlight a pricing table](https://nexterwp.com/docs/add-a-ribbon-to-a-wordpress-pricing-table-recommended-popular-tag/).

- **Tooltip** (Pro) - You can [add a tooltip to a pricing table content](https://nexterwp.com/docs/add-a-tooltip-to-a-wordpress-pricing-table/).

- **Show More Options** - You can easily limit the initial content by [adding a show more option to a pricing table](https://nexterwp.com/docs/add-a-show-more-button-for-features-in-wordpress-pricing-table/).

- **Scale Effect** (Pro) - You can easily [add a zoom effect to highlight a pricing table](https://nexterwp.com/docs/highlight-a-pricing-plan-with-scale-effect-in-wordpress/).

## How to Use the Pricing Table Block?

Add the Pricing Table block to the page.

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2024/12/pricing-table-design-type-1024x190.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

### Style

From the **Layout** section, you can select a pre-defined style (free and pro) for the pricing table.

![](https://nexterwp.com/wp-content/uploads/2024/12/pricing-table-layout-new.png)

### Title Area

From the **Title Layout **dropdown, you can select a style for the title.

You can edit the title from the **Title** field.

In the **Subtitle** field, you can add a subtitle.

Then from the **Icon Type** section, you can add an icon, image or SVG above the title in the pricing table.

- **None** - To add nothing above the title.

- **Icon** - To add an icon from different icon libraries.

- **Image** - To add an image above the title.

- **SVG** - To add a custom SVG image above the title.

From the **Alignment** section, you can align the title.

### Price Area

From the **Price Layout** section, you can select a pre-defined style (free and pro) of the price text.

![](https://nexterwp.com/wp-content/uploads/2024/12/pricing-table-price-area-new.png)

In the **Prefix Text** field, you can add a currency symbol or any text before the price amount. 

Then in the **Price Amount** field, you have to add the actual price.

You can add a text after the price in the **Postfix Text** field. Ideal for adding the frequency of the payment like per month, per year etc.

### Previous Price

By enabling the **Display Previous Price** toggle, you can add a previous price, ideal for showing the differences between the old and new prices.

![](https://nexterwp.com/wp-content/uploads/2024/12/pricing-table-previous-price-new.png)

Similar to the Price Area tab, you can add a prefix text, price and postfix text in the **Prefix Text**, **Price Amount** and **Postfix Text** fields.

### Content Area

In this tab, you have to add the pricing table content.

From the **Content Type** section, you have to select how you want to add the content. Here you’ll find two options - 

- **Text Content** - With this option, you’ll find a text editor to add the content.

- **Stylish List** - With this option, you can add content using repeater items.

> *Note: For each option, you’ll find two pre-defined styles for the content section. *

Select the option as per your requirements. Let’s select Stylish List here.

> *Note: You’ll find extra options with the Stylish List option.*

You can select a pre-defined style from the **Price Layout** section.

Then you’ll find three repeater items by default under the Features section, open one item.

In the **List Description** section, you can add the description.

From the **Select Icon** section, you can select the icon library and add an icon to the description list item.

Then, from the **Icon Color** section, you can change the icon color for normal and hover states.

By enabling the **Tooltip Options** (Pro) toggle, you can [add a tooltip to the list item](https://nexterwp.com/docs/add-a-tooltip-to-a-wordpress-pricing-table/).

You can also add an extra icon to the content item by enabling the **Extra Icon** toggle.

Following this process you can edit the other repeater items.

You can click on the **+ Add Features** button to add more items.

From the **Read More Toggle**, you can limit the initial item visibility by [adding a show-all option](https://nexterwp.com/docs/add-a-show-more-button-for-features-in-wordpress-pricing-table/).

### Button

By enabling the **Button** toggle, you can add a button to the pricing table.

![](https://nexterwp.com/wp-content/uploads/2024/12/pricing-table-button-new.png)

From the **Style** section, you can select a pre-defined style.

In the **Button Text** field, you can add the button text.

You can add a link to the button in the **Button Link** field.

> *Note: The icon related options are available for Style 2 only.*

From the **Icon Type** section, you can add an icon to the button. 

Then, from the **Icon Position** section, you can place the icon before or after the button text.

You can adjust the icon spacing size from the **Icon Spacing** and **Icon Size** sections.

### Call to Action

From the **Content** field, you can add a call to action content below the button.

![](https://nexterwp.com/wp-content/uploads/2024/12/pricing-table-call-to-action-new.png)

### Ribbon

By enabling the **Display Ribbon** toggle, you can [add a ribbon to the pricing table](https://nexterwp.com/docs/add-a-ribbon-to-a-wordpress-pricing-table-recommended-popular-tag/).

![](https://nexterwp.com/wp-content/uploads/2024/12/pricing-table-ribbon-new.png)

> *Note: This will only add one pricing table item, to create multiple pricing table items you have to use the Pricing Table widget multiple times.*

## How to Style the Pricing Table Block?

To style the Pricing Table block, you’ll find all options in the Style tab.

**Title Area** - From here, you can style the title.

![](https://nexterwp.com/wp-content/uploads/2024/12/pricing-table-style-tab-new.png)

**Previous Price Style** - From here, you can style the previous price text. 

**Price Area** - From here, you can style the price text.

**Content Area** - From here, you can style the pricing table description text.

**Content Background** - From here, you can style the pricing table description area.

**Tooltip Options** (Pro) - From here, you can style the tooltip.

**Button** - You’ll see this tab, only when the button toggle is enabled. From here, you can style the button.

**Ribbon** - You’ll see this tab, only when the ribbon toggle is enabled. From here, you can style the ribbon.

**Background Options** - From here, you can style the pricing table background for normal and hover states, add different hover animations and more.

**Extra Options** (Pro) - From here, you can add a zoom effect to highlight a pricing plan.

Advanced options remain common for all our blocks, you can explore all it options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)