{"id":40816,"date":"2022-10-12T15:00:35","date_gmt":"2022-10-12T13:00:35","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=40816"},"modified":"2023-01-09T11:25:02","modified_gmt":"2023-01-09T10:25:02","slug":"how-to-add-pricing-calculator-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-pricing-calculator-wordpress\/","title":{"rendered":"How to Add a Pricing Calculator in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Despite the general <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-pricing-strategy-for-woocommerce-store\/\">pricing strategy<\/a> you decide to go for, allowing your potential customers to learn all about the pricing of your products and\/or services is a must. Of course, showcasing your pricing in various effective and user-friendly ways \u2013 like <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-pricing-list-in-wordpress\/\">adding a pricing list<\/a> or <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-wordpress-pricing-table-plugins\/\">using a pricing table<\/a> \u2013 is always recommended. But what if we told you there\u2019s a way to make things even more practical (and somewhat engaging) for your customers during the process of their purchase-making decision? You can do this by <strong>adding a simple but attractive pricing calculator element to your WordPress site.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Pricing calculators are great as they <strong>allow your visitors to simply select the items they are interested in purchasing using the toggle switch<\/strong>. Once they select the prices using the switches, they will be able to instantly see the total calculated price on the screen. They can easily add or remove any items they like (or don\u2019t like) and then they can simply hit the buy button once they\u2019re ready to make their purchase.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To create a pricing calculator on your own WordPress site, you first need the help of a suitable plugin \u2013 and if you ask us, there\u2019s a no better choice than the <strong>powerful Qi Addons for Elementor and its versatile Pricing Calculator widget.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, this time around, we will share with you all the options that come packed with this practical widget and show you the steps you need to take to set up a neat-looking pricing calculator for your site.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here goes:<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-the-pricing-calculator\">Adding the Pricing Calculator Widget on Your WordPress Site<\/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 of the Widget<\/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-pricing-calculator\">Styling the Pricing Calculator Widget<\/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=\"#duplicating-pricing-calculator\">Duplicating a Finished Pricing Calculator Element<\/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-duplicated-elements\">Adjusting the Styling of the Duplicated Elements<\/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-the-pricing-calculator\"><\/a>Adding the Pricing Calculator Widget on Your WordPress Site<\/h2>\n<p>[\/vc_column_text][vc_column_text]With over a <strong>100 freemium, fully customizable widgets<\/strong>, the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> plugin has a truly unique selection of elements you can use to <strong>create any section or page imaginable for your site<\/strong> \u2013 be it a creative element, a showcase addon, or one that can be a good fit for your eCommerce store or any other business. And speaking of the latter, there\u2019s the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/pricing-calculator\/\" target=\"_blank\" rel=\"noopener\">Pricing Calculator<\/a> widget. This widget is great as it <strong>contains numerous toggleable features, allowing you to display pricing deals in an innovative, practical, and flexible manner<\/strong> all at once. You will be able to add different prices, currencies, and periods, stylize switch buttons, change colors and typography, and more.[\/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=\"426\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Pricing-Calculator.jpg\" class=\"attachment-full size-full\" alt=\"Pricing Calculator\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Pricing-Calculator.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Pricing-Calculator-300x132.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Pricing-Calculator-768x338.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Pricing-Calculator-620x273.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With that said, let\u2019s take a look at how you can add, customize and style the Pricing Calculator widget on your own site. Also, if you prefer to watch videos over reading, we\u2019ve covered the same subject in a video:[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" style=\"border: 1px solid #ebebeb;\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/HvRVuy3QJUs\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]First things first, you should <strong>go to the backend of your Elementor page<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You should note that we\u2019ve added a section where we plan to add the pricing calculators in advance. There\u2019s the section background image, title text, as well as four different columns for the pricing calculators (that we added using the Inner Section element).[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Adding the Pricing Calculator Widget<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#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\/2022\/10\/Adding-Pricing-Calculator.jpg\" class=\"attachment-full size-full\" alt=\"Adding Pricing Calculator\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Adding-Pricing-Calculator.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Adding-Pricing-Calculator-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Adding-Pricing-Calculator-768x413.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Adding-Pricing-Calculator-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Find the \u201cpricing calculator\u201d element in the Elementor sidebar. <strong>Drag it over to the page on the right (to the first 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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Drag-and-Drop-Pricing-Calculator.jpg\" class=\"attachment-full size-full\" alt=\"Drag and Drop Pricing Calculator\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Drag-and-Drop-Pricing-Calculator.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Drag-and-Drop-Pricing-Calculator-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Drag-and-Drop-Pricing-Calculator-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Drag-and-Drop-Pricing-Calculator-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#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=\"520\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Pricing-Calculator-Dropped.jpg\" class=\"attachment-full size-full\" alt=\"Pricing Calculator Dropped\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Pricing-Calculator-Dropped.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Pricing-Calculator-Dropped-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Pricing-Calculator-Dropped-768x412.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Pricing-Calculator-Dropped-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As you can see, the widget is transparent by default and includes some placeholder text with minimal styling. Also, the widget is a bit hard to see because of our background image, so we plan to fix that in a few moments.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Setting Up the Look of the Widget Field<\/h3>\n<p>[\/vc_column_text][vc_column_text]But first, let\u2019s take a look at the first option in the <em>Content<\/em> tab (<em>General<\/em> settings) \u2013 <em>Layout<\/em>. It\u2019s set to the <em>Side<\/em> setting by default, but the <em>Simple<\/em> setting fits our example better, so that\u2019s what we\u2019ve chosen.[\/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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Layout.jpg\" class=\"attachment-full size-full\" alt=\"Layout\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Layout.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Layout-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Layout-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Layout-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This layout puts the price at the top and the items in the middle, while the description and the button are located at the very bottom of the widget.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that out of the way, we can quickly <strong>switch over to the <em>Style<\/em> tab to change the <em>Background Color<\/em><\/strong> of our element. We\u2019ve chosen plain white (#FFFFFF).[\/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\/2022\/10\/Background-Color.jpg\" class=\"attachment-full size-full\" alt=\"Background Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Background-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Background-Color-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Background-Color-768x446.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Background-Color-620x360.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve also set the <em>Border Color<\/em>, an option available right below (the hex code we\u2019ve used is #e1e1e1).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Last but not least, we\u2019ve increased the <em>Border Width<\/em> to 1 pixel to make the border a bit more noticeable.[\/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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Border-Color-and-Border-Width.jpg\" class=\"attachment-full size-full\" alt=\"Border Color and Border Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Border-Color-and-Border-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Border-Color-and-Border-Width-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Border-Color-and-Border-Width-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Border-Color-and-Border-Width-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, you can feel free to adjust all these options entirely to your liking.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now, let\u2019s return to the <em>Content<\/em> tab to show you the rest of the content-related options.[\/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 of the Widget<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now that we\u2019re back in the Content tab, it\u2019s time to start editing the content of the widget. There are some general options here that also include the ability to adjust the content of the button and individual items. Let\u2019s take a look at all these options in more detail.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Editing General Content Options<\/h3>\n<p>[\/vc_column_text][vc_column_text]The first available option here (after Layout) is for replacing the default <em>Description<\/em>, allowing you to add your own.[\/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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Description.jpg\" class=\"attachment-full size-full\" alt=\"Description\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Description.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Description-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Description-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Description-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, the <em>Currency<\/em> field allows you to add the desired currency into the field next to the price. This is the text field, so whatever you enter here will get displayed on the page. We\u2019ve decided to stick with the dollars for ours.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The same goes for the field below, called <em>Period<\/em> \u2013 we\u2019ve left the \/mo (month) sign here. Once again, you can replace this text with anything 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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Currency-and-Period.jpg\" class=\"attachment-full size-full\" alt=\"Currency and Period\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Currency-and-Period.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Currency-and-Period-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Currency-and-Period-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Currency-and-Period-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, there\u2019s the <em>Button Text<\/em> \u2013 we\u2019ve only made a slight change here and corrected this option so that our button reads \u201cPurchase\u201d instead of \u201cPurchase now\u201d.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The<em> Button Url<\/em> allows you to add a URL to your button. As we\u2019re only creating this example for our tutorial, we\u2019ve just added a hashtag as a placeholder text here.[\/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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Text-and-Link.jpg\" class=\"attachment-full size-full\" alt=\"Button Text and Link\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Text-and-Link.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Text-and-Link-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Text-and-Link-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Text-and-Link-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Customizing the Items<\/h3>\n<p>[\/vc_column_text][vc_column_text]Next is the<em> Child Elements<\/em> section. This section has three different Items by default \u2013 they actually correspond to the three-line items that serve to make the calculation on your page. As we didn\u2019t need three items for our example, we deleted one item and decided to stick with two items only. But if you want to add more items to your element, <strong>simply hit the \u201c+Add Item\u201d button<\/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=\"485\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Child-Elements.jpg\" class=\"attachment-full size-full\" alt=\"Child Elements\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Child-Elements.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Child-Elements-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Child-Elements-768x384.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Child-Elements-620x310.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Each item has its own options. The first option you can find within one item is <em>Price<\/em> \u2013 you can enter your numerical value for the said item here. Also, the <em>Title<\/em> field allows you to enter the name of your item (like we did).[\/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=\"543\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-and-Title.jpg\" class=\"attachment-full size-full\" alt=\"Price and Title\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-and-Title.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-and-Title-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-and-Title-768x430.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-and-Title-620x347.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, there\u2019s the toggle switch right underneath named <em>Item Active<\/em> which allows you to decide whether the item will be active and included in the price calculation by default. If you switch it to <em>Yes<\/em>, you can see that the first item is now also switched on within the item itself. Also, the total pricing changed automatically the moment the first item got included in the calculation.[\/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=\"531\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-Active.jpg\" class=\"attachment-full size-full\" alt=\"Item Active\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-Active.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-Active-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-Active-768x421.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-Active-620x340.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That being said, your visitors will still be able to deactivate the item within the element on your page before they decide to make their purchase.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the second item, we changed the price to $22. Instantly, you\u2019ll be able to see the calculation has changed accordingly (as both items are marked as active).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve changed the title as well and decided to keep the second item active, too.<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=\"525\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-Options.jpg\" class=\"attachment-full size-full\" alt=\"Item Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-Options-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-Options-768x416.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-Options-620x336.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Setting the Button and Button Icon<\/h3>\n<p>[\/vc_column_text][vc_column_text]Next are the <em>Button<\/em> settings, allowing you to change the button layout, type, and size, as well as enable or disable the button underline. We\u2019ve already made a separate article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-button-in-wordpress\/\">how to add, customize and style the button element<\/a> where we talk about these options in full detail, so make sure to check that out for more info.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Also, we\u2019ve decided to keep the default button settings for our example.<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=\"600\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Options.jpg\" class=\"attachment-full size-full\" alt=\"Button Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Options-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Options-768x476.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Options-620x384.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Button Icon<\/em> section allows you to add an icon that will be placed next to the button text. You can either use one from the icon library or upload an SVG.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Also, you can change your <em>Icon Position<\/em>.[\/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\/2022\/10\/Button-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Button Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve uploaded an SVG for our example.<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=\"1265\" height=\"596\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Insert-SVG.jpg\" class=\"attachment-full size-full\" alt=\"Insert SVG\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Insert-SVG.jpg 1265w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Insert-SVG-300x141.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Insert-SVG-1024x482.jpg 1024w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Insert-SVG-768x362.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Insert-SVG-1240x584.jpg 1240w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Insert-SVG-970x457.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Insert-SVG-620x292.jpg 620w\" sizes=\"auto, (max-width: 1265px) 100vw, 1265px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Make sure to hit the <em>Insert Media<\/em> button once you choose your icon.[\/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=\"540\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-SVG-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Button SVG Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-SVG-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-SVG-Icon-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-SVG-Icon-768x428.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-SVG-Icon-620x346.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-pricing-calculator\"><\/a>Styling the Pricing Calculator Widget<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now, we\u2019re going to move on to the <em>Styling<\/em> options. We\u2019ve already changed a few of the first options available earlier. These are the first three options in the <em>Style<\/em> section \u2013 <em>Background Color, Border Color<\/em>, and <em>Border Width<\/em>.[\/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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Background-Style.jpg\" class=\"attachment-full size-full\" alt=\"Background Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Background-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Background-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Background-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Background-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The one option left in this section is called <em>Padding<\/em>. With it, you can adjust the space around the content. We\u2019ve delinked the fields here and adjusted the top padding to 56px while we set the rest at 52px.[\/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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Padding.jpg\" class=\"attachment-full size-full\" alt=\"Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Padding-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Padding-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Padding-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Switcher Style<\/h3>\n<p>[\/vc_column_text][vc_column_text]Next is the <em>Switcher Style<\/em> section which lets you style the look of the toggle switches themselves. The options here can be divided into two different sections \u2013 <em>Normal<\/em>, which serves to style the options for the inactive switch display, and <em>Switch<\/em>, which is used for the activated switch.[\/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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Style.jpg\" class=\"attachment-full size-full\" alt=\"Switcher Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Let\u2019s start with the <em>Normal<\/em> set options \u2013 there is the <em>Button Color<\/em> (we\u2019ve changed it using the hex code #ffffff for white color), and <em>Background Color<\/em> which changes the switch background (we\u2019ve set the #e1e1e1 hex code here). There is also the <em>Border Color<\/em> that will frame the toggle switches altogether.[\/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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Normal-Style.jpg\" class=\"attachment-full size-full\" alt=\"Switcher Normal Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Normal-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Normal-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Normal-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Normal-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Under the <em>Active<\/em> set of options, you\u2019ve got three similar settings \u2013 <em>Active Button Color<\/em>, <em>Active Background Color<\/em>, and <em>Active Border Color<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve entered a hex code #d1b17d for the Active Background Color because we wanted the inactive and active switches to differ in some way.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can increase the <em>Border Width<\/em> as well as help both Normal and Active border colors become more visible (so, this setting works for both displays).[\/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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Active-Style.jpg\" class=\"attachment-full size-full\" alt=\"Switcher Active Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Active-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Active-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Active-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Active-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Item Title Style<\/h3>\n<p>[\/vc_column_text][vc_column_text]Moving on to the <em>Item Title Style<\/em> \u2013 the first available option here is the <em>Title Tag<\/em>.[\/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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Title-Tag-and-Title-Color.jpg\" class=\"attachment-full size-full\" alt=\"Title Tag and Title Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Title-Tag-and-Title-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Title-Tag-and-Title-Color-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Title-Tag-and-Title-Color-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Title-Tag-and-Title-Color-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can set anything from H1 to P (we\u2019ve set it to the P tag). There\u2019s also the <em>Title Color<\/em> if you want to change the color of your title text and the <em>Title Typography<\/em>. The latter option contains a comprehensive number of settings related to the typography of your title text. These include the font family, size, weight, and so on.[\/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=\"564\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Title-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Title Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Title-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Title-Typography-300x175.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Title-Typography-768x447.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Title-Typography-620x361.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Price Style and Description Style<\/h3>\n<p>[\/vc_column_text][vc_column_text]The name of the <em>Price Style<\/em> section is pretty self-explanatory \u2013 it allows you to set the style of your calculated price. The options include <em>Price Color<\/em> (we used the #1e1e1e black color hex code) and <em>Price Typography<\/em> (the same as the Title Typography). We\u2019ve changed the font size and font weight here to 70px and 500, respectively.[\/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=\"636\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-Color-and-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Price Color and Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-Color-and-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-Color-and-Typography-300x197.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-Color-and-Typography-768x504.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-Color-and-Typography-620x407.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on, the <em>Currency Color<\/em> allows you to set the color of the currency next to the price total. We\u2019ve used the same color #1e1e1e (that we also used for the number).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <em>Currency Typography<\/em> is the same as all other available typography options. We\u2019ve set the weight to 500 here.[\/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=\"594\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Currency-Color-and-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Currency Color and Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Currency-Color-and-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Currency-Color-and-Typography-300x184.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Currency-Color-and-Typography-768x471.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Currency-Color-and-Typography-620x380.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next is the <em>Period Color<\/em> which lets you set the color of the period related to the price (the text that reads \u201c\/mo\u201d in our example). We\u2019ve set the same #1e1e1e hex code we\u2019ve been using until now.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, you\u2019ve also got the <em>Period Typography<\/em> with all familiar typography-related settings (we\u2019ve decided not to change anything here).[\/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=\"516\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Period-Color-and-Period-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Period Color and Period Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Period-Color-and-Period-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Period-Color-and-Period-Typography-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Period-Color-and-Period-Typography-768x409.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Period-Color-and-Period-Typography-620x330.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Currency Margin<\/em> can be used to insert more space around the currency symbol. Similarly, the <em>Period Margin<\/em> allows you to insert more space around the period text, but only on the bottom and on the left (due to the period text position). We\u2019ve delinked these fields and put 5 pixels on the bottom and 8 pixels on the left.[\/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=\"483\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Currency-Margin-and-Period-Margin.jpg\" class=\"attachment-full size-full\" alt=\"Currency Margin and Period Margin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Currency-Margin-and-Period-Margin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Currency-Margin-and-Period-Margin-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Currency-Margin-and-Period-Margin-768x383.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Currency-Margin-and-Period-Margin-620x309.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Last but not least, the<em> Description Style<\/em> set of options has two options for styling the description text of your pricing calculator \u2013 <em>Description Color<\/em> and <em>Description Typography<\/em>, both of which are self-explanatory.[\/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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Description-Style.jpg\" class=\"attachment-full size-full\" alt=\"Description Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Description-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Description-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Description-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Description-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Button Style<\/h3>\n<p>[\/vc_column_text][vc_column_text]Now, the <em>Button Style<\/em> options allow you to completely style the look of your Purchase button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first thing available here is another set of <em>Typography<\/em> options which has all the standard options we\u2019ve already mentioned above. We didn\u2019t change anything for our example, but you should feel free to change any setting you like here.[\/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=\"588\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Button Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Typography-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Typography-768x466.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Typography-620x376.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, there are two switches again \u2013 <em>Normal<\/em> (it lets you style the button when it\u2019s displayed regularly) and <em>Hover<\/em> (for styling the look of your button when it\u2019s hovered over).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the Normal settings, there\u2019s the <em>Text Color<\/em> \u2013 we\u2019ve set the hex code #ffffff which is plain white.[\/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=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Normal-Color.jpg\" class=\"attachment-full size-full\" alt=\"Button Normal Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Normal-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Normal-Color-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Normal-Color-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Normal-Color-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Background Color<\/em> is the color of the button itself. We\u2019ve set the hex code #d1b17d for it to match the active button switches.[\/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=\"597\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Background-Color.jpg\" class=\"attachment-full size-full\" alt=\"Button Background Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Background-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Background-Color-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Background-Color-768x473.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Background-Color-620x382.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Also, if you choose the button <em>Border Color<\/em>, you will also be able to use the option right below it, called <em>Border Width<\/em>. This option will affect both Normal and Hover switches.[\/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=\"573\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Border-Color-and-Border-Width-2.jpg\" class=\"attachment-full size-full\" alt=\"Border Color and Border Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Border-Color-and-Border-Width-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Border-Color-and-Border-Width-2-300x177.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Border-Color-and-Border-Width-2-768x454.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Border-Color-and-Border-Width-2-620x367.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]On the other hand, the <em>Border Radius<\/em> option will work regardless if you use the border color or not as it simply lets you curve or sharpen the button corners. We\u2019ve removed the radius here to get the button with sharp corners.[\/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=\"573\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Border-Radius.jpg\" class=\"attachment-full size-full\" alt=\"Border Radius\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Border-Radius.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Border-Radius-300x177.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Border-Radius-768x454.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Border-Radius-620x367.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Padding<\/em> option allows you to change the space around the button text and thus affect the size of your button. You can either increase all sides evenly or delink the fields and set each size separately (which is what we did).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve set 14px at the top, 40 on the right, 13 on the bottom, and 40 on the left.[\/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=\"582\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Button Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Padding-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Padding-768x461.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Padding-620x372.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Hover switch reflects a similar set of options under the Normal one. So, there\u2019s the <em>Text Hover Color<\/em>, <em>Background Hover Color<\/em>, and <em>Border Hover Color<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you set different background colors for the Hover and Normal switches, you can also use the <em>Reveal Background<\/em> option. It allows you to add an animated transition effect (horizontal or vertical) once you hover over the button.[\/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=\"591\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Hover-Style.jpg\" class=\"attachment-full size-full\" alt=\"Button Hover Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Hover-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Hover-Style-300x183.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Hover-Style-768x468.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Hover-Style-620x378.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Button Icon Style<\/h3>\n<p>[\/vc_column_text][vc_column_text]The <em>Button Icon Style<\/em> set of options lets you adjust the style of any icon you\u2019ve added to your button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This includes the <em>Icon Size<\/em> (we\u2019ve set ours to 6px).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Then, there are the Normal and Hover switches for normal and icon hover options. Under Normal, there is the <em>Icon Color<\/em> option. We\u2019ve set it to white (#ffffff) to match the button text color.[\/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=\"528\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-Style.jpg\" class=\"attachment-full size-full\" alt=\"Button Icon Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-Style-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-Style-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-Style-620x338.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Under <em>Hover<\/em>, there is the <em>Icon Hover Color<\/em> option which adds a different color to the icon when hovering over it. Also, you can use the <em>Move Icon<\/em> option here, which allows you to choose the icon animation effect that shows up when you hover over the button. We\u2019ve kept the default, <em>Horizontal Short<\/em> setting for ours.[\/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\/2022\/10\/Button-Icon-Style-2.jpg\" class=\"attachment-full size-full\" alt=\"Button Icon Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-Style-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-Style-2-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-Style-2-768x416.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-Style-2-620x336.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Right underneath, you\u2019ve also got the <em>Icon Margin<\/em> option which simply lets you create more space around the icon. We\u2019ve delinked the fields here and set 1px at the top and 8px on the left while keeping the rest at 0px.[\/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=\"528\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-Margin.jpg\" class=\"attachment-full size-full\" alt=\"Button Icon Margin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-Margin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-Margin-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-Margin-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Icon-Margin-620x338.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Before we move on to the final section, we have to mention that the <em>Button Inner Border Style<\/em> section has no options as we\u2019re not using the button with the inner border. The same goes for the section below this one, called <em>Button Underline Style<\/em>. We haven\u2019t enabled the button text underline, so we can\u2019t style this set of options.[\/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=\"522\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Inner-Border-and-Underline.jpg\" class=\"attachment-full size-full\" alt=\"Button Inner Border and Underline\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Inner-Border-and-Underline.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Inner-Border-and-Underline-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Inner-Border-and-Underline-768x414.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Button-Inner-Border-and-Underline-620x334.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Spacing Style<\/h3>\n<p>[\/vc_column_text][vc_column_text]And we\u2019ve reached the last section, called <em>Spacing Style<\/em>. This section contains many different settings for adjusting the look of your margin. Different options allow you to increase or decrease the space between different elements. For example, the <em>Item Title Margin Left<\/em> option lets you adjust the space between the item titles and the switches (we\u2019ve added 13px).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Then, the <em>Button Margin Top<\/em> will let you add more space between the button and the description. We\u2019ve set 28px here.[\/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=\"576\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-and-Button-Margin.jpg\" class=\"attachment-full size-full\" alt=\"Item and Button Margin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-and-Button-Margin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-and-Button-Margin-300x178.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-and-Button-Margin-768x457.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-and-Button-Margin-620x369.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Price Margin Bottom<\/em> is the next available option here, allowing you to add more space below the calculated price. We\u2019ve put 24px.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Then, the <em>Space Between Items<\/em> option lets you add more space between the items you\u2019ve added to your calculator. We\u2019ve entered 10px for ours.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, the <em>Items Holder Margin Bottom<\/em> lets you add more space under the items as a group (the space between the items themselves and the description). We\u2019ve set 91 pixels for our example.[\/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=\"576\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Space-Margins.jpg\" class=\"attachment-full size-full\" alt=\"Space Margins\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Space-Margins.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Space-Margins-300x178.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Space-Margins-768x457.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Space-Margins-620x369.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=\"duplicating-pricing-calculator\"><\/a>Duplicating a Finished Pricing Calculator Element<\/h2>\n<p>[\/vc_column_text][vc_column_text]Since the page we\u2019ve prepared has three empty columns, instead of wasting your time on making three new elements entirely from scratch, you can simply duplicate the pricing calculator element you\u2019ve already created in the first column.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do this, simply right-click your element and <strong>choose the <em>Navigator<\/em> option<\/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=\"651\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Navigator.jpg\" class=\"attachment-full size-full\" alt=\"Navigator\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Navigator.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Navigator-300x202.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Navigator-768x516.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Navigator-620x417.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>right-click on the element<\/strong> again and <strong>hit <em>Duplicate<\/em><\/strong>. Now, simply drag the copy of the element to the desired place, or, use the Navigator to drop the right element to its intended place.[\/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=\"612\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Duplicate.jpg\" class=\"attachment-full size-full\" alt=\"Duplicate\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Duplicate.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Duplicate-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Duplicate-768x485.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Duplicate-620x392.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]So, to do this within the Navigator, all you need to do is drag the second pricing calculator (located in the first column) to the second column.<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=\"486\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Move-to-Column.jpg\" class=\"attachment-full size-full\" alt=\"Move to Column\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Move-to-Column.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Move-to-Column-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Move-to-Column-768x385.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Move-to-Column-620x311.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, repeat the similar process for the third and fourth columns as well.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now, all you have to do is adjust the look of your content. If you\u2019d like, of course, you can also change the style if you want to create some variations in your pricing calculator element group.<br \/>\n[\/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=\"styling-duplicated-elements\"><\/a>Adjusting the Styling of the Duplicated Elements<\/h2>\n<p>[\/vc_column_text][vc_column_text]We won\u2019t explain all the options when changing the look of the other items again \u2013 we will only run through them quickly as we make the changes.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In our second element, we\u2019ve changed the price for both the first and the second items.<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=\"558\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-Change.jpg\" class=\"attachment-full size-full\" alt=\"Price Change\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-Change.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-Change-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-Change-768x442.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-Change-620x357.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, in the third element, we\u2019ve also changed the pricing for the first and second items, but we marked the second item as inactive.<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=\"996\" height=\"425\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-and-Active-Status-Change.jpg\" class=\"attachment-full size-full\" alt=\"Price and Active Status Change\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-and-Active-Status-Change.jpg 996w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-and-Active-Status-Change-300x128.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-and-Active-Status-Change-768x328.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-and-Active-Status-Change-970x414.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-and-Active-Status-Change-620x265.jpg 620w\" sizes=\"auto, (max-width: 996px) 100vw, 996px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Continuing with the third element, we headed over to the Style tab, and then we changed the Background Color of this pricing calculator to black. Also, we adjusted the Border Color to match (#333333).<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=\"570\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Background-and-Border-Color-Change.jpg\" class=\"attachment-full size-full\" alt=\"Background and Border Color Change\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Background-and-Border-Color-Change.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Background-and-Border-Color-Change-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Background-and-Border-Color-Change-768x452.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Background-and-Border-Color-Change-620x365.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In Switcher Style options, we\u2019ve made sure to improve the visibility and contrast of our element by changing the inactive button color (or rather, the \u201cNormal\u201d Background Color of the button) to a paler shade (#dddddd).<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=\"498\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Background-Color-Change.jpg\" class=\"attachment-full size-full\" alt=\"Switcher Background Color Change\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Background-Color-Change.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Background-Color-Change-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Background-Color-Change-768x395.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Switcher-Background-Color-Change-620x319.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To do something similar for our text, we\u2019ve gone to Item Title Style settings and changed the Title Color to white (#ffffff).<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=\"466\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-Title-Color-Change.jpg\" class=\"attachment-full size-full\" alt=\"Item Title Color Change\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-Title-Color-Change.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-Title-Color-Change-300x144.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-Title-Color-Change-768x369.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Item-Title-Color-Change-620x298.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, we\u2019ve done the same to all the colors available in Price Style (Price Color, Currency Color, and Period Color). In Price Typography, we\u2019ve added the font family Playfair Display and set the Weight to 300. In the Currency Typography, we\u2019ve added the same font family as in Price Typography and set the Weight to default.<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=\"464\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-Style-Change.jpg\" class=\"attachment-full size-full\" alt=\"Price Style Change\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-Style-Change.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-Style-Change-300x144.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-Style-Change-768x368.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Price-Style-Change-620x297.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, in the Description Style, we\u2019ve changed the Description Color to white (#ffffff) as well.<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=\"480\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Description-Color-Change.jpg\" class=\"attachment-full size-full\" alt=\"Description Color Change\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Description-Color-Change.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Description-Color-Change-300x149.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Description-Color-Change-768x380.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Description-Color-Change-620x307.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This is only one example of how you can make one element stand out from the rest of the elements, even if you group them all together. Feel free to make any adjustments of your own.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the final column, we\u2019ve simply copied the second pricing calculator and styled only some of the elements a bit differently.<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=\"446\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Altogether.jpg\" class=\"attachment-full size-full\" alt=\"Altogether\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Altogether.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Altogether-300x138.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Altogether-768x353.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Altogether-620x285.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, close down the Navigator and <strong><em>Publish\/Update<\/em> your page once you\u2019re done.<\/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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Update-the-Page.jpg\" class=\"attachment-full size-full\" alt=\"Update the Page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Update-the-Page.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Update-the-Page-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Update-the-Page-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Update-the-Page-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And here\u2019s the final look at our pricing calculator widget.<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=\"544\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Pricing-Calculator-Final-Look.jpg\" class=\"attachment-full size-full\" alt=\"Pricing Calculator Final Look\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Pricing-Calculator-Final-Look.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Pricing-Calculator-Final-Look-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Pricing-Calculator-Final-Look-768x431.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/10\/Pricing-Calculator-Final-Look-620x348.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\">Wrapping Things Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]That completes all the options available in the Qi Addons for Elementor\u2019s highly flexible Pricing Calculator widget. As you can see, you\u2019ve got plenty of different customization and styling options you can play around with to create different visually appealing looks for your element. You can go as in-depth as you like, adjusting the switch button colors and borders, setting different button looks, adding and styling button icons, adjusting different margins, and plenty more.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Regardless of the design you end up going for, just make sure to follow the instructions we\u2019ve shared with you above carefully. By doing so, you\u2019ll surely be able to create practical pricing calculator elements for your WordPress site and help make things a lot easier for your customers while they\u2019re deciding on their purchase.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how to create a professional-looking pricing calculator in WordPress using the Qi Addons for Elementor plugin and its versatile Pricing Calculator widget.<\/p>\n","protected":false},"author":2,"featured_media":40911,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[315,314,108],"class_list":["post-40816","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-calculator","tag-pricing","tag-qi-addons"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/40816","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=40816"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/40816\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/40911"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=40816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=40816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=40816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}