{"id":3000,"date":"2021-06-23T08:09:57","date_gmt":"2021-06-23T08:09:57","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=3000"},"modified":"2023-04-24T08:41:00","modified_gmt":"2023-04-24T08:41:00","slug":"how-to-make-price-lists-in-wordpress-with-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/","title":{"rendered":"How to Make Price Lists in WordPress with Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3000\" class=\"elementor elementor-3000\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1fbfd5f6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1fbfd5f6\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4d4a229b\" data-id=\"4d4a229b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-50b44aeb elementor-widget elementor-widget-video\" data-id=\"50b44aeb\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=TVaE00n14oc&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6a827c24 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6a827c24\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5145ff08\" data-id=\"5145ff08\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2d4b1b1e elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"2d4b1b1e\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-7591\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-7591\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-7592\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-7592\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-7591\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-7591\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-7591\" tabindex=\"0\" hidden=\"false\"><p>The Price List widget lets you create catalogs and menus that include pricing. This is a great way to beautifully showcase your products or services and their pricing.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-7592\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-7592\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-7592\" tabindex=\"0\" hidden=\"hidden\"><p>hey youtubers this is Noah from<br \/>Elementor again now I&#8217;ll be teaching you<br \/>about the prices list widget this<br \/>practical widget makes listing prices on<br \/>your page a much easier job as it<br \/>enables you to do so uniquely with only<br \/>a few clicks and adjustments so first<br \/>I&#8217;ll search for the widget and drag it<br \/>in and once it&#8217;s tracked and you will<br \/>see the content tab and the style tab in<br \/>the content area you have full control<br \/>over the widgets contents now here you<br \/>have the list of all the items in the<br \/>widget you could duplicate them and<br \/>delete them and you could add as many<br \/>items as you want by clicking here just<br \/>delete them now by clicking on each item<br \/>you have its settings so first you have<br \/>price where you could insert the price<br \/>of the item and you have title and<br \/>description where you could insert the<br \/>title and description of the item you<br \/>have image where you could choose the<br \/>image from the media library say I pick<br \/>this image see how it&#8217;s displayed and<br \/>you could insert a link for every item<br \/>with the option of opening it in a new<br \/>tab by clicking here so that was the<br \/>content area of this widget moving over<br \/>to the style area of the widget where we<br \/>have full control over the list style<br \/>image style and item style so in the<br \/>list style we have for the title and<br \/>price description and separator so for<br \/>the title and price we have the color<br \/>where you could choose the color of the<br \/>title and price okay and we have the<br \/>typography where you have the typical<br \/>typography options and such as size<br \/>[Music]<br \/>family wait transform style line hide<br \/>and letter-spacing next we have for the<br \/>description same thing we have the color<br \/>you could choose the color of the<br \/>description and it&#8217;s typography as well<br \/>and then we have the separator where we<br \/>could choose the type of the style of<br \/>separator from solid dotted &#8211; double or<br \/>none at all okay and once you choose a<br \/>separator if you choose none then you<br \/>don&#8217;t have the rest of the options but<br \/>if we do choose a style we have the<br \/>weight where you could choose the weight<br \/>of the separator and the color okay and<br \/>the spacing where we could choose we<br \/>could set the exact spacing from the<br \/>title and the prices see how it affects<br \/>the spacing all right and moving on to<br \/>the image style options here we have the<br \/>image size you could set it from<br \/>thumbnail all the way to full and<br \/>customize so if we set it as full we&#8217;ll<br \/>leave it at some male for now and you<br \/>have border-radius where you could set<br \/>the border radius of the edges of the<br \/>image so say I want a rounded image<br \/>I&#8217;ll give it 50 even rounder okay<br \/>depends on the image itself and you have<br \/>spacing where you could set the exact<br \/>spacing between the image and the<br \/>contents meaning the title prices and<br \/>the description<br \/>okay moving on to the item style options<br \/>here we have the rogue app where you<br \/>could set the exact spacing between each<br \/>and every item and we have the vertical<br \/>align which is relative to the image so<br \/>right now as you can see it&#8217;s top so<br \/>it&#8217;s more to the top of the image if we<br \/>set as bottom set to the bottom and<br \/>center alright so those were the style<br \/>options for the price list widget so now<br \/>I&#8217;ll just show you a few quick examples<br \/>how to set a creative priceless widget<br \/>on your page scrolling right down we<br \/>have here this section with a rather<br \/>standard priceless widget now here each<br \/>list item has its image so you can see<br \/>here we chose an image for each list<br \/>item okay and for the style we just<br \/>played around with the colors and<br \/>typography and look here as you could<br \/>see that separator is set as a solid<br \/>style instead of dashed or dotted<br \/>scrolling down we have another display<br \/>really nice display for the widget now<br \/>here it&#8217;s in three different columns<br \/>each one is a standard priceless widget<br \/>but we gave with the style we gave it<br \/>different topographies we played around<br \/>with the colors and typography is here<br \/>and here the separator is dotted and<br \/>next we have your section now here each<br \/>list item also has an image but look<br \/>here under style image style as you<br \/>could see we gave it first of all the<br \/>image sizes customize and we gave it a<br \/>border radius of 50 pixels to make it<br \/>completely rounded and here we also have<br \/>a border radius we&#8217;ll go down to the<br \/>image style here the image size is also<br \/>customized but we also have here a<br \/>border radius of 8 which makes it a bit<br \/>rounded on the edges and here too we<br \/>have a bit more typography different<br \/>types of separators etc now that you<br \/>know how to use this widget you could<br \/>display prices in a much more creative<br \/>and interesting way I hope you enjoyed<br \/>this video for more videos and tutorials<br \/>subscribe our youtube channel or visit<br \/>us at docs.bmc.com<br \/>[Music]<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview The Price List widget lets you create catalogs and menus that include pricing. This is a great way to beautifully showcase your products or services and their pricing. Transcript hey youtubers this is Noah from Elementor again now I\u2019ll be teaching you about the prices list widget this practical widget makes listing [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":9703,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-3000","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Make Price Lists in WordPress with Elementor - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make Price Lists in WordPress with Elementor - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview The Price List widget lets you create catalogs and menus that include pricing. This is a great way to beautifully showcase your products or services and their pricing. Transcript hey youtubers this is Noah from Elementor again now I\u2019ll be teaching you about the prices list widget this practical widget makes listing [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T08:09:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-24T08:41:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Price-List-Widget.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make Price Lists in WordPress with Elementor - Academy","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:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Make Price Lists in WordPress with Elementor - Academy","og_description":"Overview Transcript Overview The Price List widget lets you create catalogs and menus that include pricing. This is a great way to beautifully showcase your products or services and their pricing. Transcript hey youtubers this is Noah from Elementor again now I\u2019ll be teaching you about the prices list widget this practical widget makes listing [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-23T08:09:57+00:00","article_modified_time":"2023-04-24T08:41:00+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Price-List-Widget.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Make Price Lists in WordPress with Elementor","datePublished":"2021-06-23T08:09:57+00:00","dateModified":"2023-04-24T08:41:00+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/"},"wordCount":953,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Price-List-Widget.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/","url":"https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/","name":"How to Make Price Lists in WordPress with Elementor - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Price-List-Widget.jpg","datePublished":"2021-06-23T08:09:57+00:00","dateModified":"2023-04-24T08:41:00+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Price-List-Widget.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Price-List-Widget.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-make-price-lists-in-wordpress-with-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Make Price Lists in WordPress with Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=3000"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3000\/revisions"}],"predecessor-version":[{"id":9391,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3000\/revisions\/9391"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/9703"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=3000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=3000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=3000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}