How to Create a Pricing Table Page - P4 - Using Meta Box and Elementor

Continuing our series on creating a pricing page, this article will cover in detail how to build one using the combination of Meta Box and Elementor. If your product offers multiple pricing plans, this tutorial will help you create a clear and well-structured pricing page.

This is my pricing table page as an example:

Video Version

Before Getting Started

All the information of the pricing table, including the plan, pricing, description, features, and button, will be saved in custom fields created with Meta Box. Thanks to that, the data will be dynamic. And the page is built by Elementor. So, these are some tools in this practice:

First, we need Meta Box AIO to have a framework to create custom fields and extensions for advanced features:

• MB Builder: to have a UI in the backend to create custom fields visually;
• MB Group: to organize custom fields into robust and intense groups;
• MB Elementor Integrator: to get data from Meta Box’s custom fields, using dynamic tags of Elementor.

And, Elementor and its pro version to build the page.

Now, let’s start.

Create a New Page

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

Simply go to Pages, and create a new one.

For the page content, we’ll add it through custom fields created with Meta Box in the next step.

Create Custom Fields

We’ll use custom fields to store the plan information to have dynamic and flexible content for the pricing table page.

Each plan is a group. As you can see, they have the same layout with name, price, description, features, and buttons. Just the content is different. So, we’ll use the cloneable feature for them.

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

First, add a Group field for the plan.

Inside the group, add some subfields following the layout of content you want for your own plan. These are subfields in my case:

There, I use a group to store the features' content for easier management. For this subgroup setting, I set it as collapsible, then named each item based on the order.

Each plan has more than one feature, so the group should be cloneable.

For the group of the plan, we set it as collapsible as well. The name of each group can be based on the order number and plan title for distinguishing.

A product usually has several packages for buyers with diverse options. Thus, I enable the cloneable option to add more than one plan.

In the case that you want to display other information, just add the respective field types.

After having all the fields with reasonable settings, move to the Settings tab, set the Location as Post type, and select Page. To apply the fields to the specific page you want, click on the Advanced location rules section below, and select your created page.

Now, go to the page, you can see all the created custom fields ready. Just input data for each plan.

Create Skins

We have two cloneable groups: one for the features, and another for the plan. However, Elementor does not support directly displaying data from them on a template. We should create a skin for them first.

Go to Template > Theme Builder. There will be the Meta Box Group Skin menu. Click on it and add a new skin.

Skin for Features

Move to the Setting tab to set the name and location of the skin for preview. We start with the group of features.

In the Preview Settings section, choose Page, and select the pricing table page.

Now, add a Section element to cover the feature.

Then choose the layout for the feature you want. Since I want to have an icon at the beginning of the feature content, I choose a suitable layout.

Just add some elements to this skin.

In the first column, add an Icon element.

Then, click on the Icon Library button to select the icon from the library.

For the remaining column, add a Text Editor element.

Since the data is saved in custom fields created with Meta Box, click the Dynamic Tags button. And choose Meta Box Field in the Post section.

Then, choose the name of the field you want to get data from. In my case, it’s Item. The data will be displayed with the content you input.

Skin for Plans

For the skin of the plan, do the same.

Also, add a section to cover the plan.

The concept here is we’ll add the suitable elements, then use the Dynamic Tags button to get data for the element from Meta Box custom fields.

First, for the plan name, add a Heading element.

Click on the dynamic tags icon, and select the Meta Box Field.

Then choose the right field to get data from.

To display the price, add a Text Editor element.

Also, click on the dynamic tag icon to get dynamic data and choose the corresponding field.

Do the same with the description.

There is a slight difference for the feature. It’s saved in the group, and we’ve had a skin for it. Therefore, add the Meta Box Group element to get the data from that skin.

The feature is a subgroup in the Plan group. You should set the Type of the element as Sub-group. Then, choose the group name and the created skin for the feature.

Immediately, all the features, along with the content and layout displayed as we set before.

The last one is the button. Add a Button element.

Also, use dynamic tags to get data for the button’s label and its URL.

After getting and displaying all the data, we’ll set the condition for the template. The skin will be applied to the pricing table page, so set the condition as below:

Create a Template for the Pricing Table Page

We have had the page for the pricing table. So just edit it with Elementor.

Add a section to cover the page.

If you want to have any additional content, just add a reasonable element. For demonstration purposes, I’ll display plans without any other content.

The plan information is saved in the cloneable group as well. So, add a Meta Box Group element.

Set the Group as the name of the plan group, and select the corresponding skin.

All the plans, along with their information, were displayed.

This is the pricing table page on the frontend.

But you need to modify the page to make it more beautiful and attractive.

Let’s move to the next step.

Style the Pricing Table Page

To change the look of the page, we’ll style each skin on it, then the page template will be updated with the new appearance.

Edit the created skins one by one. Just go to the Style tab and Advanced tab of each element, and change the settings as you want.

Now, our page is better.

But it’s not the end. Besides the information about pricing, I also want to highlight the best-selling and recommended plan.

Back to the skin for the plan. Move to the Advanced tab to create a class for highlights later.

Then, in the Custom CSS tab, add this code:

div.mbei-group:nth-of-type(2) .mb-pricing-tables {
    border: 5px solid #EF7A37;
    transform: scale(1.1);
}

In there:

• mb-pricing-tables: is the class we created for the plan.
• nth-of-type(2): is to regulate which clone of the group will be emphasized. Here, it’s the second.
• transform: scale(1.1): is to zoom the spotlight plan in to attract attention.

That’s done.

And, this is the final look of the pricing table 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 Elementor, 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 - P1 - Using Meta Box and Breakdance
• How to Create a Pricing Table Page - P2 - Using Meta Box and Bricks
• How to Create a Pricing Table Page - P3 - Using MB Views
• How to Create a Pricing Table Page - P4 - Using Meta Box and Elementor