If you use your website to market your services or products then displaying the pricing plans you offer is crucial. Elementor, the most popular WordPress page builder plugin, comes with a Price Table widget that you can use to effortlessly add a pricing table to a page or template. In this article, we will show you to use the widget.
The Price Table widget itself is only available on Elementor. So, to be able to use it, you need to use Elementor Pro. If you are new to Elementor, you can read our previous article to learn how to use Elementor. In this post, we will go straight to adding the Price Table widget to the canvas area.
There are two options to a add pricing table to an Elementor page or template. First, you can use a premade block template. Second, you can create the table yourself. From scratch.
Adding the pricing table from a premade block template
Elementor offers about 14 pricing table block templates you can choose from. Again, you need to use Elementor Pro in order to use the templates as the Price Table table is only available on Elementor Pro. To use a pricing table block template, click the folder icon on the canvas area to open the template library.
On the appearing template library, click the Blocks tab and select Pricing on the dropdown menu to filter the pricing table block templates. Select a template you like and click the INSERT button to import it to the Elementor editor.
You can then go to the left panel to edit the default content of the tables.
Adding the pricing table from scratch
If you have your own design concept for the pricing table you want to add then creating the tables from scratch is a great idea. To ease your job, you can create a table. Once you are done with it, you can copy it and tailor the content of the duplicated tables. This will save you a lot of time.
Start by adding a new section and select a column structure according to the number of tables you want to create and drag the Price Table to one of the columns.
Go to the left panel to edit the default content. You can edit the content on the Content tab. There are 5 setting blocks you can open to edit the content: Header, Pricing, Features, Footer, and Ribbon.
You can open this block to edit the content of the header of the table. You can edit the title on the Title field and description on the Description field. Ideally, you use the header section of the table to add the package name.
You can open this block to edit the price of the package. You can enable the Sale option if the package is being on sale. If you have knowledge about WordPress custom fields, you can also add a dynamic price by clicking the database icon on the Price field.
You can open this block to add the features you want to offer on the package. By default, you have three features. You can open a feature to edit it. To add a new feature, you can simply click the ADD ITEM button. By default, each feature has a checklist icon. To change the icon, simply click the icon. To remove it, simply click the trash can icon.
Footer is the section where you can add a link and a call-to-action button of the table. You can also add additional information to this section.
You can add a sale label something like “SALE”, “SPECIAL”, “HOT OFFER” to your table. If you want to add a sale label — or any label of your choice — you can open the Ribbon block and enable the Show option. You can add your preferred label on the Title field and set the position on the Position option.
Styling up the table
To style up the components of the label, you can switch to the Style on the left panel. You will also see five setting blocks on this tab.
- Header: You can open this block to style the header section of the table. You can set things like header background, typography (font family, font size, font style) of the title and description, and text color of the title and description.
- Pricing: You can open this block to style up the price section. You can set things like background color, typography, text color, currency symbol and position, and so on.
- Features: You can open this block to style up the features section. You can set things like the background, text color, typography, alignment, enable/disable divider, and so on.
- Footer: You can open this block to style up the footer section. You can set things like the background, button size, button color, the typography of the button text, and so on.
- Ribbon: This block will only appear if you enable the Ribbon option under the Content tab. You can open this block to style up the ribbon such as the color, text color, and typography.
Once you are done with the first table, you can copy it to other columns and then replace the content according to the features you want to offer on each table/plan. To copy the table, right-click the widget handle and select Copy and then right-click on the column where you want to paste it and select Paste.
The bottom line
Elementor Pro comes with a Price Table widget to make it easy for you to add a pricing table to a page or template. Some add-ons — such as Happy Addons, Essential Addons, and JetElements — also have the same widgets with different styling options.