How to Create a Pricing Table Page - P1 - Using Meta Box and Breakdance

When your products have some pricing plans instead of only one, a well-designed pricing table page will be an intelligent choice to show offering your products or services.

You can also separate the pricing table into a dedicated page or make it to be a section of any page. It’s a piece of cake with the help of a combination of Meta Box and Breakdance.

I have a pricing table page as an example:

Video Version

Before Getting Started

All the information about each plan such as title, price, description, features, and even the call-to-action button are saved in custom fields created with Meta Box.

Then, we’ll use Breakdance to display them on the page.

So, first, you need the Meta Box plugin to have the framework to create custom fields. You can download it directly from wordpress.org.

You may also need some advanced features from Meta Box extensions. You can install those extensions individually, or use Meta Box AIO to have them all.

These are the extensions you should have:

• Meta Box Builder: to have a UI on the backend to create custom fields visually;
• Meta Box Group: to organize custom fields into the groups for plans.

Last, Breakdance to build the pricing table page.

That’s all. Let’s start now.

Create a New Page

We’ll display the pricing table on a separate page. So, we need to create it first.

Go to Pages, and create a new one.

I leave it blank since all the content will be put in custom fields that I’ll create in the next step.

Create Custom Fields

As I mentioned before, we’ll use custom fields to store every single information about the plans on the pricing page.

All the plans will be grouped and have the same layout and structure with name, price, description, features, and button to get it, just the content is different. So, you may use the cloneable feature for them.

Go to Meta Box > Custom Fields, and create a new field group.

First, add a Group field.

Inside the group, add subfields following the structure you want.

For the features, I also put them into a group for easier management. So, add a Group field as well.

Also, add a subfield for it.

I set it collapsible, and set the title for the group as well. In this case, I simply set it based on the order number.

Since each plan has more than one feature, I set this subgroup as cloneable to add more items.

And, add two fields for the label and URL of the button.

For the group of the plan, we also set it as collapsible. Then, the titles for them can be based on the order number and the plan name or anything you want.

As well as, make the group of the plans cloneable to add more than one plan on your pricing table page.

After having all the fields and essential settings, move to the Settings tab, choose Location as Post type, and select Page. To apply the fields to the page you want, go to the Advanced location rules section and choose your created page.

Then, in the page editor, you will see all of the custom fields.

Just enter information for each plan, and click on the + Add more button to add other plans.

Create Global Blocks to Display Content from Cloneable Groups

Before building the pricing page with Breakdance, we should create a global block to display the information and set the layout for each cloneable field or cloneable group first. We have two cloneable groups in this practice: one is for the plans, and one is for the features. So, let’s create global blocks for each of them one by one.

Create a Global Block for the Features

Go to Global Blocks in Breakdance, and create a new global block for the features.

Add a Div element to cover the block.

I’ll display a feature with an icon like this. So, add an Icon List element.

Because the features are saved in the custom fields created with Meta Box, we should insert dynamic data from the field to this element via a small icon like the below image.

After clicking on it, look for the Metabox section, and the name of the field that we use to save the feature.

You also can change the icon as you want.

Create a Global Block for the Plans

We’ll create another global block for the pricing plans in the same way.

Just add the corresponding element to get and display one by one. Also, use the dynamic data button to connect elements to the custom fields.

For the features, we have created a global block for it. So, add a Repeater Field element.

Then, select the created block in the Global Block section.

And, in the Field tab, choose the name of the field group that we used for the features.

As you can see, all the features display immediately.

For the button, add a Button element.

Connect the label and URL of the button to the corresponding fields.

That’s done.

Next, we’ll display them on the pricing page.

Display the Pricing Table Page

Edit the page with Breakdance.

Add a Section element to cover the Pricing section.

Then, add a Div element. It’ll include the plans.

The plans are saved in the cloneable field. So, add a Repeater Field element.

And choose the global block that we created for it in the previous step.

Also, select the corresponding group.

Now, view the page on the frontend, you can see all the plans with their information displayed.

But, you also can see that we should modify this page to have a better look for it.

Style the Page

To make the pricing table page look better, we’ll style each of the global blocks first.

Edit the block in Breakdance, and, style each element in the Style and Advanced tabs.

You should style all of the global blocks you have to have the desired appearance.

The block for each plan looks good now, we should go to the page and style the page layout a little bit more.

Then, the page will be updated with the new look as you set. This is our page after styling.

That’s done for displaying the pricing table page.

However, to help customers save time considering and make it easier to finalize their purchase, you should highlight the recommended and best-selling plan.

Back to the global block of the plan, and move to the Advanced tab.

In the Advanced section, I create a new class for the plan. It will be used to add code to emphasize a plan.

Then, in the Custom CSS box, add these codes:

article:nth-child(2) > .mb-pricing-tables{
    border: 5px solid #ef7a37;
    transform: scale(1.1);
}

In there:

• article:nth-child(2) > .mb-pricing-tables{: is to define which item is chosen among clones of the mb-pricing-tables class. In this practice, I choose (2) the second item for demonstration purposes. You can change this order number as you want.
• transform: scale(1.1): is to zoom it in to bring attention to it. You also can change the number or skip it.

And, this is the final look of my pricing page.

Somedays, when you want to change the price of a plan, or add features, or something else, just change the content in the custom fields. All the data on this pricing table page is dynamic.

Last Words

With Meta Box and Breakdance, creating a Pricing Table page becomes not only simple but also highly customizable to fit your specific needs. Meta Box allows you to manage and customize your data effortlessly, while Breakdance helps you design a visually appealing and user-friendly interface.

Take advantage of the powerful customization features of these two tools to build professional, attractive, and brand-aligned pricing tables.

We have had tutorials about how to create dynamic landing pages including pricing section and other information. We hope that they’re useful for you.

If you have any questions or run into any issues during the process, feel free to leave a comment below. Thanks for reading!