How to add a pricing table in WordPress.

How to Add a Pricing Table in WordPress (3 Methods)

Pricing tables are useful website elements that help visitors quickly and easily compare the main differences between payment options. However, creating a WordPress pricing table for your own site requires you to either code one by hand or use a dedicated plugin.

The good news is that Beaver Builder makes it easy to add a pricing table in WordPress using either a pre-designed template, pre-built pricing table row, or pricing table module.

In this post, we’ll discuss why you may want to consider adding a pricing table to your site. Then, we’ll show you how to do this in WordPress with Beaver Builder. Let’s get started!

Why You Should Consider Adding a Pricing Table to Your Website

When you’re designing an e-commerce website, it’s important to think about features that will drive conversions. By creating a pricing table, you can allow new customers to easily compare the prices and features of your services before buying them.

For example, our Beaver Builder website includes a pricing table with various payment tiers and packages. Thanks to this table, you can clearly see what’s included in each subscription, as well as how much it costs. Once you choose a plan, you can click on the Get Started button to buy it:

New Beaver Builder Pricing 2024

A pricing table can be effective for any website with subscription tiers, like membership sites or monthly software services.

If you need to showcase a large amount of information and features, pricing tables can organize them in an easy-to-understand way. This can encourage users to buy the plan that suits their needs.

To decide whether a pricing table would be effective, consider whether you have more than one version of a product or service. If so, a pricing table would likely be helpful to provide customers with an overview of the various options and the differences between them. When you can remove any pricing confusion, you can increase conversions on your site.

How to Add a Pricing Table in WordPress (3 Methods)

Now that you’re aware of the benefits pricing tables can offer, it’s time to create one for your website. For this tutorial, we’ll be using our Beaver Builder page builder plugin. This gives you access to pre-designed templates, pre-built rows, and pricing table module!

1. Add a Beaver Builder Pricing Page Template

You can either build your pricing table from scratch using a Pricing Table module (we show you how in the last method, Customize a Pricing Table Module) or you can simply add a pre-designed page template.

With Beaver Builder, you can automatically implement this layout on a new page with just one click. Then, you can easily customize it with your specific products or services.

To get started, open WordPress and add a new page. Give your page a name and click on Launch Beaver Builder:

Launch Beaver Builder

Once the Beaver Builder editor opens, click the Templates tab in the pop-up menu. Then, choose Content Pages from the Group drop-down:

Content page templates

To find specific Pricing page templates, scroll to the bottom of the section. Here, you’ll see two different designs you can choose from:

Pricing page templates

When you find a design you like, click on it. This will automatically apply the template to the page. With either of the Pricing templates, you’ll notice a pricing module, along with customer testimonials and frequently asked questions:

Beaver Builder pricing template

Although it will include a default color palette and background image, you can easily customize these options. To do this, first, click on the Row Settings. Then, you can set a custom background as a color, video, or slideshow:

Custom pricing table background

You’re also able to add a top shape or bottom shape to the design. This can bring an engaging visual element to the pricing table:

Pricing template shape

Next, you can edit the text, font, and color of the main headings. You might want to include a brief call-to-action, like Find the perfect plan for you, to encourage users to look at the table:

Pricing table heading

Now, it’s time to start customizing the pricing table. After you select it, you can choose to emphasize either the title or prices of each product. You can also edit the border style, size, and spacing as needed:

Highlight pricing title

To edit the pricing options, click on the Pricing Boxes tab. Here, you can modify each box, reorder them, or add new ones:

Edit pricing boxes

As you can see, the advantage of using a Beaver Builder template is that it allows you to fully design your Pricing page in just a few steps.

As noted above, the page template we are working with also includes a customer testimonial and FAQ module. You can choose to delete these or, after you’ve saved your pricing table, you can scroll down the page and customze these sections to include more information about your products or services:

Edit customer testimonials

When you’re happy with how your Pricing page looks, be sure to save your changes and publish it!

2. Choose a Pre-Built Pricing Table Row

Alternatively, you may want some more variety in your pre-designed pricing table options. In this case, you can browse Beaver Builder’s pre-built rows. To get started, simply go to Rows > Prebuilt Rows > Pricing Tables:

Beaver Builder prebuilt rows

Then, you can choose from eight different pricing table designs. Once you find one you like, drag and drop it onto the page:

Pricing table rows

Similar to using a template, you’ll need to edit the heading to include information about your products. You can customize the font type, weight, size, spacing, and more:

Edit row heading

Now, you can start editing the pricing boxes. For each one, you’re able to add a custom title and price. You can also choose a monthly or yearly payment duration:

Price box settings

Next, scroll down to the Features section. Here, you’re able to edit the current options and add new ones as needed. To ensure that customers understand your pricing table, it’s a good idea to only include the main features that will differentiate each tier:

Pricing table features

Additionally, keep in mind that you can add HTML markup to any text box. For example, if you want to include green checkmarks next to each feature, you can paste this bit of code instead of text:

<i class="fa fa-check" style="font-size:20px; color: #7AC943;"></i> <strong> 1 Year Support 

Here’s how that HTML code would look on the front-end:

HTML markup

In the Button tab, you can add a new call-to-action. Additionally, if you want to allow users to purchase that plan, just paste a link to the checkout page:

Pricing action button

