{"id":1336,"date":"2019-01-31T09:17:26","date_gmt":"2019-01-31T09:17:26","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=1336"},"modified":"2023-01-16T11:08:14","modified_gmt":"2023-01-16T11:08:14","slug":"how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget\/","title":{"rendered":"How to Use Price List Widget"},"content":{"rendered":"\n<p>The JetElements Price List widget for Elementor provides a stylish way to display products and services with the corresponding prices. You will definitely need it if you sell anything via the Internet or want to create pricing for specific services or projects.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/pricing-list-example.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/pricing-list-example-2x.png 2x\" alt=\"Price List example\" class=\"wp-image-20853\"><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-the-price-list-widget-to-the-page\">Add the Price List Widget to the Page<\/h2>\n\n\n\n<p>Go to the website&#8217;s dashboard and open the page where you need a price list with the Elementor page builder. Find the <strong>Price List<\/strong> widget, and drop it into a new section. If you have two or three columns inside the section, you can add several pricing lists. Thus you\u2019ll be able to display more items and let the visitors compare the lists.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/price-list-widget-1.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/price-list-widget-2x.png 2x\" alt=\"Price List widget\" class=\"wp-image-20851\"><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-price-list-items\">Add Price List Items<\/h2>\n\n\n\n<p>Navigate to the<strong> <em>Content &gt; General<\/em><\/strong> menu section. Each option on the list is added manually as an item. Here you can add as many items as you need by clicking the &#8220;<strong>Add Item<\/strong>&#8221; button. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/price-list-general-settings.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/price-list-general-settings-2x.png 2x\" alt=\"Price List general settings\" class=\"wp-image-20847\"><\/figure><\/div>\n\n\n\n<p>Fill in the Title, Price, and <strong>Description<\/strong> fields. Upload the<strong> Image<\/strong> and add the <strong>URL<\/strong> addresses if you want your visitors to get redirected every time they click an image.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/price-list-item.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/price-list-item-2x.png 2x\" alt=\"Price List item\" class=\"wp-image-20849\"><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"style-the-price-list-up\">Style the Price List Up<\/h2>\n\n\n\n<p>Move on to the <strong>Style<\/strong> menu tab. Here you can change the appearance of the price list. You can add a background picture, change forts and colors, use icons, and create a design that suits your needs best. If you need some inspiration &#8211; go and take a look at the <a href=\"https:\/\/crocoblock.com\/widgets\/price-list\/\">price list examples<\/a>.<\/p>\n\n\n\n<p>When you are done with the Price list widget &#8211; click the &#8220;<strong>Update<\/strong>&#8221; button and check how the result will look like on the front end.<\/p>\n\n\n\n<p>The price list is finally complete. Now you can display the benefits of your services and products using the simple and stylish Price list widget.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial reveals the whole process of adding and customizing the Pricing List widget in the Elementor page builder.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[512],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JetElements: How to Display a Price List on the Website | Crocoblock<\/title>\n<meta name=\"description\" content=\"Discover a comprehensive guide of creating and customizing the Pricing List widget from JetElements plugin for Elementor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JetElements: How to Display a Price List on the Website | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Discover a comprehensive guide of creating and customizing the Pricing List widget from JetElements plugin for Elementor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-16T11:08:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/pricing-list-example.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget\/\",\"name\":\"JetElements: How to Display a Price List on the Website | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-01-31T09:17:26+00:00\",\"dateModified\":\"2023-01-16T11:08:14+00:00\",\"description\":\"Discover a comprehensive guide of creating and customizing the Pricing List widget from JetElements plugin for Elementor.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use Price List Widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JetElements: How to Display a Price List on the Website | Crocoblock","description":"Discover a comprehensive guide of creating and customizing the Pricing List widget from JetElements plugin for Elementor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget\/","og_locale":"en_US","og_type":"article","og_title":"JetElements: How to Display a Price List on the Website | Crocoblock","og_description":"Discover a comprehensive guide of creating and customizing the Pricing List widget from JetElements plugin for Elementor.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget\/","og_site_name":"Help Center","article_modified_time":"2023-01-16T11:08:14+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/pricing-list-example.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget\/","name":"JetElements: How to Display a Price List on the Website | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-01-31T09:17:26+00:00","dateModified":"2023-01-16T11:08:14+00:00","description":"Discover a comprehensive guide of creating and customizing the Pricing List widget from JetElements plugin for Elementor.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-a-price-list-to-the-page-built-with-elementor-using-jetelements-price-list-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Use Price List Widget"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/1336"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=1336"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=1336"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=1336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}