How to Create a Pricing Table Page - P2 - Using Meta Box and Bricks

If your products come with multiple pricing plans rather than just one, a well-structured pricing table page is a smart way to showcase your offerings.

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 Bricks.

Here is my 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, is saved in custom fields created with Meta Box.

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, Bricks 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 piece of 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, 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.

Display the Pricing Table Page

Let’s edit the pricing table page with Bricks.

Add a Section element to cover all the content of the page. There is an available container. We’ll add some elements inside this container to display the pricing table.

Since our information is saved in a cloneable group, we need a Div element first.

Then, enable the Use query loop button. And in the Query section, choose the type of data source. This is the MB group along with the name of the group that we have created for the custom field.

Now, inside this div, just add some elements to get data from the subfields of the group.

To get the plan’s name, choose the Heading element. As the name of the plan is saved in the custom field of Meta Box, use the Dynamic data button. Then, look for the field where we store the name of the plan.

Now, you can see that the plans’ names have just been displayed.

For the plan’s price, add the Basic Text element. It’s also stored in the created custom field. So, we also use the Dynamic data button and choose the field correspondingly.

Do the same to get the plan’s description.

Turning to the features of each plan, as they are saved in the cloneable field, add another Div element. Also, enable the Use query loop button. And in the Query section, choose the type of data source as we created for the features.

Inside this div, add an element to get the feature data. I’ll display a feature with an icon. So, add an Icon Box element. Then, choose the icon as you want.

Move to the Content section, use the Dynamic data again, and choose the corresponding field to get the feature data.

Next, we want to display the button, which is to get the plan. In the first div, add a Button element. Since it is also saved in the Meta Box custom field, choose the right field to get the corresponding data. It just displays the button without any function.

I want to embed a link in this button so that users can click the button to grab the deal. Thus, in the Link type section, choose the Dynamic data option, and select the field where there is the url of the button.

We have done getting all the information of the pricing table page.

Now, view the page on the frontend, you can see all the plans with their information displayed. However, it’s just a simple list of details. We want to present it in a table format, so it's more visually appealing and allows customers to easily compare the plans and make a purchase decision.

Style the Page

To make the pricing table page look better, go back to the page editor with Bricks, and customize each element to style them in your own way.

Then, the page is updated with the new appearance.

However, there's one more thing I want to do: highlight the recommended and best-selling plan.

In the page editor again, add some classes for the container and the div as well so that we can use it for styling later.

Then, in the CSS section of the div, add these codes.

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

In there:

• .mb-pricing-container and .mb-pricing-tables: classes we added for styling;
• nth-child(2): 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 Bricks, creating a Pricing Table page becomes not only simple but also highly customizable to fit your specific needs.

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

• How to Create a Pricing Table Page - P2 - Using Meta Box and Bricks