{"id":24344,"date":"2021-05-19T15:00:19","date_gmt":"2021-05-19T13:00:19","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=24344"},"modified":"2021-08-03T13:50:03","modified_gmt":"2021-08-03T11:50:03","slug":"how-to-add-pricing-list-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-pricing-list-in-wordpress\/","title":{"rendered":"How to Add a Pricing List in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]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\u2019re not running an online store but still want to let people know your prices, there\u2019s only one good way to show them \u2013 using a pricing list.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Some WordPress themes come with a <a href=\"https:\/\/qodeinteractive.com\/theme-shortcode\/price-list-wordpress-themes\/\">pricing list shortcode<\/a>. If that\u2019s the case with your theme \u2013 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\u2019s perfect in all aspects except the one \u2013 it doesn\u2019t have a pricing list \u2013 what should you do?[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You\u2019ll use a plugin to add a pricing list, of course.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To that end, we\u2019ve created the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">QI Addons for Elementor<\/a> plugin. <strong>It\u2019s 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.<\/strong> One of the widgets included with the plugin is the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/pricing-list\/\">pricing list widget<\/a> \u2013 just the thing you need to add wonderful pricing lists to your WordPress website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we\u2019ll show you how to build a three-column pricing list using the pricing list widget.<strong> If you prefer watching videos over reading articles, we\u2019ve also created a video covering the same ground.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/OaR9u5JxYo8\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]So choose your favorite medium, sit back, and prepare to get inspired into creating some awesome lists of your own!<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-a-pricing-list-in-wordpress\">Adding a Pricing List in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editing-the-content\">Editing the Content<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-the-list\">Styling the List<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#applying-the-final-touches\">Applying the Final Touches<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-a-pricing-list-in-wordpress\"><\/a>Adding a Pricing List in WordPress<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List.jpg\" class=\"attachment-full size-full\" alt=\"Price List\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/wordpress.org\/plugins\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">QI Addons for Elementor<\/a> is, as its name says, a plugin that works with Elementor. To use it to add a pricing list to your WordPress website, you\u2019ll need to get the <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noopener\">Elementor website builder<\/a> first. If you need to brush up on your Elementor skills, don\u2019t worry \u2013 we have a <a href=\"https:\/\/qodeinteractive.com\/magazine\/elementor-tutorial-for-beginners\/\">handy guide<\/a> ready for you.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the next step, you should add the plugin. From your website\u2019s back end, head over to <em><strong>Plugins &gt; Add New<\/strong><\/em>, search for QI Addons for Elementor, and install and activate the plugin once you\u2019ve found it. If you\u2019d try to edit a page or post using Elementor, you\u2019d notice a whole new section of elements and widgets in the elements panel.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So if you\u2019ve created a new page or post, you might want to choose the number of columns in your first section as the first step. <strong>We chose three because we were building a three-column list.<\/strong> You can add fewer or more, whatever you like.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"530\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Elementor-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Elementor-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Elementor-Columns-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Elementor-Columns-768x420.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Elementor-Columns-620x339.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, you can either scroll through the widgets to find the pricing list one, or you can simply type in \u201cpricing list\u201d in the elements search bar \u2013 a quicker choice. <strong>Once the pricing list widget is found, simply dragging it to a free column should get you started on creating a pricing list.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"596\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Default.jpg\" class=\"attachment-full size-full\" alt=\"Price List Default\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Default.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Default-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Default-768x472.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Default-620x381.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]What\u2019s important to remember is that when you\u2019re 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. <strong>That\u2019s the strategy we\u2019ve implemented going forward.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editing-the-content\"><\/a>Editing the Content<\/h2>\n<p>[\/vc_column_text][vc_column_text]<strong>The widget lets you edit the content and style its looks from two different panels, and first, we\u2019ve focused on editing the content.<\/strong> When you open the Content tab, it shows you the General options \u2013 the place where you choose the layout, add or remove the items, and edit the contents and \u2013 to some extent \u2013 the appearance of the items.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"611\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Pricing-List.jpg\" class=\"attachment-full size-full\" alt=\"Pricing List\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Pricing-List.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Pricing-List-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Pricing-List-768x484.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Pricing-List-620x391.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>What we\u2019ve done here is chosen the standard layout and used the \u201c+Add Item\u201d button to add a new item to the list.<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When you click on any individual item in the left panel, a new set of options opens up, letting you edit that item.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"678\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Pricing-List-General-Options.jpg\" class=\"attachment-full size-full\" alt=\"Pricing List General Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Pricing-List-General-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Pricing-List-General-Options-300x210.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Pricing-List-General-Options-768x537.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Pricing-List-General-Options-620x434.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The options include giving it a name, an image, a description, the price, and the price with a discount. There\u2019s also a color chooser option for the title and the price \u2013 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\u2019s also an option to change all of the colors, at once, in the Style bar.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>For our list, we\u2019ve decided to name the four items we have here, shorten their description, remove the image, and add prices. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"665\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Text-Insert.jpg\" class=\"attachment-full size-full\" alt=\"Price List Text Insert\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Text-Insert.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Text-Insert-300x206.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Text-Insert-768x527.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Text-Insert-620x425.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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\u2019ll have plenty of ways to customize how the button looks.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We\u2019ve chosen to stick with the default layout, ignore the type and underline options, and we chose the normal size. We\u2019ve changed the button text and we\u2019ve used a hashtag in the Button Link field to leave the user on the same page.<\/strong> You can link the button to any page you want and choose how you want the page to open using the Target option.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"641\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Button.jpg\" class=\"attachment-full size-full\" alt=\"Price List Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Button-300x198.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Button-768x508.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Button-620x410.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For the final touch, you can head over to the button icon options and choose an icon that will appear in the button. There\u2019s an option to either upload it or choose one from the icon library \u2013<strong> we\u2019ve opted for the latter and picked the \u201cangle right\u201d icon.<\/strong> The final option lets you choose the icon\u2019s position \u2013 <strong>and we\u2019ve chosen ours to be on the right of the text.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"641\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Button-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Price List Button Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Button-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Button-Icon-300x198.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Button-Icon-768x508.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Button-Icon-620x410.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"styling-the-list\"><\/a>Styling the List<\/h2>\n<p>[\/vc_column_text][vc_column_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\u2019ll come across lets you choose the title tag as defined by the theme you\u2019re using. <strong>We\u2019ve stuck with the default one.<\/strong> The more interesting options are the color and typography options you can set for the title and the description.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We\u2019ve made two changes in the Style options. We used the #df9a9a color for the title, and #1e1e1e for the description.<\/strong> You are free to use any color you want in your pricing list.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"641\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Price List Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Style-Tab-300x198.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Style-Tab-768x508.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Style-Tab-620x410.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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. <strong>We\u2019ve changed the color to match the color of the title. We\u2019ve also boosted the size of the lettering to 20 pixels, and its weight to 500 \u2013 we wanted to help it stand out.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"602\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Price List Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Typography-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Typography-768x477.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Typography-620x385.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019re looking to customize how the line between the item and the price looks, Content Style is where you\u2019re able to do it. You\u2019ll also be able to use options such as line thickness and margins to affect the prominence and spacing of various elements. <strong>The adjustments we\u2019ve made in this section include changing the line color to #e1e1e1 and the description margin top to 5.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"475\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Content-Style.jpg\" class=\"attachment-full size-full\" alt=\"Price List Content Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Content-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Content-Style-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Content-Style-768x376.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Content-Style-620x304.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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. <strong>We\u2019ve done both \u2013 changed the item spacing to 30 pixels, and the button margin top to 60.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You might enable the items separator if you want \u2013<strong> we won\u2019t<\/strong>. If you do, you\u2019ll get some additional options that will help you choose the separators\u2019 color, thickness, and position in relation to other elements.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"482\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-General-Style.jpg\" class=\"attachment-full size-full\" alt=\"Price List General Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-General-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-General-Style-300x149.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-General-Style-768x382.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-General-Style-620x308.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Button Style options are a bit more complicated because you\u2019re essentially styling two buttons \u2013 the regular one and the one that appears on hover. Typography options will be the same for both. <strong>We\u2019ve changed the size of the letters to 16 pixels, and the weight to 500, in ours.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<strong> Sticking with the Normal tab for editing, we\u2019ve changed the text color to #ffffff and the background color to #1e1e1e.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next, you\u2019ll notice options that include border width, button radius, and padding. <strong>After setting all the values to zero for the border radius, we\u2019ve also changed the values of the padding to 14, 40, 14, 40.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"563\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Button-Style.jpg\" class=\"attachment-full size-full\" alt=\"Price List Button Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Button-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Button-Style-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Button-Style-768x446.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Button-Style-620x360.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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. <strong>We\u2019ve left everything on default except the icon size, which we\u2019ll change to 16, and the left margin, which we changed to 10 pixels.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"509\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Icon-Style.jpg\" class=\"attachment-full size-full\" alt=\"Price List Icon Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Icon-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Icon-Style-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Icon-Style-768x403.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Icon-Style-620x326.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"applying-the-final-touches\"><\/a>Applying the Final Touches<\/h2>\n<p>[\/vc_column_text][vc_column_text]To keep all of the margins and options in the next column, we\u2019ve right-clicked on the existing column and duplicated it. The duplicate appeared below the existing column \u2013 simply dragging it to the empty column to the right was all it took to move us forward in completing our pricing list.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"458\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Two.jpg\" class=\"attachment-full size-full\" alt=\"Price List Two\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Two.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Two-300x142.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Two-768x363.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Two-620x293.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>For starters, we\u2019ve 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. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"501\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Image.jpg\" class=\"attachment-full size-full\" alt=\"Price List Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Image.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Image-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Image-768x397.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Image-620x321.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the Style options over at the Style tab, <strong>we\u2019ve switched the title color to match that of the description \u2013 #1e1e1e. We\u2019ve done the same in the Price Style options for the price color.<\/strong> All of this is completely optional, of course. <strong>Finally, if the images in the menu items look a bit off, we can fine-tune their margin in Content Style. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"521\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Spacing.jpg\" class=\"attachment-full size-full\" alt=\"Price List Spacing\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Spacing.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Spacing-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Spacing-768x413.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Spacing-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To create the third column, <strong>we\u2019ve used the same method we used to create the second one<\/strong> \u2013 right-click, duplicate, drag into the free column space. Editing and styling it was the final step in creating the pricing list.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"525\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-3-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Price List 3 Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-3-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-3-Columns-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-3-Columns-768x416.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-3-Columns-620x336.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We didn\u2019t wander far from the Content tab to make the changes for the final column.<strong> First of all, we got the number of items in the column back to four \u2013 so no more Singapore noodles in column three. We\u2019ve removed the images from items number one and three in the third column.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"532\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-3-Columns-Edit.jpg\" class=\"attachment-full size-full\" alt=\"Price List 3 Columns Edit\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-3-Columns-Edit.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-3-Columns-Edit-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-3-Columns-Edit-768x422.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-3-Columns-Edit-620x340.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>For items two and four, we\u2019ve added new images and changed their price to include a discount.<\/strong> You can do all of this from the Item options if you don\u2019t want the changes to be global \u2013 this way, they\u2019ll affect only the selected items. <strong>We\u2019ve also set the price color to #495caf to help the discounted prices stand out even more.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"452\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Discount.jpg\" class=\"attachment-full size-full\" alt=\"Price List Discount\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Discount.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Discount-300x140.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Discount-768x358.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Discount-620x289.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The final bit of fine-tuning would be to spread the columns apart a bit. <strong>Clicking on the Edit Section button and changing the content width to full width and columns gap to wider should do the trick.<\/strong> Clicking on the preview changes button at the bottom of the panel might show something like this in the preview window.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Price List Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Preview-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Preview-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Price-List-Preview-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]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.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Need a way to add and edit a pricing list to your WordPress website? We&#8217;ll show you how to do it using an addon from our Qi Addons for Elementor plugin!<\/p>\n","protected":false},"author":9295,"featured_media":25324,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,108,4,13],"class_list":["post-24344","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-qi-addons","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/24344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=24344"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/24344\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/25324"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=24344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=24344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=24344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}