Based on the pre-built row you chose, there will be a default color scheme, but you can adjust this to fit your brand. Under Style, edit the box’s border and foreground color. You can also add an accent color for the boxes and text:

Pricing box colors

After you finish customizing the row, save your changes.

3. Customize a Pricing Table Module

As another option, you may want to build a custom pricing table from scratch. This can give you full control over each box’s design and functionality. This is also a good choice if you want to add a pricing table to a pre-existing page (without including the customer testimonial or FAQ sections we saw in the template).

With Beaver Builder, you can add a Pricing Table module to any post or page and then customize it from the ground up. First, open the Modules tab and find the Pricing Table option. Then, you can drag and drop it anywhere:

Beaver Builder Pricing Table module

Unlike with a template or pre-built row, you’ll have to add pricing boxes yourself. You can simply click on Add Pricing Box as many times as you need:

Beaver Builder Pricing Table module create pricing boxes

Next, select Edit Pricing Box. In the General settings, give the box a title and add a price and payment duration. You can also choose whether you wish to show a Ribbon. In this example, the ribbon is displayed on the top right of the most popular pricing option:

Beaver Builder Pricing Table module add pricing box general settings

Instead of having fixed prices, you can even display a discount. This may motivate customers to purchase items more quickly. To do this, you can add this HTML markup to the Price value:

<s>$99</s> <span style="color:red;";>$79</span>

Now, you can scroll down to the Features section. Here, add specific details for each pricing tier. Click the drill down arrow to show more options including a Feature Icon, Feature Icon Color, and Tooltip:

Beaver Builder Pricing Table module price features

Note that you can click the Copy icon in the upper right corner to duplicate the Price Features 1 so that you don’t have to recreate the settings for each new feature.

Once you have finished adding the features for this pricing box, you are ready to move on to the Button tab. Here you can add a custom call-to-action with a link to your product. You might also consider including a button icon and customizing further with your brand colors:

Beaver Builder pricing box button settings

Lastly, click on the Style tab. This enables you to set a color scheme for each box:

Beaver Builder Pricing Box style settings

Repeat this process for each box in your pricing table. Then, you can continue to edit the settings for the entire table.

From the Pricing Boxes tab, scroll down to the General section and select Yes to enable dual billing. This adds a switch to toggle between two billing options such as Monthly and Yearly:

Beaver Builder Pricing Table module enable dual billing

Next, click on the Style tab. Here, you’re able to adjust the overall style of the Pricing Table module. For example, if you have an uneven number of features in each box, you can set the Column Height to Equalize. This will normalize the boxes to have the same height as the largest column:

Beaver Builder Pricing Table module set column height

Like any other Beaver Builder module, there will be Advanced settings too. You can use these to set custom margins, animations, HTML elements, and visibility if needed.

Click Save to save the changes to your Pricing Table module. Now, you can click on the Row Settings. Here, you can adjust the width and height of the entire pricing table module. You can also change the text and link color:

Beaver Builder pricing row settings

Then, you can customize the background with a solid color, gradient, photo, video, embedded code, slideshow, or parallax. You can also add an overlay color or shapes to the background. In this example, we will keep it simple so that the pricing table takes center stage:

Beaver Builder pricing row background

After this, you’ll have a well-designed pricing table for your website!

Conclusion

If you don’t properly showcase prices on a website, it can be challenging to turn online visitors into conversions. With a pricing table, you’re able to display your products’ main features and price differences. This can motivate potential customers to compare each option and feel confident that they’re purchasing the right one for their needs.

To review, here are the three ways you can add a pricing table in WordPress with Beaver Builder:

  1. Add a pre-designed pricing page template.
  2. Choose a pre-built pricing table row.
  3. Customize a Pricing Table module.

Related Questions

What Information Should I Include in a Pricing Table?

As a general rule, pricing tables should highlight the main services or products that you provide. Inside each box, customers should be able to see pricing, main features, and a call-to-action button. You can also include any of your website’s current discounts.

How Else Can I Increase Conversions on My Website?

A pricing table can be an effective way to motivate visitors to buy your products. However, you should also make sure your pages are loading quickly and mobile-friendly. If you’re optimizing a client’s website, consider performing A/B split testing to target high-converting features.

About Will Morris

Will Morris is a staff writer at WordCandy. When he's not writing about WordPress, he likes to gig his stand-up comedy routine on the local circuit.

Our Newsletter

Our newsletter is personally written and sent out about once a month. It's not the least bit annoying or spammy.
We promise.

Try Beaver Builder Today

It would be totally gnaw-some if you could share this post with your friends.

Related articles

Websites Built With Beaver Builder

When it comes to designing a website, exploring websites built with Beaver Builder can provide valuable inspiration for your own…

Read More...

Assistant’s New Code App: Easily Manage Code Snippets in WordPress

In the world of WordPress development, having the right tools can make all the difference. That’s why we’re excited to…

Read More...
Beaver Builder North Commerce module

North Commerce Module for Beaver Builder

With all the excitement surrounding Beaver Builder 2.8 and our new Box Module, you might have missed the announcement of…

Read More...

Join the community

We're here for you

There's a thriving community of builders and we'd love for you to join us. Come by and show off a project, network, or ask a question.

Since 2014

Build Your Website in Minutes, Not Months

Join Over 1 Million+ Websites Powered By Beaver Builder.