A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How to Add Price List to Your WordPress Website

How to Add Price List to Your WordPress Website

Big or small, price is always important, both for the customer and the seller. Whatever you are selling, it is a good practice to make your prices as transparent as possible. So, it is easy to understand how important pricing tables are for any type of online shop. Along with the prices, they usually show product features, or product packages comparison by price so that the buyer can make an informed decision about his purchase.

A neat, well-structured pricing list also makes you look professional and trustworthy, so this is definitely an element you should pay attention to when setting up an online store or a website with a purpose to sell. Many WordPress themes come with a price list already included, and some require a price table plugin. In this article, we will show you how to make an Elementor price list with the QI elementor addon.

QI Elementor Plugin

The price list doesn’t sound like a fun element, it is more of an element where the reality and customer’s wishes meet. But, that’s just one more reason to make price lists as beautiful and stylish as possible. The QI Elementor plugin will prove to you that creating price lists can be much more than a daunting task. It is an exceptionally user-friendly tool that allows you to create elegant, detailed pricing lists that perfectly fit your website’s style and purpose.

The bright new QI Elementor plugin is incredibly versatile and includes a variety of fantastic widgets, but above all, it allows you to create awesome price lists. What makes it especially handy for all types of WordPress websites is that it is so flexible and allows for plenty of customizations.

The best way to understand how powerful QI Elementor plugin is and all the price list options that you can set with it, is through examples, and that’s exactly what we will show you.

The component of the price element is the Item title to which the Item price is linked. The Item description is not required but you can have it if you want. As you can see in our examples, a menu can contain images. You also have the option to have the image before and/or after the item, but of course it is not necessary to have the image, as you can see in the third example. There is an optional line from the item subtitle to the price that can be styled, and there is the item separation, as we see in the third example. The button is optional, it can lead to a more extensive list or anywhere else.

QI price list

How to Create a Price List That Fits Your Style

After the installation and plugin activation, it is necessary to add Pricing list element on the desired

Pricing list widget

Pay attention, there are two tabs for setting this elementContent and Style tab. The Advanced tab is the default Elementor tab contained by every element in this plugin.

Price list settings

The first thing you need to do is to choose the layout. There are two layouts – Image Before and Standard layout. The Image Before layout clearly indicates that the image is shown before the item as you can see in the above example. In the Standard layout the picture is shown after the item title. If you do not want to have an image here at all, all you need to do is not to insert the picture for the item.

Price list layout

Inserting item data in the menu is the next thing to do as soon as the layout is selected. Any number of items can be added. This number is three by default, but you can have more, or less, as needed. In addition to information such as name, description, price and image, you will notice that here you can choose the colors of the name and price. In case you don’t want all these items to have the same color, change it here, otherwise, you will style everything you need later in the Style tab. The Style tab, among other things, has the option for adjusting these colors and allows you to set the color for all items in one place. If you want each item to have different colors, you need to define it in each item separately.

There is also an option to enter the price at a discount.

Menu item settings

This way, data is added for each item, and items can be duplicated, deleted and of course you can always add completely new ones.

Items

As we said, the button may or may not be on the list. If you don’t want it you just need to not enter the Button Text. If you want the button, here is the place where you specify the style of the button. Colors and additional customization can be set in the style tab. We recommend you to explore the options here, play, check all the layouts, and other available options. The Button icon for example is yet another interesting option that allows you to add an icon to the button.

Items Button

Example: Layout – Outlined, Type-With inner border and added icon:

Price list button example

In the style tab, we adjust everything related to layouts, fonts, colors… The options here are divided into segments for easier navigation.

Price list Style options

Style section – all settings for Title and Description. These are the settings related to colors and fonts. It is very easy to navigate and we recommend you to explore and experiment to find the style that matches your website best.

Style tab in style

Price Style – this is where you’ll find all the settings related to the price. Apart from the font and color, the option that is interesting here is the background color and price border radius.

Padding style

With these options we can get the result as in the example below:

Price border

Price padding also affects this background. Padding is actually a space around the price and as the padding increases the background also increases.

The content style part refers to arranging the line between item title and price. You can choose the style of the line, the thickness of the margin, it refers to everything around that line. This is where the margins around the description and image are adjusted.

The general style tab contains the options for arranging the space around the item, i.e. the space between the items. This is also where you add a separator between the items and a top margin to the button which is used to edit the space between the last item and the button.

In the example below, you can see how it looks when you add the separator and edit the spaces.

General style example

Other settings are related to the button. They are divided in three segments for easier navigation and refer to the arrangement of the fonts on the button, the colors of the buttons and the border, the thickness of the border, and the adjustment of the icon if it is on it. They are so intuitive and easy to use that any special explanation about them is simply unnecessary – once you open all these options, you’ll know exactly what to do. So, don’t hesitate to explore the options as we are sure this plugin makes every price list look simply beautiful.

In Conclusion

Maybe your prices are not beautiful for everyone, but your price lists can be. Don’t hesitate to try out and play with all the options that this plugin offers. You simply can’t go wrong and you always have the chance to change your settings in more than one way. Feel free to ask questions about the QI Elementor plugin and everything related to its functionalities, we’re more than happy to answer!

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply