{"id":2947,"date":"2021-06-23T07:33:17","date_gmt":"2021-06-23T07:33:17","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2947"},"modified":"2023-04-24T08:43:28","modified_gmt":"2023-04-24T08:43:28","slug":"how-to-make-price-tables-in-wordpress-with-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-make-price-tables-in-wordpress-with-elementor\/","title":{"rendered":"How to Make Price Tables in WordPress With Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2947\" class=\"elementor elementor-2947\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4107c187 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4107c187\" 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-7ab8a79f\" data-id=\"7ab8a79f\" 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-2dd950a5 elementor-widget elementor-widget-video\" data-id=\"2dd950a5\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=77p5VIWsL58&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-7a242947 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7a242947\" 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-5c2c5b93\" data-id=\"5c2c5b93\" 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-2e6817db elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"2e6817db\" 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-7781\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-7781\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-7782\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-7782\" 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-7781\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-7781\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-7781\" tabindex=\"0\" hidden=\"false\"><p>Learn how to create price tables on WordPress with Elementor Website Builder. Make personalized and beautiful pricing tables using our drag-and-drop visual editor for WordPress.<\/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-7782\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-7782\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-7782\" tabindex=\"0\" hidden=\"hidden\"><p>\u00a0Hi, guys.<br \/>This is Josh from Elementor,<br \/>and today, I&#8217;m going<br \/>to show you how to use<br \/>the Price Table widget.<br \/>Price Table widget<br \/>is a great widget for any business website<br \/>that needs to present<br \/>its products or services<br \/>in a visually appealing, comparable table.<br \/>In our widgets panel, you<br \/>will find under Pro Elements<br \/>the Price Table widget.<br \/>Let&#8217;s drag it into our page.<br \/>Now, like any other element or widget,<br \/>Price Table consists of three tabs.<br \/>The content tab,<br \/>in which we can edit the<br \/>content of the widget,<br \/>the different parts and<br \/>different areas of the content;<br \/>the style tab, in which<br \/>we can define the styling<br \/>of all those different<br \/>elements of the widget;<br \/>and the advanced tab,<br \/>where we can find some<br \/>advanced styling options.<br \/>Let&#8217;s get back to the content tab.<br \/>In the content tab, you<br \/>will find the header section<br \/>where there is a title and a subtitle;<br \/>the pricing section, where<br \/>you can type in the price,<br \/>choose a currency symbol,<br \/>choose the period;<br \/>the features section, where you can create<br \/>a list of features for<br \/>this product or plan;<br \/>the footer area, where<br \/>you can find a button<br \/>and add some additional text;<br \/>and lastly, a ribbon,<br \/>which is a nice addition<br \/>for any price table.<br \/>Now, let&#8217;s check out the details.<br \/>In the header area,<br \/>I&#8217;m going to type in<br \/>the title for my plan.<br \/>And the subtitle.<br \/>Now let&#8217;s move onto the pricing section.<br \/>In the pricing section,<br \/>I can choose the currency<br \/>symbol of the price.<br \/>In this case, it&#8217;s set to dollar.<br \/>We can change it to euro,<br \/>or let&#8217;s say pound sterling.<br \/>I can type in the price.<br \/>In our case, I&#8217;m gonna go for 19.90.<br \/>Notice how Elementor automatically<br \/>detects the decimal point<br \/>and turns the fractional<br \/>part into a smaller number.<br \/>If I remove the decimal point,<br \/>we will get a whole number.<br \/>As soon as I add a decimal point,<br \/>it&#8217;s separated to the integer<br \/>part and the decimal part.<br \/>Also notice you can type in<br \/>a word instead of a number.<br \/>Let&#8217;s say, Free.<br \/>Note how the currency symbol automatically<br \/>is not being shown in case of a word.<br \/>I&#8217;m going to stick to 19.90.<br \/>That&#8217;s gonna work for us.<br \/>Now, in case this price is<br \/>a sale, I have an option<br \/>of switching it on.<br \/>Then I can type in the<br \/>original price of this product.<br \/>Let&#8217;s make it 39.<br \/>Then we have the period.<br \/>The period could be anything, really.<br \/>It could be yearly.<br \/>It could also be something<br \/>like, there, user,<br \/>or even&#8230;<br \/>It&#8217;s really up to you.<br \/>I don&#8217;t think I&#8217;m gonna<br \/>stick with the sale.<br \/>It&#8217;s gonna be just 19.90.<br \/>All right, now let&#8217;s move<br \/>onto the features area.<br \/>The features list is a repeater field.<br \/>It&#8217;s already populated<br \/>with three existing items.<br \/>Each item consists of a text, an icon,<br \/>and a color picker for the icon.<br \/>Okay, that looks nice.<br \/>I&#8217;m just gonna duplicate this list item.<br \/>All right, that looks nice.<br \/>We can change the text for one of them,<br \/>like something like Premium.<br \/>Let&#8217;s move onto the next part,<br \/>which is the footer area.<br \/>In the footer area, there&#8217;s<br \/>a button and additional text.<br \/>So, let&#8217;s type in some<br \/>alternative text for the button.<br \/>Start Now.<br \/>And the text I&#8217;ll add, the<br \/>additional text, is going to be<br \/>Perfect.<br \/>Lastly, I&#8217;m going to change<br \/>the text for this ribbon<br \/>by typing in 50% off,<br \/>and notice, you can change the location,<br \/>the position of this<br \/>ribbon from left to right,<br \/>or you can entirely hide the ribbon<br \/>if you&#8217;re not interested in showing it.<br \/>Okay, now that we&#8217;re<br \/>done entering the content<br \/>for the price table,<br \/>let&#8217;s go to the Style tab.<br \/>Let&#8217;s have a look at the<br \/>style options for the header.<br \/>So first thing you have here<br \/>is the background color.<br \/>You can set the background<br \/>color for the whole header.<br \/>I&#8217;m going to chose this purple color.<br \/>That looks nice.<br \/>I think I&#8217;m also gonna add<br \/>some spacing, some padding,<br \/>at the top and at the<br \/>bottom of the header.<br \/>I don&#8217;t want it to go on both sides,<br \/>so I&#8217;m gonna make sure the<br \/>variables are not linked.<br \/>Top is gonna be 40.<br \/>And I&#8217;m gonna do the bottom 40 as well.<br \/>Next I have the title<br \/>and the subtitle color<br \/>and typography settings.<br \/>Choose a, maybe a yellow<br \/>color for the title.<br \/>Let&#8217;s play with the<br \/>typography a little bit.<br \/>All your usual typography settings here.<br \/>You can see the size,<br \/>font family, the weight,<br \/>transform, style, line height,<br \/>letter spacing, et cetera.<br \/>I think I&#8217;m gonna just change<br \/>the transform of the text<br \/>to uppercase to make it<br \/>a little more prominent<br \/>and just make it a little larger.<br \/>Yeah, that looks nice.<br \/>I think I&#8217;m just gonna<br \/>leave the subtitle as it is,<br \/>but if you want, you can<br \/>obviously change the color<br \/>and typography for the<br \/>subtitle as well as the title.<br \/>Next, we&#8217;re going to move<br \/>onto styling the pricing area.<br \/>So, first thing is, you<br \/>have the background color<br \/>for the whole pricing area.<br \/>Just like in the header<br \/>where you have the purple<br \/>color set as the background,<br \/>we can set a background<br \/>color for the pricing area.<br \/>I don&#8217;t think I&#8217;m going to change<br \/>that background color for this area.<br \/>I&#8217;m just gonna leave it<br \/>transparent as it is.<br \/>We can also change the<br \/>padding for this area.<br \/>This can be anything we want,<br \/>like 80 will give us a<br \/>large padding at the top.<br \/>Maybe 80 at the bottom.<br \/>This can give us a lot<br \/>of space for the price.<br \/>We can change the color and the typography<br \/>for the price area.<br \/>The interesting this<br \/>is, you choose a color,<br \/>and it affects all<br \/>those elements together.<br \/>You see?<br \/>The currency and the price<br \/>itself and the fractional part<br \/>are all affected by the color change,<br \/>but when it comes to the<br \/>typography, if we change the size,<br \/>notice how it changes,<br \/>it all changes together,<br \/>but the fractional part<br \/>and the currency symbol<br \/>are relative to the size<br \/>of the integer part.<br \/>You need to keep that in<br \/>mind, because afterwards,<br \/>we&#8217;re gonna see how we can change the size<br \/>for the currency symbol<br \/>and the fractional part individually.<br \/>But it&#8217;s always going to be<br \/>in relation to the size<br \/>of the integer part.<br \/>I think I&#8217;m gonna make<br \/>this price in bold font.<br \/>So let&#8217;s make the weight 800.<br \/>That looks more like it.<br \/>And I think that&#8217;s pretty good.<br \/>Now here&#8217;s the currency symbol settings.<br \/>The currency symbol, like I said before,<br \/>if I wanna change the size<br \/>of the currency symbol,<br \/>it&#8217;s going to be set<br \/>as a percent of the integer part,<br \/>meaning if I go for 100%,<br \/>it&#8217;s going to be exactly the<br \/>same size as the integer part,<br \/>and if I go for 50%, it&#8217;s going to be<br \/>exactly half the size of the integer part.<br \/>In addition, I can also set<br \/>the vertical position<br \/>of the currency symbol.<br \/>I can choose whether<br \/>it&#8217;s gonna be set to top,<br \/>middle, or to the bottom.<br \/>I think I&#8217;m gonna go for the middle.<br \/>And I&#8217;m gonna keep it at maybe 30 or 33%.<br \/>Yeah, that looks nice.<br \/>And I&#8217;m gonna do the same<br \/>thing for the fractional part.<br \/>I&#8217;m also gonna set it to 33%<br \/>and set it to the middle.<br \/>Okay, I think I like how it looks.<br \/>Next, we have the period.<br \/>The period, the lettering,<br \/>has its own color setting.<br \/>And it has the typography control,<br \/>where I can choose which font<br \/>and the size and all those other variables<br \/>that we&#8217;re already familiar with.<br \/>And another cool thing is I can choose<br \/>whether it is displayed below the price<br \/>or beside it.<br \/>Let&#8217;s check that out.<br \/>That&#8217;s interesting.<br \/>Okay, so you can see<br \/>how that can give you<br \/>some more flexibility<br \/>with different ideas for your design.<br \/>I think I&#8217;m gonna keep it below.<br \/>Okay, now let&#8217;s move<br \/>on to the next section.<br \/>The next section is the features part,<br \/>the feature list that you see right here.<br \/>Let&#8217;s have a look at the options here.<br \/>So just like with the<br \/>previous two sections,<br \/>we can set the background color.<br \/>I&#8217;m gonna keep it transparent.<br \/>And we also have the padding.<br \/>So I can add padding at<br \/>the top and at the sides,<br \/>which I&#8217;m also gonna<br \/>keep it the way it was.<br \/>Now I can choose the color<br \/>of the text in the list.<br \/>It could be anything.<br \/>And we can choose the typography settings.<br \/>We can set the different,<br \/>different sizes or different font family<br \/>or any other typography setting<br \/>that we&#8217;re familiar with.<br \/>As you can see, right now,<br \/>it&#8217;s aligned to the center.<br \/>The text align is centered.<br \/>We can set it to align<br \/>left or align right.<br \/>If we set it to any of those<br \/>left or right alignments,<br \/>we might wanna change<br \/>the width of how wide<br \/>does the list go.<br \/>So if we want it to be a<br \/>little bit more centered,<br \/>we can make the width a little smaller,<br \/>and now it&#8217;s nice and centered.<br \/>Okay, the next part is the<br \/>dividers between each list item.<br \/>We can choose whether to<br \/>show those dividers or not.<br \/>If we show them, we can<br \/>choose how they look.<br \/>So here&#8217;s the style of the divider.<br \/>Could be solid, like it is right now.<br \/>It could be double,<br \/>which you can only notice<br \/>once your weight is bigger than two,<br \/>like, let&#8217;s say three or more.<br \/>Now we can see how it&#8217;s a double line.<br \/>Dotted or dashed.<br \/>Now again, we can choose the width.<br \/>We can set the width of the dividers,<br \/>anywhere from zero to 100%<br \/>of the width of the widget.<br \/>I kind of like that dashed look,<br \/>but I think I&#8217;m gonna<br \/>keep it a little shorter.<br \/>That looks kind of nice.<br \/>And the color works for me, too.<br \/>The next option is the gap,<br \/>the gap between the<br \/>divider and the list item.<br \/>So the bigger the gap,<br \/>the more spacious the<br \/>list is gonna become.<br \/>I&#8217;m gonna keep it relatively tight.<br \/>I think that looks kind of nice.<br \/>Now, let&#8217;s move to the last<br \/>part, which is the footer.<br \/>So in the footer, just like<br \/>in the previous sections<br \/>before it, we can, again,<br \/>decide what&#8217;s gonna be<br \/>the background color,<br \/>which I&#8217;m gonna keep<br \/>it clear at this point.<br \/>We can set the padding.<br \/>I think I&#8217;m gonna make the<br \/>padding a little bigger,<br \/>but just on the top and on the bottom.<br \/>Let&#8217;s make it 50.<br \/>Maybe 70 at the top.<br \/>Okay.<br \/>We can choose the size of the button.<br \/>We can make it very small or very large.<br \/>I kind of like how it looks when it&#8217;s big.<br \/>I&#8217;m going for the bold look.<br \/>So I&#8217;m gonna keep it extra large,<br \/>like a call to action.<br \/>I can choose the text color,<br \/>which I&#8217;m kind of happy<br \/>with at the moment.<br \/>Again, we can set the<br \/>typography of the button,<br \/>and we can set the background color,<br \/>which I&#8217;m going to change to yellow.<br \/>Or maybe, you know what?<br \/>Let&#8217;s give it a try.<br \/>Pink would also work.<br \/>Blue.<br \/>We can set a border.<br \/>Border width, border color.<br \/>All the regular button<br \/>settings that you might already<br \/>be familiar with from<br \/>other Elementor widgets.<br \/>I think I&#8217;m gonna leave<br \/>it without a border.<br \/>But I&#8217;m still gonna<br \/>change the border radius.<br \/>Let&#8217;s make it 60 pixels to<br \/>get a nice and round button.<br \/>And if we want, we can also<br \/>add some padding to the button,<br \/>change the padding.<br \/>We can make it any number we want.<br \/>Make it a large padding or smaller,<br \/>which I&#8217;m also gonna<br \/>keep it at the default.<br \/>Next we have the additional info line,<br \/>which is right here underneath the button,<br \/>which I&#8217;m kind of happy with<br \/>the way it looks right now,<br \/>but just, let&#8217;s have<br \/>a look at the options.<br \/>There&#8217;s the color.<br \/>We can make it any color we want.<br \/>There&#8217;s the typography,<br \/>and there&#8217;s a margin,<br \/>which we can set.<br \/>Notice the text here can<br \/>be, can get kind of long,<br \/>so you might wanna take care<br \/>of that margin at the sides.<br \/>This is why we have the<br \/>margin setting here.<br \/>Now, the last thing on the<br \/>style panel is the ribbon.<br \/>The ribbon is a real nice, cool feature<br \/>that we added to the price table.<br \/>We can set its background color.<br \/>That looks kind of neat.<br \/>We can set the text color,<br \/>which I&#8217;m currently happy with.<br \/>We can obviously set the typography.<br \/>We can make it bold, maybe.<br \/>And all the usual typography settings.<br \/>And another thing we can do<br \/>is add a box shadow to the ribbon.<br \/>Once we add box shadow,<br \/>we have a bunch of box shadow variables<br \/>that we can play with, such as the blur,<br \/>the spread, the horizontal<br \/>and vertical offset<br \/>of the shadow, which really,<br \/>only the vertical makes a<br \/>difference in this case.<br \/>I&#8217;m gonna make the color a little,<br \/>a little lighter.<br \/>Just a hint.<br \/>Yeah, that looks nice.<br \/>Also notice we can change the distance<br \/>of the ribbon from the<br \/>corner by using this control.<br \/>This way, we can determine<br \/>exactly how far it is from the corner.<br \/>Remember, we can also choose<br \/>on which side the ribbon is displayed.<br \/>This is back in the content tab.<br \/>Ribbon, horizontal position.<br \/>We can always move it to the other side.<br \/>Now that covers basically<br \/>all the different options,<br \/>the standard options, of the price table.<br \/>But here is the interesting part.<br \/>Price table is one of those,<br \/>it&#8217;s one of those widgets<br \/>where the advanced tab<br \/>actually plays a big<br \/>role in the final result.<br \/>If we go to the advanced tab,<br \/>we get to choose a bunch<br \/>of different settings<br \/>that can really give it<br \/>another nice little twist.<br \/>For example, we can add some padding.<br \/>Notice how the padding<br \/>adds some extra dimension<br \/>to the widget&#8217;s look.<br \/>So this can be an interesting idea,<br \/>especially if you choose background colors<br \/>for the footer or any other<br \/>area inside the widget.<br \/>Let&#8217;s show you an example.<br \/>If I add a background color to the footer,<br \/>we can see how the padding<br \/>makes it look more interesting.<br \/>Let&#8217;s go back to the advanced tab.<br \/>We can add a border, which<br \/>is also an interesting idea<br \/>if we want to make it look interesting.<br \/>Let&#8217;s say border type solid,<br \/>and we can choose any color we want.<br \/>I&#8217;m gonna go for the same<br \/>purple we used for the header,<br \/>and you can see how that makes<br \/>the whole widget a lot nicer.<br \/>Let&#8217;s set the border radius.<br \/>You can see how the advanced tab<br \/>really makes a big<br \/>difference in this widget.<br \/>We can add a box shadow,<br \/>which is also a nice idea.<br \/>Now, this is pretty much it.<br \/>The way I suggest to use<br \/>Price Table, if you wanna<br \/>have other columns,<br \/>which is the usual case,<br \/>is first, finish with the<br \/>way you want the general look<br \/>of how you want the price table to look,<br \/>and only then, clone the<br \/>widget and use it again<br \/>in the other two columns or<br \/>four, if that&#8217;s the case,<br \/>and just change the different colors<br \/>and text you used<br \/>for the other columns.<br \/>I&#8217;m just gonna show you a quick example.<br \/>I&#8217;m gonna remove the ribbon<br \/>on this one and on that one.<br \/>And let&#8217;s change the<br \/>color for the left one.<br \/>You can see how, with a few clicks,<br \/>you can change the look of the other plans<br \/>and give them their unique accent color.<br \/>As you can see, Price Table<br \/>is a very flexible widget.<br \/>It allows you to create<br \/>beautiful and unique designs<br \/>featuring your products and services.<br \/>I hope you&#8217;ve enjoyed this video.<br \/>Thank you for watching.<br \/>For more videos and tutorials,<br \/>please subscribe to our YouTube channel.<\/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 Learn how to create price tables on WordPress with Elementor Website Builder. Make personalized and beautiful pricing tables using our drag-and-drop visual editor for WordPress. Transcript &nbsp;Hi, guys. This is Josh from Elementor, and today, I\u2019m going to show you how to use the Price Table widget. Price Table widget is a [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":9705,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-2947","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 Tables 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-tables-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 Tables in WordPress With Elementor - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Learn how to create price tables on WordPress with Elementor Website Builder. Make personalized and beautiful pricing tables using our drag-and-drop visual editor for WordPress. Transcript &nbsp;Hi, guys. This is Josh from Elementor, and today, I\u2019m going to show you how to use the Price Table widget. Price Table widget is a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-make-price-tables-in-wordpress-with-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T07:33:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-24T08:43:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Price-Table-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=\"12 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make Price Tables 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-tables-in-wordpress-with-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Make Price Tables in WordPress With Elementor - Academy","og_description":"Overview Transcript Overview Learn how to create price tables on WordPress with Elementor Website Builder. Make personalized and beautiful pricing tables using our drag-and-drop visual editor for WordPress. Transcript &nbsp;Hi, guys. This is Josh from Elementor, and today, I\u2019m going to show you how to use the Price Table widget. Price Table widget is a [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-make-price-tables-in-wordpress-with-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-23T07:33:17+00:00","article_modified_time":"2023-04-24T08:43:28+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Price-Table-Widget.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-make-price-tables-in-wordpress-with-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-price-tables-in-wordpress-with-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Make Price Tables in WordPress With Elementor","datePublished":"2021-06-23T07:33:17+00:00","dateModified":"2023-04-24T08:43:28+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-price-tables-in-wordpress-with-elementor\/"},"wordCount":2824,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-price-tables-in-wordpress-with-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Price-Table-Widget.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-make-price-tables-in-wordpress-with-elementor\/","url":"https:\/\/elementor.com\/academy\/how-to-make-price-tables-in-wordpress-with-elementor\/","name":"How to Make Price Tables in WordPress With Elementor - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-price-tables-in-wordpress-with-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-price-tables-in-wordpress-with-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Price-Table-Widget.jpg","datePublished":"2021-06-23T07:33:17+00:00","dateModified":"2023-04-24T08:43:28+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-price-tables-in-wordpress-with-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-make-price-tables-in-wordpress-with-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-make-price-tables-in-wordpress-with-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Price-Table-Widget.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Price-Table-Widget.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-make-price-tables-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 Tables 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\/2947","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=2947"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2947\/revisions"}],"predecessor-version":[{"id":9400,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2947\/revisions\/9400"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/9705"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}