{"id":54977,"date":"2015-09-25T03:26:42","date_gmt":"2015-09-25T07:26:42","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=54977"},"modified":"2017-08-16T04:43:20","modified_gmt":"2017-08-16T08:43:20","slug":"monstroid-how-to-create-a-pricing-table","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/monstroid-how-to-create-a-pricing-table.html","title":{"rendered":"Monstroid. How to create a pricing table"},"content":{"rendered":"<p>This tutorial shows you how to create a <strong>pricing table<\/strong> in the Monstroid theme.<\/p>\r\n\t<a href=\"http:\/\/www.youtube.com\/watch?v=uwd8k0BQYyA?width=1280&amp;height=720\" rel=\"prettyPhoto\">Monstroid. How to create a pricing table<\/a>\r\n\r\n<p>A <strong>pricing table<\/strong> can be created by outputting <strong>Services<\/strong> custom posts by the means of the <strong>Cherry Services<\/strong> shortcode.<\/p>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-3-(835-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>\r\n\t<h3 class=\"custom\">Add New Service<\/h3>\r\n\r\n\t<p>In order to add a new service, you need to perform the following:<\/p>\r\n\r\n\t<ol>\r\n\t\t<li>\r\n\t\t\t<p>In your <strong>Dashboard<\/strong> go to <strong>Services -> Add New<\/strong>. Enter a <strong>title<\/strong> and add the <strong>content<\/strong> (optional):<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-1-300x169.jpg\" alt=\"Monstroid._How_to_create_a_pricing_table-1\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-54978\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-1-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-1-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-1-1024x576.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-1.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t\t<\/li>\r\n\r\n\t\t<li>\r\n\t\t\t<p>Scroll down to the <strong>Services Options<\/strong> and fill out the <strong>Service features description<\/strong> and <strong>Price<\/strong> fields.<\/p>\r\n\t\t\t<p>The <strong>Service features description<\/strong> has to be an HTML unordered list, for example:<\/p>\r\n<pre class=\"brush:html\">\r\n&lt;ul&gt;\r\n&lt;li&gt;&lt;strong&gt;10GB&lt;\/strong&gt; Storage amount&lt;\/li&gt;\r\n&lt;li&gt;&lt;strong&gt;Unlimited&lt;\/strong&gt; users&lt;\/li&gt;\r\n&lt;li&gt;&lt;strong&gt;30GB&lt;\/strong&gt; Bandwidth&lt;\/li&gt;\r\n&lt;li&gt;&lt;strong&gt;20&lt;\/strong&gt; MySQL Databases&lt;\/li&gt;\r\n&lt;li class=\"full\"&gt;&lt;i class=\"fa fa-check\"&gt;&lt;\/i&gt;&lt;\/li&gt;\r\n&lt;li class=\"full\"&gt;Enhanced Security&lt;\/li&gt;\r\n&lt;li class=\"full\"&gt;Retina Display Ready&lt;\/li&gt;\r\n&lt;li class=\"full\"&gt;&lt;div class=\"rating-wrap\"&gt;&lt;div class=\"rating\"&gt;&lt;div class=\"stars three\"&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n<\/pre>\r\n\t\t\t<p>The <strong>Price<\/strong> field should contain information about the price of the service. You can add HTML tags for a nicer look, for example:<\/p>\r\n<pre class=\"brush:html\">\r\n&lt;sup&gt;$&lt;\/sup&gt;85 &lt;sup class=\"small\"&gt;\/monthly&lt;\/sup&gt;\r\n<\/pre>\r\n\t\t\t\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-2-300x169.jpg\" alt=\"Monstroid._How_to_create_a_pricing_table-2\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-54979\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-2-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-2-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-2-1024x576.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-2.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t\t<\/li>\r\n\r\n\t\t<li>\r\n\t\t\t<p>You can also specify the <strong>URL to order this service<\/strong>, it is optional. After you have filled out all fields and chosen additional options for your service post, assign it to a specific category like <strong>Price blocks<\/strong> and set the featured image.<\/p>\r\n\t\t<\/li>\r\n\r\n\t\t<li>\r\n\t\t\t<p><strong>Publish<\/strong> your new service post:<\/p>\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-3-300x169.jpg\" alt=\"Monstroid._How_to_create_a_pricing_table-3\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-54980\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-3-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-3-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-3-1024x576.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-3.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t\t<\/li>\r\n\t<\/ol>\r\n\t<h3 class=\"custom\">Add Pricing Table<\/h3>\r\n\t<p>In order to add a pricing table, you need to perform the following:<\/p>\r\n\t<ol>\t\t<li>\r\n\t\t\t<p>In your <strong>Dashboard<\/strong> go to <strong>Pages -> Add New<\/strong>. Enter a <strong>title<\/strong> and add the <strong>content<\/strong> (optional). If you&#8217;d like to add a pricing table to an existing page, skip this step:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-4-300x169.jpg\" alt=\"Monstroid._How_to_create_a_pricing_table-4\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-54981\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-4-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-4-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-4-1024x576.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-4.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t\t<\/li>\r\n\r\n\t\t<li>\r\n\t\t\t<p>Click on the <strong>Insert shortcode<\/strong> button which is located above the content editor and to the right of the <strong>Add Media<\/strong> button. In the shortcode search bar enter <strong>&#8220;Services&#8221;<\/strong>. The <strong>Services<\/strong> option will be brought up to the front view. Select the option:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-5.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-5-300x169.jpg\" alt=\"Monstroid._How_to_create_a_pricing_table-5\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-54982\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-5-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-5-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-5-1024x576.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-5.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t\t<\/li>\r\n\r\n\t\t<li>\r\n\t\t\t<p>The <strong>Services<\/strong> shortcode has menu attributes which allow you to customize the pricing table to suit your needs. But before you turn a services grid into a pricing table, you need to specify a few necessary attributes for the shortcode.<\/p>\r\n\t\t\t<ul class=\"list\">\r\n\t\t\t\t<li>\r\n\t\t\t\t\t<p>Choose the <strong>Category<\/strong> which your price posts have. For example, the <strong>Price blocks<\/strong> category.<\/p>\r\n\t\t\t\t<\/li>\r\n\t\t\t\t<li>\r\n\t\t\t\t\t<p>Set the <strong>Column class<\/strong> for each of the four device sizes. For example, if you&#8217;d like your pricing table to be displayed in <strong>one column<\/strong> on smart-phones and in <strong>tree columns<\/strong> on all other devices, choose the options <strong>12-4-4-4<\/strong>.<\/p>\r\n\t\t\t\t<\/li>\r\n\t\t\t\t<li>\r\n\t\t\t\t\t<p>Select the <strong>Shortcode template<\/strong>. Currently, we have 7 <strong>price templates<\/strong>:<\/p>\r\n\t\t\t\t<\/li>\r\n\t\t\t<\/ul>\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-6.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-6-300x169.jpg\" alt=\"Monstroid._How_to_create_a_pricing_table-6\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-54983\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-6-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-6-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-6-1024x576.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-6.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t\t<\/li>\r\n\t\t<li>\r\n\t\t\t<p>After you have set all attributes for the <strong>Services<\/strong> shortcode, click on the <strong>Insert Shortcode<\/strong> button and <strong>Publish<\/strong> the page. You will get a nice-looking pricing table:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-7.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-7-300x169.jpg\" alt=\"Monstroid._How_to_create_a_pricing_table-7\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-54984\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-7-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-7-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-7-1024x576.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/09\/Monstroid._How_to_create_a_pricing_table-7.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t\t<\/li>\r\n\t<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=uwd8k0BQYyA?width=1280&amp;height=720\" rel=\"prettyPhoto\">Monstroid. How to create a pricing table<\/a>\r\n\r\n<p>We would also recommend you to read our guide <a href=\"https:\/\/www.templatemonster.com\/blog\/create-website-2017-ultimate-guide\/\" title=\"How much does it cost to build a website\" target=\"_blank\">&#8220;How much does it cost to build a website?&#8221;<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows you how to create a <strong>pricing table<\/strong> in the Monstroid theme.<\/p>\n","protected":false},"author":85,"featured_media":54988,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2017,728],"tags":[2019,1700,1085],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/54977"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=54977"}],"version-history":[{"count":3,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/54977\/revisions"}],"predecessor-version":[{"id":82708,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/54977\/revisions\/82708"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/54988"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=54977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=54977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=54977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}