How to Add a Pricing List in WordPress
For a variety of people and organizations who use their websites to drum up business, displaying prices on their websites is not something they can forego. If you’re not running an online store but still want to let people know your prices, there’s only one good way to show them – using a pricing list.
Some WordPress themes come with a pricing list shortcode. If that’s the case with your theme – great, all you need to do is add the shortcode to a page. But if you just so happen to find a WordPress theme that’s perfect in all aspects except the one – it doesn’t have a pricing list – what should you do?
You’ll use a plugin to add a pricing list, of course.
To that end, we’ve created the QI Addons for Elementor plugin. It’s a free collection of 60 widgets and elements you can use with the popular Elementor page builder to expand its capabilities and express yourself in new and exciting ways on your website. One of the widgets included with the plugin is the pricing list widget – just the thing you need to add wonderful pricing lists to your WordPress website.
In this article, we’ll show you how to build a three-column pricing list using the pricing list widget. If you prefer watching videos over reading articles, we’ve also created a video covering the same ground.
So choose your favorite medium, sit back, and prepare to get inspired into creating some awesome lists of your own!
QI Addons for Elementor is, as its name says, a plugin that works with Elementor. To use it to add a pricing list to your WordPress website, you’ll need to get the Elementor website builder first. If you need to brush up on your Elementor skills, don’t worry – we have a handy guide ready for you.
For the next step, you should add the plugin. From your website’s back end, head over to Plugins > Add New, search for QI Addons for Elementor, and install and activate the plugin once you’ve found it. If you’d try to edit a page or post using Elementor, you’d notice a whole new section of elements and widgets in the elements panel.
So if you’ve created a new page or post, you might want to choose the number of columns in your first section as the first step. We chose three because we were building a three-column list. You can add fewer or more, whatever you like.
Next, you can either scroll through the widgets to find the pricing list one, or you can simply type in “pricing list” in the elements search bar – a quicker choice. Once the pricing list widget is found, simply dragging it to a free column should get you started on creating a pricing list.
What’s important to remember is that when you’re creating a multicolumn-list, creating one column, doing the basic edits on it, and then copying it is a great way to preserve some of the minute settings such as margins and paddings. That’s the strategy we’ve implemented going forward.
The widget lets you edit the content and style its looks from two different panels, and first, we’ve focused on editing the content. When you open the Content tab, it shows you the General options – the place where you choose the layout, add or remove the items, and edit the contents and – to some extent – the appearance of the items.
What we’ve done here is chosen the standard layout and used the “+Add Item” button to add a new item to the list. If it suits your needs better, you can also remove an item, or add two more items, or even use the image-first layout for a different initial look.
When you click on any individual item in the left panel, a new set of options opens up, letting you edit that item.
The options include giving it a name, an image, a description, the price, and the price with a discount. There’s also a color chooser option for the title and the price – it can come in very handy if you want to have item titles and prices in different colors, or if you just need to make some of them stand out. However, there’s also an option to change all of the colors, at once, in the Style bar.
For our list, we’ve decided to name the four items we have here, shorten their description, remove the image, and add prices.
Moving on to the Button and the Button Icon options. Besides the options to change the layout of the button, the button text underline, and the size of the button, you’ll have plenty of ways to customize how the button looks.
We’ve chosen to stick with the default layout, ignore the type and underline options, and we chose the normal size. We’ve changed the button text and we’ve used a hashtag in the Button Link field to leave the user on the same page. You can link the button to any page you want and choose how you want the page to open using the Target option.
For the final touch, you can head over to the button icon options and choose an icon that will appear in the button. There’s an option to either upload it or choose one from the icon library – we’ve opted for the latter and picked the “angle right” icon. The final option lets you choose the icon’s position – and we’ve chosen ours to be on the right of the text.
With our content ready, we can head over to the Style tab and start changing the look of our Pricing List. The very first option you’ll come across lets you choose the title tag as defined by the theme you’re using. We’ve stuck with the default one. The more interesting options are the color and typography options you can set for the title and the description.
We’ve made two changes in the Style options. We used the #df9a9a color for the title, and #1e1e1e for the description. You are free to use any color you want in your pricing list.
Under Price Style, the color and typography options are pretty much the same as in the Style options, with the addition of choosing the background color for the price and setting its padding and border-radius. We’ve changed the color to match the color of the title. We’ve also boosted the size of the lettering to 20 pixels, and its weight to 500 – we wanted to help it stand out.
If you’re looking to customize how the line between the item and the price looks, Content Style is where you’re able to do it. You’ll also be able to use options such as line thickness and margins to affect the prominence and spacing of various elements. The adjustments we’ve made in this section include changing the line color to #e1e1e1 and the description margin top to 5.
The General Style option is where you can adjust the space between the items, as well as the space between the final item on the list and the button. We’ve done both – changed the item spacing to 30 pixels, and the button margin top to 60.
You might enable the items separator if you want – we won’t. If you do, you’ll get some additional options that will help you choose the separators’ color, thickness, and position in relation to other elements.
The Button Style options are a bit more complicated because you’re essentially styling two buttons – the regular one and the one that appears on hover. Typography options will be the same for both. We’ve changed the size of the letters to 16 pixels, and the weight to 500, in ours.
The Normal option lets you choose the text, background, and border color of the button. The Hover option lets you do the same but for the hover button. Sticking with the Normal tab for editing, we’ve changed the text color to #ffffff and the background color to #1e1e1e.
Next, you’ll notice options that include border width, button radius, and padding. After setting all the values to zero for the border radius, we’ve also changed the values of the padding to 14, 40, 14, 40.
In the Button Icon Style options, you can change the size of the icon and its margin. You can even affect the small animation that happens on hover. We’ve left everything on default except the icon size, which we’ll change to 16, and the left margin, which we changed to 10 pixels.
To keep all of the margins and options in the next column, we’ve right-clicked on the existing column and duplicated it. The duplicate appeared below the existing column – simply dragging it to the empty column to the right was all it took to move us forward in completing our pricing list.
For starters, we’ve added another item to the second column of the list and added our text. Some of the items on the list got their very own images, too.
In the Style options over at the Style tab, we’ve switched the title color to match that of the description – #1e1e1e. We’ve done the same in the Price Style options for the price color. All of this is completely optional, of course. Finally, if the images in the menu items look a bit off, we can fine-tune their margin in Content Style.
To create the third column, we’ve used the same method we used to create the second one – right-click, duplicate, drag into the free column space. Editing and styling it was the final step in creating the pricing list.
We didn’t wander far from the Content tab to make the changes for the final column. First of all, we got the number of items in the column back to four – so no more Singapore noodles in column three. We’ve removed the images from items number one and three in the third column.
For items two and four, we’ve added new images and changed their price to include a discount. You can do all of this from the Item options if you don’t want the changes to be global – this way, they’ll affect only the selected items. We’ve also set the price color to #495caf to help the discounted prices stand out even more.
The final bit of fine-tuning would be to spread the columns apart a bit. Clicking on the Edit Section button and changing the content width to full width and columns gap to wider should do the trick. Clicking on the preview changes button at the bottom of the panel might show something like this in the preview window.
Let’s Wrap It Up!
When it comes to creating pricing lists for your WordPress website, the combination of the Elementor page builder and pricing list element from the free QI Addons for Elementor plugin is hard to beat. You can create awesome price lists by changing just a couple of options, or you can make the list truly your own by picking different fonts, colors, and images. The QI Addons for Elementor plugin lets you have that choice.
