{"id":494,"date":"2020-05-09T17:25:04","date_gmt":"2020-05-09T17:25:04","guid":{"rendered":"https:\/\/phox.whmcsdes.com\/docs\/?p=494"},"modified":"2020-05-23T22:32:24","modified_gmt":"2020-05-23T22:32:24","slug":"price-table-widget","status":"publish","type":"post","link":"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/","title":{"rendered":"Price Table Widget"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-widget-pricing.png\"><img decoding=\"async\" width=\"65\" height=\"59\" src=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-widget-pricing.png\" alt=\"\" class=\"wp-image-496\"\/><\/a><\/figure>\n\n\n\n<p><strong>Price Table<\/strong> widget is helpful when you need to showcase the prices and services your company provides in an attractive and clear way. The widget has multiple options, versatile customization settings, and is easy to use.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Price Table widget Sample<\/h2>\n\n\n\n<p>On the picture below you can view Price Table widget sample.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-price-view.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"552\" src=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-price-view-1024x552.png\" alt=\"\" class=\"wp-image-498\" srcset=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-price-view-1024x552.png 1024w, https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-price-view-300x162.png 300w, https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-price-view-768x414.png 768w, https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-price-view.png 1201w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Content<\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-price-content.png\"><img decoding=\"async\" width=\"334\" height=\"663\" src=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-price-content.png\" alt=\"\" class=\"wp-image-499\" srcset=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-price-content.png 334w, https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-price-content-151x300.png 151w\" sizes=\"(max-width: 334px) 100vw, 334px\" \/><\/a><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Header<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Title<\/strong>&nbsp;\u2014 fill in the field with the Price Table widget title.<\/li><li><strong>Subtitle<\/strong>&nbsp;\u2014 here you should enter the subtitle for the price table.<\/li><li><strong>Above Title<\/strong> \u2014 here you have two options [icon, image] to use above the title.<ul><li><strong>Icon<\/strong>&nbsp;\u2014 here you can select a suitable icon to use in the widget. Select one of the available icons from the dropdown list.<\/li><li><strong>Image<\/strong>&nbsp;\u2014 here you can select a suitable image to use in the widget.<\/li><\/ul><\/li><li><strong>Strip&nbsp;\u2014 <\/strong>turn on the option if you need to apply additionally featured badge, use a custom position of the featured badge, etc.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Price<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Price<\/strong>&nbsp;\u2014 in this field, you need to define the price value to be shown.<\/li><li><strong>Discount<\/strong>&nbsp;\u2014 turn on the option if you need to apply a discount and add the original price.<\/li><li><strong>Prefix&nbsp;\u2014<\/strong> in this field you need to input the prefix for the price, usually, it is a currency symbol (you can as well leave the field empty if you don\u2019t want to use any currency prefixes).<\/li><li><strong>Suffix<\/strong>&nbsp;\u2014 here you have to define the suffix for the price (usually it indicates the frequency of payment, e.g., \u201cper month\u201d, \u201cper year\u201d, etc.).<\/li><li><strong>Description&nbsp;\u2014<\/strong> in this field, you need to define price description.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Features<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Feature Header<\/strong> \u2014 here you can add text header to the features area.<\/li><li><strong>Title<\/strong>&nbsp;\u2014 type in the feature title in this block.<\/li><li><strong>Text Decoration<\/strong>&nbsp;\u2014 choose between two options icon and image.<ul><li><strong>Icon<\/strong>&nbsp;\u2014 here you can select a suitable icon to use in the widget. Select one of the available icons from the dropdown list.<\/li><li><strong>Image<\/strong>&nbsp;\u2014 here you can select a suitable image to use in the widget.<\/li><\/ul><\/li><li><strong>Add Item<\/strong>&nbsp;\u2014 here you can add a new feature to be displayed in the price table.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Footer<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Text Before Button<\/strong>&nbsp;\u2014 here you can specify the text you want to show before the Order Button.<\/li><li><strong>Button Text<\/strong>&nbsp;\u2014 here you can input your custom Order button text (e.g., \u201cpurchase now\u201d, \u201cbuy\u201d, etc.).<\/li><li><strong>Link&nbsp;\u2014 in this field,<\/strong> you need to define the URL link that will redirect the customers to the purchase page or shopping cart.<\/li><li><strong>Text After Button<\/strong>&nbsp;\u2014 if you need to add the text below the Order button, just type in it into this field.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Style<\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-pricing-style.png\"><img loading=\"lazy\" decoding=\"async\" width=\"333\" height=\"869\" src=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-pricing-style.png\" alt=\"\" class=\"wp-image-507\" srcset=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-pricing-style.png 333w, https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-pricing-style-115x300.png 115w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/><\/a><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Table<\/h4>\n\n\n\n<p>Here you can customize the pricing table style.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Background Type<\/strong>&nbsp;\u2014 in this block you can choose, whether you want to use classic or gradient type for the pricing table background. The customization options vary for each type.<\/li><li> <strong>Classic Background Type<\/strong><ul><li><strong>Color<\/strong>&nbsp;\u2014 here you can set background color for the animated box using color picker tool.<\/li><li><strong>Image<\/strong>&nbsp;\u2014 here you can choose the image you want to use as a background. Select the image from the media library or upload it to define it as a background in this block. When the image is uploaded, you\u2019ll be able to define its position, alignment, turn on repeat, and set the necessary size. <\/li><\/ul><\/li><li><strong>Gradient Background Type<\/strong><ul><li><strong>Color<\/strong>&nbsp;\u2014 here you can set background color for the widget using color picker tool.<\/li><li><strong>Location<\/strong>&nbsp;\u2014 here you can define the proportion for the first color in the gradient background.<\/li><li><strong>Second Color&nbsp;\u2014 <\/strong>here you can set the second color to use in the gradient background.<\/li><li><strong>Location&nbsp;\u2014 <\/strong>here you can define the proportion for the second color in the gradient background.<\/li><li><strong>Type<\/strong>&nbsp;\u2014 define, if you want to use a<strong> <\/strong>linear or radial type of the gradient.<\/li><li><strong>Angle<\/strong>&nbsp;\u2014 in this block you can set the angle for the gradient (in degrees).<\/li><\/ul><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Border Type<\/strong>&nbsp;\u2014 here you can define the type of the border you need to use for the element.<\/li><li><strong>Border Radius<\/strong>&nbsp;\u2013 here you can set the border-radius to make the angles more smooth and round.<\/li><li><strong>Box Shadow<\/strong>&nbsp;\u2014 enable this option if you want to access the shadow advanced settings for this widget, and need to apply shadow for it.<\/li><li><strong>Table Padding<\/strong> \u2014 here you can set the preferable custom padding. Fill in the values for the&nbsp;top, bottom, right,&nbsp;and&nbsp;left&nbsp;padding in pixels, %, or EM to apply your custom padding.<\/li><li><strong>Order<\/strong> \u2014 here you can reorder the price table blocks by changing the inputs number values in ascending order<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Header<\/h4>\n\n\n\n<p>In this block you can apply custom colors and typography settings to the price table header.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Background Color<\/strong>&nbsp;\u2014 here you can define the suitable color for the header background. Use a color picker tool to select the necessary color.<\/li><li><strong>Title<\/strong> \u2014 here you will find a bunch of options to control the title<ul><li><strong>Title Color<\/strong>&nbsp;\u2014 here you can define the suitable color for the header title. Use a color picker tool to select the necessary color.<\/li><li><strong>Typography&nbsp;\u2014 <\/strong>turn the option on to view the typography settings. The typography settings are similar for Title, Subtitle, Pricing, Features, Footer Box, and Order Button blocks.<ul><li><strong>Size<\/strong>&nbsp;\u2014 define the font size of the animated box title.<\/li><li><strong>Family<\/strong>&nbsp;\u2014 here you can set the font family for the title.<\/li><li><strong>Weight<\/strong>&nbsp;\u2014 in this block you can select a suitable font-weight.<\/li><li><strong>Transform<\/strong>&nbsp;\u2014 here you can choose from the dropdown menu if you want the title to be shown in uppercase, lowercase, capitalize, or normal way.<\/li><li><strong>Style<\/strong>&nbsp;\u2014 in this block you can choose from the dropdown menu the style for the font. It can be normal, italic (the characters look similar to handwriting), and oblique (the characters are slightly inclined to the right).<\/li><li><strong>Line Height<\/strong>&nbsp;\u2014 in this field you can set the height of the title line.<\/li><li><strong>Letter Spacing<\/strong>&nbsp;\u2014 here you can set the space between letters.<\/li><\/ul><\/li><li><strong>Margin<\/strong> \u2014 input the values for the margins in the required fields.<\/li><\/ul><\/li><li><strong>SubTitle<\/strong> \u2014 here you will find a bunch of options to control the sub Title<ul><li><strong>SubTitle Color&nbsp;<\/strong>\u2014 here you can define the suitable color for the header subtitle. Use a color picker tool to select the necessary color.<\/li><li><strong>Typography&nbsp;\u2014<\/strong> turn the option on to view the typography settings. <\/li><\/ul><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Header Padding<\/strong> \u2014 here you can set the preferable custom padding. Fill in the values for the&nbsp;top, bottom, right,&nbsp;and&nbsp;left&nbsp;padding in pixels, %, or EM to apply your custom padding.<\/li><li><strong>Alignment<\/strong>&nbsp;\u2014 here you can define the preferable title alignment. The title can be placed to the left, to the right, or remain centered.<\/li><li><strong>Border Type<\/strong>&nbsp;\u2014 here you can define the type of the border you need to use for the element.<\/li><li><strong>Border Radius<\/strong>&nbsp;\u2013 here you can set the border-radius to make the angles more smooth and round.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Above Title<\/h4>\n\n\n\n<p>Here you can customize Above Title Options here depend on the used icon or image.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Border Type<\/strong>&nbsp;\u2014 here you can define the type of the border you need to use for the element.<\/li><li>Background Type&nbsp;\u2014 in this block you can choose, whether you want to use classic or gradient type for the pricing table background.<\/li><li><strong>Box Shadow<\/strong>&nbsp;\u2013 here you can apply the shadow for the icon or image and change the shadow\u2019s settings, such as&nbsp;color, blur, spread,&nbsp;and&nbsp;<strong>position<\/strong>.<\/li><li>in case you use an icon, you will find these options<ul><li><strong>Icon Color<\/strong>&nbsp;\u2014 here you can set the icon color for the widget using color picker tool.<\/li><li><strong>Font Size<\/strong>&nbsp;\u2014 in this block you can define the size of the icon digit (the maximum size is 500 px).<\/li><li><strong>Box Size<\/strong>&nbsp;\u2014 in this block you can define the size of the icon box (the maximum size is 100 px).<\/li><li><strong>Padding<\/strong> \u2014 here you can set the preferable custom padding. Fill in the values for the&nbsp;top, bottom, right,&nbsp;and&nbsp;left&nbsp;padding in pixels, %, or EM to apply your custom padding.<\/li><li><strong>Alignment<\/strong>&nbsp;\u2014 here you can define the preferable alignment. The element can be placed to the left, to the right, or to remain centered.<\/li><\/ul><\/li><li>in case you use an image, you will find these options<ul><li><strong>Width<\/strong>&nbsp;\u2014 here you can set the image width in px or %.<\/li><li><strong>Max Width<\/strong>&nbsp;\u2014 here you can set the maximum image width in px or %.<\/li><li>you will have two states normal, and hover, to apply<strong> Custom filters<\/strong>. and <strong>Hover Effects<\/strong>.<\/li><\/ul><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Pricing<\/h4>\n\n\n\n<p>In this block you can apply custom appearance settings to the pricing background, prefix, values and suffix typography and colors.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Background Color<\/strong>&nbsp;\u2014 here you can select the color to use it for the pricing general background.<\/li><li><strong>Prefix<\/strong>&nbsp;\u2014 here you will find a bunch of options to customize the prefix<ul><li><strong>Price Prefix Color<\/strong>&nbsp;\u2014 here you can select the preferable color for the price prefix.<\/li><li><strong>Typography<\/strong>&nbsp;\u2014 turn the option on to view the typography settings.<\/li><li><strong>Prefix Display&nbsp;\u2014 <\/strong>here you can define if you want the prefix to be displayed inline, or as a separate block.<\/li><li><strong>Vertical Currency Position&nbsp;\u2014<\/strong> here you can set the vertical position for the prefix.<\/li><\/ul><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Discount<\/strong>&nbsp;\u2014 here you will find a bunch of options to customize the Discount<ul><li><strong>Discount Color<\/strong>&nbsp;\u2014 here you can select the preferable color for the discount.<\/li><li><strong>Typography<\/strong>&nbsp;\u2014 turn the option on to view the typography settings.<\/li><\/ul><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Price Value<\/strong>&nbsp;\u2014 here you will find a bunch of options to customize the Price<ul><li><strong>Price Color<\/strong>&nbsp;\u2014 in this block you can define the color to use for the price.<\/li><li><strong>Typography<\/strong>&nbsp;\u2014 turn the option on to view the typography settings.<\/li><\/ul><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Suffix<\/strong>&nbsp;\u2014 here you will find a bunch of options to customize the <strong><strong>Suffix<\/strong><\/strong><ul><li><strong>Price Suffix Color<\/strong>&nbsp;\u2014 here you need to specify the color of the price suffix.<\/li><li><strong>Typography<\/strong>&nbsp;\u2014 turn the option on to view the typography settings.<\/li><li><strong><strong>Suffix<\/strong> Display&nbsp;\u2014 <\/strong>here you can define if you want the <strong>Suffix<\/strong> to be displayed inline, or as a separate block.<\/li><\/ul><\/li><li><strong>Description<\/strong>&nbsp;\u2014 here you will find a bunch of options to customize the <strong><strong>description<\/strong><\/strong><ul><li><strong>Price <strong>Description<\/strong> Color<\/strong>&nbsp;\u2014 here you need to specify the color of the price <strong>Description<\/strong>.<\/li><li><strong>Typography<\/strong>&nbsp;\u2014 turn the option on to view the typography settings.<\/li><li><strong>Gap<\/strong>&nbsp;\u2014 here you can add an extra gap between the price and other blocks.<\/li><\/ul><\/li><li><strong>Price Block Padding<\/strong> &nbsp;\u2014 here you can set the preferable custom padding.<\/li><li><strong>Border Type<\/strong>&nbsp;\u2014 here you can define the type of the border you need to use for the element.<\/li><li><strong>Border Radius<\/strong>&nbsp;\u2013 here you can set the border-radius to make the angles more smooth and round.<\/li><li><strong>Alignment<\/strong>&nbsp;\u2014 here you can define the preferable alignment. The element can be placed to the left, to the right, or to remain centered.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Features<\/h4>\n\n\n\n<p>In this block you can customize price table features, such as features background color and alignment.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Features Header<\/strong> \u2014 here you will find a bunch of options to control Features Header<ul><li><strong>Typography<\/strong>&nbsp;\u2014 turn the option on to view the typography settings.<\/li><li><strong>Color<\/strong>&nbsp;\u2013 here you can change the Features Header color to the one you want.<\/li><li><strong>Alignment<\/strong>&nbsp;\u2014 here you can define the preferable alignment. The element can be placed to the left, to the right, or to remain centered.<\/li><li><strong>Padding<\/strong> &nbsp;\u2014 here you can set the preferable custom padding.<\/li><\/ul><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Feature Item<\/strong> \u2014 here you will find a bunch of options to control Feature Header<ul><li><strong>Background Color&nbsp;\u2014<\/strong> here you can define the background color to use it in the background of the features.<\/li><li><strong>Features Block Padding<\/strong> &nbsp;\u2014 here you can set the preferable custom padding.<\/li><li><strong>Border Type<\/strong>&nbsp;\u2014 here you can define the type of the border you need to use for the element.<\/li><li><strong>Border Radius<\/strong>&nbsp;\u2013 here you can set the border-radius to make the angles more smooth and round.<\/li><li><strong>Alignment<\/strong>&nbsp;\u2014 here you can define the preferable alignment. The element can be placed to the left, to the right, or to remain centered.<\/li><li><strong>Typography<\/strong>&nbsp;\u2014 turn the option on to view the typography settings.<\/li><li>you will have two states normal, and hover, to apply customization.<ul><li><strong>Typography<\/strong>&nbsp;\u2014 turn the option on to view the typography settings.<\/li><li><strong>Color&nbsp;\u2014<\/strong> here you can define the color to use it in the text of the features.<\/li><li><strong>Text Indent \u2014<\/strong> here you can customize the space between text and icon.<\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Feature Icon<\/strong> \u2014 here you will find a bunch of options to control Feature Icon<ul><li><strong>Icon Size<\/strong>&nbsp;\u2014 here you can define the size of the features icons.<\/li><li><strong>Icon Color<\/strong>&nbsp;\u2014 here you can select the color you want to use for the features icons.<\/li><\/ul><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Feature Image<\/strong> \u2014 here you will find a bunch of options to control Feature Image<ul><li><strong><strong>Image<\/strong> Size<\/strong>&nbsp;\u2014 here you can define the size of the featured image.<\/li><\/ul><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Features Divider<\/strong>&nbsp;\u2014 enable the option if you want to separate features using a divider to make them stand out.<\/li><li><strong>Divider Style<\/strong>&nbsp;\u2014 here you can select the style to use for the divider. It can be solid, double, dotted, or dashed, You can also define the weight, the width, and the gap for the divider using the corresponding controls.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Footer<\/h4>\n\n\n\n<p>In this block you can customize the Footer elements, such as footer box background, typography, etc.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Background Color<\/strong>&nbsp;\u2014 click on the option to define the suitable color for the Footer box background.<\/li><li><strong>Color<\/strong>&nbsp;\u2014 here you can set the color to use it in the Footer Box.<\/li><li><strong>Typography<\/strong>&nbsp;\u2014 turn the option on to view the typography settings.<\/li><li><strong>Padding<\/strong>&nbsp;\u2013 here you can set the preferable custom padding.<\/li><li><strong>Margin<\/strong>&nbsp;\u2013 input the values for the margins in the required fields.<\/li><li><strong>Border Type<\/strong>&nbsp;\u2014 here you can define the type of the border you need to use for the element.<\/li><li><strong>Border Radius<\/strong>&nbsp;\u2013 here you can set the border-radius to make the angles more smooth and round.<\/li><li><strong>Alignment<\/strong>&nbsp;\u2014 here you can define the preferable footer box alignment. The content of the Footer Box can be placed to the left, to the right, or to remain centered.<\/li><li><strong>Order Button<\/strong>&nbsp;\u2014 here you will find a bunch of options to control the button style<ul><li><strong>Size<\/strong>&nbsp;\u2014 you can choose the set the button full width or auto.<\/li><li><strong>Add Icon<\/strong>&nbsp;\u2014 you can enable this button to add a custom icon and customize it.<\/li><li>You can switch from customizing Normal to Hover style settings. Just click on the button Hover to proceed to customize hover elements.<ul><li><strong>Background Type<\/strong>&nbsp;\u2014 here you can select a suitable background for the Order button.<\/li><li><strong>Text Color<\/strong>&nbsp;\u2014 use color picker tool to set the preferable color for the button text.<\/li><li><strong>Typography<\/strong>&nbsp;\u2014 turn the option on to view the typography settings.<\/li><li><strong>Padding<\/strong>&nbsp;\u2013 here you can set the preferable custom padding.<\/li><li><strong>Border Radius<\/strong>&nbsp;\u2013 here you can set the border-radius to make the angles more smooth and round.<\/li><li><strong>Border Type<\/strong>&nbsp;\u2014 here you can define the type of the border you need to use for the element.<\/li><li><strong>Box Shadow<\/strong>&nbsp;\u2014 enable this option if you want to access the shadow advanced settings for this widget, and need to apply shadow for it.<\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Stripe<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Background Color<\/strong>&nbsp;\u2014 click on the option to define the suitable color for the Stripe background.<\/li><li><strong>Text<\/strong> <strong>Color<\/strong>&nbsp;\u2014 here you can set the color to use it in the Stripe.<\/li><li><strong>Typography<\/strong>&nbsp;\u2014 turn the option on to view the typography settings.<\/li><li><strong>Box Shadow<\/strong>&nbsp;\u2014 enable this option if you want to access the shadow advanced settings for this widget, and need to apply shadow for it.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Price Table widget is helpful when you need to showcase the prices and services your company provides in an attractive and clear way. The widget has multiple options, versatile customization settings, and is easy to use. Price Table widget Sample On the picture below you can view Price Table widget sample. Content Header Title&nbsp;\u2014 fill [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-494","post","type-post","status-publish","format-standard","hentry","category-elementor"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Price Table Widget - Phox Documentation<\/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:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Price Table Widget - Phox Documentation\" \/>\n<meta property=\"og:description\" content=\"Price Table widget is helpful when you need to showcase the prices and services your company provides in an attractive and clear way. The widget has multiple options, versatile customization settings, and is easy to use. Price Table widget Sample On the picture below you can view Price Table widget sample. Content Header Title&nbsp;\u2014 fill [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Phox Documentation\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/whmcsdes\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-09T17:25:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-23T22:32:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-widget-pricing.png\" \/>\n<meta name=\"author\" content=\"ijeto\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@whmcsdes\" \/>\n<meta name=\"twitter:site\" content=\"@whmcsdes\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ijeto\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/\"},\"author\":{\"name\":\"ijeto\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/person\/ac6ec1f4e42b1b805b9525d05e90fd4f\"},\"headline\":\"Price Table Widget\",\"datePublished\":\"2020-05-09T17:25:04+00:00\",\"dateModified\":\"2020-05-23T22:32:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/\"},\"wordCount\":2576,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#organization\"},\"image\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-widget-pricing.png\",\"articleSection\":[\"Elementor\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/\",\"url\":\"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/\",\"name\":\"Price Table Widget - Phox Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-widget-pricing.png\",\"datePublished\":\"2020-05-09T17:25:04+00:00\",\"dateModified\":\"2020-05-23T22:32:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#primaryimage\",\"url\":\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-widget-pricing.png\",\"contentUrl\":\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-widget-pricing.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/phox.whmcsdes.com\/docs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Price Table Widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#website\",\"url\":\"https:\/\/phox.whmcsdes.com\/docs\/\",\"name\":\"Phox Documentation\",\"description\":\"Hosting WordPress Theme\",\"publisher\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/phox.whmcsdes.com\/docs\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#organization\",\"name\":\"WHMCSdes\",\"url\":\"https:\/\/phox.whmcsdes.com\/docs\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/10\/logo-wdes.png\",\"contentUrl\":\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/10\/logo-wdes.png\",\"width\":400,\"height\":400,\"caption\":\"WHMCSdes\"},\"image\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/whmcsdes\",\"https:\/\/x.com\/whmcsdes\",\"https:\/\/www.instagram.com\/whmcsdes\/\",\"https:\/\/www.linkedin.com\/company\/whmcsdes\",\"https:\/\/www.youtube.com\/channel\/UC8fIGmE0nDeKXizKml3wV5w\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/person\/ac6ec1f4e42b1b805b9525d05e90fd4f\",\"name\":\"ijeto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6896e83e636388dbfdd81beba7b9795b1dce0ff373786cba2f347a62896f1c39?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6896e83e636388dbfdd81beba7b9795b1dce0ff373786cba2f347a62896f1c39?s=96&d=mm&r=g\",\"caption\":\"ijeto\"},\"sameAs\":[\"http:\/\/phox.whmcsdes.com\/docs\"],\"url\":\"https:\/\/phox.whmcsdes.com\/docs\/author\/ijeto\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Price Table Widget - Phox Documentation","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:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/","og_locale":"en_US","og_type":"article","og_title":"Price Table Widget - Phox Documentation","og_description":"Price Table widget is helpful when you need to showcase the prices and services your company provides in an attractive and clear way. The widget has multiple options, versatile customization settings, and is easy to use. Price Table widget Sample On the picture below you can view Price Table widget sample. Content Header Title&nbsp;\u2014 fill [&hellip;]","og_url":"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/","og_site_name":"Phox Documentation","article_publisher":"https:\/\/www.facebook.com\/whmcsdes","article_published_time":"2020-05-09T17:25:04+00:00","article_modified_time":"2020-05-23T22:32:24+00:00","og_image":[{"url":"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-widget-pricing.png","type":"","width":"","height":""}],"author":"ijeto","twitter_card":"summary_large_image","twitter_creator":"@whmcsdes","twitter_site":"@whmcsdes","twitter_misc":{"Written by":"ijeto","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#article","isPartOf":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/"},"author":{"name":"ijeto","@id":"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/person\/ac6ec1f4e42b1b805b9525d05e90fd4f"},"headline":"Price Table Widget","datePublished":"2020-05-09T17:25:04+00:00","dateModified":"2020-05-23T22:32:24+00:00","mainEntityOfPage":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/"},"wordCount":2576,"commentCount":0,"publisher":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/#organization"},"image":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-widget-pricing.png","articleSection":["Elementor"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/","url":"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/","name":"Price Table Widget - Phox Documentation","isPartOf":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#primaryimage"},"image":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-widget-pricing.png","datePublished":"2020-05-09T17:25:04+00:00","dateModified":"2020-05-23T22:32:24+00:00","breadcrumb":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#primaryimage","url":"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-widget-pricing.png","contentUrl":"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/05\/wdes-widget-pricing.png"},{"@type":"BreadcrumbList","@id":"https:\/\/phox.whmcsdes.com\/docs\/price-table-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/phox.whmcsdes.com\/docs\/"},{"@type":"ListItem","position":2,"name":"Price Table Widget"}]},{"@type":"WebSite","@id":"https:\/\/phox.whmcsdes.com\/docs\/#website","url":"https:\/\/phox.whmcsdes.com\/docs\/","name":"Phox Documentation","description":"Hosting WordPress Theme","publisher":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/phox.whmcsdes.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/phox.whmcsdes.com\/docs\/#organization","name":"WHMCSdes","url":"https:\/\/phox.whmcsdes.com\/docs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/logo\/image\/","url":"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/10\/logo-wdes.png","contentUrl":"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/10\/logo-wdes.png","width":400,"height":400,"caption":"WHMCSdes"},"image":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/whmcsdes","https:\/\/x.com\/whmcsdes","https:\/\/www.instagram.com\/whmcsdes\/","https:\/\/www.linkedin.com\/company\/whmcsdes","https:\/\/www.youtube.com\/channel\/UC8fIGmE0nDeKXizKml3wV5w"]},{"@type":"Person","@id":"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/person\/ac6ec1f4e42b1b805b9525d05e90fd4f","name":"ijeto","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6896e83e636388dbfdd81beba7b9795b1dce0ff373786cba2f347a62896f1c39?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6896e83e636388dbfdd81beba7b9795b1dce0ff373786cba2f347a62896f1c39?s=96&d=mm&r=g","caption":"ijeto"},"sameAs":["http:\/\/phox.whmcsdes.com\/docs"],"url":"https:\/\/phox.whmcsdes.com\/docs\/author\/ijeto\/"}]}},"_links":{"self":[{"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/posts\/494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/comments?post=494"}],"version-history":[{"count":44,"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/posts\/494\/revisions"}],"predecessor-version":[{"id":1117,"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/posts\/494\/revisions\/1117"}],"wp:attachment":[{"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/media?parent=494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/categories?post=494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/tags?post=494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}