How to Create a Beautiful Pricing Table in WordPress for Free Using Elementor

Last updated on
Feb 17, 2024

If you use your WordPress site to sell product or service, then you need to create a decent pricing table to attract your prospective buyers. A better-looking pricing table can increase the chance your product/service to get bought. Elementor allows you to create a beautiful pricing table on your WordPress site.

Elementor itself is a page builder plugin for WordPress. It is a multi-use page builder with an extensive use. Elementor provides page templates to allow you create a beautiful web page in WordPress effortlessly. You can read our review about this plugin on this post.

Elementor offers a bunch of elements you can add to the page you are creating. This plugin supports add-ons to allow third party developers to create Elementor elements. One of the elements offered by Elementor is pricing table. However, this element is only available on the pro version of Elementor. Even so, you can still create a beautiful pricing table using Elementor for free using Essential Addons for Elementor. This Elementor add-on offers pricing table element which you can use for free.

Creating a pricing table in WordPress using Elementor

First and foremost, you need to install both, Elementor and Essential Addons for Elementor on your WordPress site. If you are new to WordPress, you can read our guide here on how to install a WordPress plugin.

Once you have installed those two plugins, follow the steps below to start creating a pricing table in WordPress for free.

  • Create a new page by going to Pages -> Add New.
  • Give your page a title and click the Edit with Elementor button which lies right above the editor.
  • Add a new section by clicking the plus button on the Elementor editor and select a content structure. Tailor the structure with the amount of columns of your pricing table. For instance, if you have three pricing plans, choose a structure with 3 columns.
  • Click the first column and look for the pricing table element (EA Pricing Table) on the ESSENTIAL ADDONS section on the left panel. Drag it to the first column.
Click to enlarge

Editing the content of the table

Go to the left panel to tailor the content. You can edit content on the Content tab. To change the title, click the Settings section. To check the price, go to the Price section. To change the features, go to the Feature section.

Editing the content of the table

As just mentioned above, to edit the content of the table you can go to the Feature section on the Content tab. To add a new item, you can click the ADD ITEM button. This will create a new item with a default content. You can change the default content on the List Item section. You can also change list icon (or disable) on the List Icon section.

Editing the botton

To edit the button, you can go to the Footer section, still on the Content tab. Here, you can change the button text or add a link to order page. You can also add an icon to the button.

If you want to add a ribbon to your table, you can go to the Ribbon section.

Editing the table style

To edit the style of the table, you can switch to the Style tab. Here, you can do such things as changing the font color of the header, changing the button color, changing the table background, changing font style of the content and so on.

Advanced settings

If you want to make some advanced settings, you can go the Advanced tab. Here, you can do such things as applying motion effect to your table, setting the margin of the table, adding custom CSS and so on.

Final steps

Once you are done with the first column, you can repeat the steps above on the second column and the third column. To save you time, you copy the copy the first column and edit the the content.

Before publishing your page, you might want to change the page layout. Elementor offers three page layouts.

  • Default: Default page layout from your theme. This layout contains header, footer and sidebar according to the current theme you use.
  • Elementor Canvas: No header, no footer, no sidebar. Just Elementor.
  • Elementor Full Width: Similar to Elementor Canvas but includes header and footer.

To change the page layout, click the gear icon on the bottom the left panel. Select the page layout from the dropdown menu on the Page Layout section.

To publish your page, click the PUBLISH button which lies on the bottom of the left panel.

This page may contain affiliate links, which help support the project. Read our affiliate disclosure.

Editorial Staff

Want to turn your WordPress knowledge into a passive income machine?