Back to contents

JetElements: How to Create a Pricing Table

This tutorial uncovers the basic ways of working with JetElements Pricing Table widget for Elementor.

The pricing table is the most important part of any commercial website, so it has to attract attention, be informative and stylish. The Pricing Table widget within the JetElements plugin is a helpful tool, created especially for adding efficient pricing tables to Elementor-built pages. Using this widget saves your time because it has all elements you need already included. Price, features, buttons – you can add, exclude, customize, and organize them in any order.

So, let’s take a look at how it could be created.

Pricing Table settings overview

1 Step — Add the Pricing Table widget

Go to the page where you need a pricing table and open it in the Elementor page builder. Click the “Add New Section” button and then select the appropriate structure of the section. Seek for the Pricing Table widget and drop it into a new section.

Pricing table widget
NOTE. Pricing table widget creates a single column of the pricing table. To make the table creation process faster, it will be wise of you to create and style one column and then just duplicate it as many times as you need.

2 Step — Define the settings

By default, the pricing table looks like that. As you can see, it has all the necessary elements already included:

pricing table default view

Click on the widget to get access to three blocks with different settings: Content, Style, and Advanced. There are six sections in the Content block, where you can adjust the needed settings that define the widget’s content. Let’s have a closer look at each of them.

General

Pricing Table General Settings

Icon. If you want to add an icon to the header or even replace the header with an icon, you can do it here. This field allows you to choose the icon from the library or upload your own SVG image.

Icon Position. In this drop-down menu, you can choose either to place the image inside the header or outside of it. If you choose to place the icon inside the header, it will be considered as a single row. Otherwise, it will be treated separately.

Title. You can type in the title of this part of the table here.

Subtitle. If the title needs some extra explanations, type them into this bar.

Is Featured? Turn this toggle on to make this particular column of the pricing table featured. It will allow you to choose Featured Badge (by picking it from the library or downloading an SVG picture) and its exact position.

Pricing Table featured column settings

Price

Pricing Table price settings

Price Prefix. It is usually used for the currency sign.

Price Value. Here you can insert the actual price value.

Price Suffix. This bar can contain some details about the price. For example, “per month” or “/year”.

Price Description. If you need even more details about the price, then this text area is at your service.

Features

Pricing Table features settings

In this tab, you can define how many features there will be in the column of the pricing table. The number can be different for every column. If the features are listed in a separate section, you can leave only the included/excluded icons. Those icons can be chosen individually in the Included Bullet Icon and Excluded Bullet Icon fields.

single feature view in Elementor

Each feature Item has a Title that can be deleted if you want to leave the icons only. Besides that, you can choose if it should be the included or excluded icon in the Is Included? drop-down menu. Finally, you can add a tooltip that explains the feature or gives some additional information to the user. The positioning and other tooltip’s features can be defined in the Tooltip settings section.

Action Button

Pricing Table action button settings

Text Before Action Button. If you need to somehow introduce the action button, you can type the text into this bar.

Button text. That is what will be written on the button.

Button URL. Here you can insert the URL of the page where the customer will be led to after he/she clicks on the button.

Open in new window. If you want the page to open in a new window, then turn this toggle on. It is really convenient for the users, so we strongly recommend you turn it on – it will improve user experience.

Add nofollow. This toggle will add a “nofollow” tag to the URL if you turn it on.

Add Icon. If you would like to add an icon to the button, turn on this toggle. Afterward, you will be offered to choose the icon and its position.

Text After Action Button. As it is obvious from the title, here you can insert the text that will be placed after the button.

Tooltips

Pricing Table tooltips settings

Placement. In this drop-down menu, you can choose where the tooltip will appear: at the Top, to the Right, to the Left, or at the Bottom.

Trigger. This field allows you to define when the tooltip will appear: once the pointer enters the feature area or when the user clicks on it.

Animation. There are six types of tooltip appearance animation for you to choose from.

Use Arrow. If you turn this toggle on, the tooltip will have an arrow pointing at the feature it is attached to. In that case, you will be able to choose the Arrow Type and Size.

Pricing Table tooltips settings

Show Duration. The value you choose here defines how smoothly the tooltip will be appearing. The bigger it is, the longer it takes for the tooltip to appear.

Hide Duration. The same value as the Show Duration yet defining the length of tooltip hiding.

Delay. Here you can choose a time lag between the trigger run-out and tooltip appearance.

Distance. This slider helps you set the distance between the feature and the tooltip.

Fold Settings

Pricing Table fold settings

If you enable the toggle, not only all settings will appear but also an additional settings block titled Fold Button.

  • Number of Visible Items. Here you can choose how many features will be visible for the user.
  • Duration. This value defines the smoothness of unfolding and folding. The bigger it is, the slower it moves.
  • Easing. In this drop-down menu, you can choose one of nine animations for folding and unfolding.
Pricing Table fold button settings

In the Fold Button settings section, you can choose the Alignment of the button, Icon position, the Fold Icon itself, and Text that will be placed on the button.

When you are done with the settings, proceed to the Style tab, and create a breath-taking design for your Pricing Table. If you need insight, take a look at this amazing pricing table examples. Don’t forget to hit the “Publish” or “Update” button when you finish the styling.

How to change the pricing table layout

The pricing table consists of several elements: title, subtitle, features, and action button. The pricing table’s layout is the order in which all those elements are organized. JetElements Pricing table allows you to change the order the way you like.

Open the page with the pricing table, click on the widget and go to Style > Table. Scroll the settings down and you will see the Order block at the bottom. There are all the pricing table elements listed there. If you have chosen to show the icon outside the header, it will have a separate row. Every element has a bar near it where you can type in the number.  That will be a sequence number, and the elements will be sorted according to it – from 1 to 4 or 5.

Pricing Table order settings

That’s all! Now you know how to create and display WordPress pricing tables for representing products in a more attractive way.