{"id":46781,"date":"2025-01-22T09:59:37","date_gmt":"2025-01-22T09:59:37","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=46781"},"modified":"2025-01-30T07:15:38","modified_gmt":"2025-01-30T07:15:38","slug":"how-to-create-and-display-pricing-table","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-display-pricing-table\/","title":{"rendered":"How to Create and Display Pricing Table"},"content":{"rendered":"\n

With JetProductTables<\/em>, you can build a pricing table for your website to make subscription purchases easy for your customers. Let\u2019s find out how to build a pricing table with our WP pricing table plugin and several ways to display this table on the front end.<\/p>\n\n\n\n

Create a WooCommerce Product<\/h2>\n\n\n\n
\n

Open the WordPress Dashboard > Products > Add new product <\/em><\/strong>directory of the WooCommerce <\/strong>tab. <\/p>\n\n\n\n

First, give a name to the product.<\/p>\n\n\n\n

As we want this product to include several subscription plans, we make it variable by scrolling down to the Product data <\/strong>field and selecting the \u201cVariable product\u201d option.<\/p>\n\n\n\n

\"new<\/a><\/div>\n\n\n\n

Then, we move to the Attributes <\/strong>tab and press the \u201cAdd new<\/strong>\u201d button to add a new attribute to the product.<\/p>\n\n\n\n

Complete a Name <\/strong>field (in this case, it is set to \u201cSubscription Plan\u201d) and add Value(s) <\/strong>in a format like this:<\/p>\n\n\n\n

Stylish Start | Style Expert | VIP Access<\/code><\/pre>\n\n\n\n
so the \u201c|\u201d character separates the attribute values.<\/p>\n\n\n\n
Make sure the \u201cUsed for variations\u201d checkbox is activated and press the \u201cSave attributes<\/strong>\u201d button.<\/p>\n\n\n\n
\"attributes<\/a><\/div>\n\n\n\n
Now, move to the Variations <\/strong>tab and press the \u201cGenerate variations<\/strong>\u201d button. Confirm the action once again in the browser.<\/p>\n\n\n\n
\"generate<\/a><\/div>\n\n\n\n
Then, click the \u201cExpand<\/strong>\u201d button to open the options settings all at once or the \u201cEdit<\/strong>\u201d button next to each option to edit them one by one.<\/p>\n\n\n\n
Once the settings are opened, complete the needed fields. For instance, we set the product image, its Regular price<\/strong>, and Description<\/strong>.<\/p>\n\n\n\n
\"stylish<\/a><\/div>\n\n\n\n
Once all variations are set up and all settings are adjusted, you can click the \u201cPublish<\/strong>\u201d button to save the product.<\/p>\n<\/div><\/div>\n\n\n\n
Adjust Table Settings<\/h2>\n\n\n\n
\n
Navigate to WordPress Dashboard > WooCommerce > Settings <\/em><\/strong>and open the Product Table <\/strong>tab to start building a product table.<\/p>\n\n\n\n
Also, check the JetProductTables Dashboard Settings Overview<\/strong><\/a> to find out all about the available settings.<\/p>\n\n\n\n
Here, in the opened Columns <\/strong>tab, set up the columns you want to see in your table.<\/p>\n\n\n\n
For instance, we pick the \u201cFull Description\u201d option in the \u201cSelect a column\u2026\u201d dropdown list and press the \u201cAdd Column<\/strong>\u201d button next to it.<\/p>\n\n\n\n
Next, we delete the first \u201cProduct Name\u201d column as the subscription plan name will be later displayed in the description field.<\/p>\n\n\n\n
Additionally, we delete the LABEL <\/strong>of each column so the labels of the columns will be hidden from the table.<\/p>\n\n\n\n
\"columns<\/a><\/div>\n\n\n\n
Then, we move to the Settings <\/strong>tab and set the DIRECTION <\/strong>to \u201cVertical\u201d in the General <\/strong>tab. Although, you can leave it set to \u201cHorizontal\u201d by default to make the table horizontal.<\/p>\n\n\n\n
\"settings<\/a><\/div>\n\n\n\n
If desired, you can also work on the Filters <\/strong>and Integration <\/strong>tab; however, we leave default settings in this guide.<\/p>\n\n\n\n
Next, move to the Design <\/strong>tab and adjust the appearance of the table.<\/p>\n\n\n\n
\"table<\/a><\/div>\n\n\n\n
We leave the Table Headings <\/strong>tab as it is, as we deleted LABELS <\/strong>for the columns, and open the Table Body <\/strong>tab.<\/p>\n\n\n\n
Here, we set the BACKGROUND COLOR <\/strong>to white and the ALTERNATE BACKGROUND COLOR <\/strong>to light blue.<\/p>\n\n\n\n
We also change the BODY CELLS BORDERS<\/strong> to \u201c2\u201d and BODY CELLS PADDING <\/strong>to \u201c75.\u201d<\/p>\n\n\n\n
\"table<\/a><\/div>\n\n\n\n
When the settings are adjusted, scroll up the page and press the \u201cPresets Manager<\/strong><\/a>\u201d button to save the current settings as preset.<\/p>\n\n\n\n
Here, complete the SAVE CURRENT SETTINGS STATE AS PRESET <\/strong>field with the name of the preset. For instance, \u201cSubscriptions Preset.\u201d<\/p>\n\n\n\n
Hit the \u201cSave Preset<\/strong>\u201d button.<\/p>\n\n\n\n
\"presets<\/a><\/div>\n\n\n\n
Now, click the \u201cSave Settings<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n
Add the Table to a Gutenberg Page\/Template with a Product Table Block<\/h2>\n\n\n\n
\n
Decide where to display the product table you have built: it can be either a page or a template. In this guide, we will add a table to the common Gutenberg page.<\/p>\n\n\n\n
So, we proceed to WordPress Dashboard > Pages > Add New Page<\/em><\/strong> to build a new page.<\/p>\n\n\n\n
We complete the name of the page (\u201cSubscription Plans\u201d) and add a Product Table<\/strong><\/a> <\/strong>block.<\/p>\n\n\n\n
Now, the table displays all the products, but we need only the subscriptions. So, in the Product Table Settings <\/strong>tab, we press the \u201cSetup Table<\/strong>\u201d button to adjust the table so that it shows only the needed product variations and select the set preset.<\/p>\n\n\n\n
\"product<\/a><\/div>\n\n\n\n
In the opened Query <\/strong>tab, we pick the \u201cProduct Variations\u201d QUERY TYPE <\/strong>and select the \u201cSpecific product ID(s)\u201d option in the GET VARIATIONS FROM <\/strong>field. <\/p>\n\n\n\n
Next, we paste the copied PRODUCT ID(S) <\/strong>of the product we previously created. It can be found in the WordPress Dashboard > Products <\/em><\/strong>directory of the WooCommerce <\/strong>section by hovering over the needed product. In this case, it\u2019s \u201c10472.\u201d<\/p>\n\n\n\n
\"query<\/a><\/div>\n\n\n\n
Next, move to the Columns <\/strong>tab and select the saved preset in the USE PRESET <\/strong>field.<\/p>\n\n\n\n
Press the \u201cDone<\/strong>\u201d button to save the changes.<\/p>\n\n\n\n
\"columns<\/a><\/div>\n\n\n\n
Customize the page additionally if needed and publish the page.<\/p>\n\n\n\n
\"ready<\/a><\/div>\n<\/div><\/div>\n\n\n\n
Add the Table to an Elementor Page with a Product Table Widget<\/h2>\n\n\n\n
\n
You can add a Product Table<\/strong> widget<\/a> to Elementor as well. For this use case, we add subscription plans as separate products.<\/p>\n\n\n\n
\"subscription<\/a><\/div>\n\n\n\n
In the first Preset <\/strong>tab, you can select the preset if desired or leave the field empty. For example, we don\u2019t use the preset this time.<\/p>\n\n\n\n
\"preset<\/a><\/div>\n\n\n\n
Proceed to the Query <\/strong>tab. Here, select the needed Query Type<\/strong> and work on other settings. For example, we add the IDs of the products we want to display in the Include Products <\/strong>field (\u201c10437,10435,10433\u201d).<\/p>\n\n\n\n
\"query<\/a><\/div>\n\n\n\n
Next, head to the Columns <\/strong>tab. <\/p>\n\n\n\n
The Inherit global columns <\/strong>toggle is activated by default, but you can deactivate it to set the columns manually in the widget settings.<\/p>\n\n\n\n
\"columns<\/a><\/div>\n\n\n\n
In the next Settings<\/strong> tab, we set the Direction <\/strong>to \u201cVertical\u201d. If needed, you can work on the tab settings.<\/p>\n\n\n\n
\"settings<\/a><\/div>\n\n\n\n
In the following Filters <\/strong>tab, you can adjust the filters that will be displayed next to the table. We don\u2019t want to display filters now, so we deactivate the Inherit global filters <\/strong>toggle, unfold the Product Categories <\/strong>tab, and clear the selected Filter Type<\/strong>.<\/p>\n\n\n\n
Now, the filter is not displayed.<\/p>\n\n\n\n
\"filters<\/a><\/div>\n\n\n\n
Press the \u201cPublish<\/strong>\u201d button to save the result.<\/p>\n<\/div><\/div>\n\n\n\n
Add the Table to an Elementor or Bricks Page\/Template with Shortcode Generator<\/h2>\n\n\n\n
\n
If you want to build an Elementor price table in another way, follow the next steps to generate a shortcode<\/a>.<\/p>\n\n\n\n
After completing the Create a WooCommerce Product<\/a> <\/strong>and Adjust Table Settings<\/a> <\/strong>steps of this tutorial, go to WordPress Dashboard > WooCommerce > Settings <\/em><\/strong>and open the Product Table <\/strong>tab again.<\/p>\n\n\n\n
Press the \u201cGenerate Shortcode<\/strong>\u201d button to open the pop-up. <\/p>\n\n\n\n
Here, we set the QUERY TYPE <\/strong>to \u201cProduct Variations\u201d and \u201cSpecific product ID(S)\u201d option in the GET VARIATIONS FROM <\/strong>field. Also, set the copied PRODUCT ID(S) <\/strong>of the previously built \u201cSubscription\u201d product.<\/p>\n\n\n\n
\"query<\/a><\/div>\n\n\n\n
Open the Columns <\/strong>tab and pick the previously built preset in the USE PRESET <\/strong>drop-down list.<\/p>\n\n\n\n
Hit the \u201cGenerate Shortcode<\/strong>\u201d button.<\/p>\n\n\n\n
\"columns<\/a><\/div>\n\n\n\n
Copy the generated shortcode and click the \u201cClose<\/strong>\u201d button.<\/p>\n\n\n\n
\"shortcode<\/a><\/div>\n\n\n\n
Open the page\/template in Elementor, the one where you want to place the built product table. In our case, it is an Elementor-based page.<\/p>\n\n\n\n
Add a Shortcode <\/strong>widget to the page and paste the copied shortcode into the corresponding textarea.<\/p>\n\n\n\n
Now, adjust other page widgets if needed and press the \u201cPublish<\/strong>\u201d button to save the result.<\/p>\n\n\n\n
\"shortcode<\/a><\/div>\n\n\n\n
The pricing table can be added samely to the Bricks editor.<\/p>\n\n\n\n
To do so, find the Shortcode <\/strong>element in Bricks and add it to the page. Then, paste the copied shortcode in the Shortcode <\/strong>field.<\/p>\n\n\n\n
Save the page.<\/p>\n\n\n\n
\"shortcode<\/a><\/div>\n<\/div><\/div>\n\n\n\n
Check the Result<\/h2>\n\n\n\n
\n
Now, you can check the built product table on the front end.<\/p>\n\n\n\n
As you can observe, the subscription plans are now shown on the page and can be added to the cart.<\/p>\n\n\n\n
\"ready<\/a><\/div>\n<\/div><\/div>\n\n\n\n
That\u2019s all; now, you know how to build and display a pricing table with the help of the JetProductTables <\/em>plugin for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, you will learn how to build and display a WooCommerce pricing table on your WordPress website with the help of the JetProductTables plugin.<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[570],"yoast_head":"\nHow to Create and Display Pricing Table \u2014 JetProductTables | Crocoblock<\/title>\n<meta name=\"description\" content=\"Discover how to create and display a pricing table with the JetProductTables plugin for WordPress websites.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-display-pricing-table\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create and Display Pricing Table \u2014 JetProductTables | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Discover how to create and display a pricing table with the JetProductTables plugin for WordPress websites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-display-pricing-table\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-30T07:15:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/new-product-added-in-woocommerce-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-display-pricing-table\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-display-pricing-table\/\",\"name\":\"How to Create and Display Pricing Table \u2014 JetProductTables | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-01-22T09:59:37+00:00\",\"dateModified\":\"2025-01-30T07:15:38+00:00\",\"description\":\"Discover how to create and display a pricing table with the JetProductTables plugin for WordPress websites.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-display-pricing-table\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-display-pricing-table\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-display-pricing-table\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create and Display Pricing Table\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create and Display Pricing Table \u2014 JetProductTables | Crocoblock","description":"Discover how to create and display a pricing table with the JetProductTables plugin for WordPress websites.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-display-pricing-table\/","og_locale":"en_US","og_type":"article","og_title":"How to Create and Display Pricing Table \u2014 JetProductTables | Crocoblock","og_description":"Discover how to create and display a pricing table with the JetProductTables plugin for WordPress websites.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-display-pricing-table\/","og_site_name":"Help Center","article_modified_time":"2025-01-30T07:15:38+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/new-product-added-in-woocommerce-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-display-pricing-table\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-display-pricing-table\/","name":"How to Create and Display Pricing Table \u2014 JetProductTables | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-01-22T09:59:37+00:00","dateModified":"2025-01-30T07:15:38+00:00","description":"Discover how to create and display a pricing table with the JetProductTables plugin for WordPress websites.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-display-pricing-table\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-display-pricing-table\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-display-pricing-table\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create and Display Pricing Table"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/46781"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=46781"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=46781"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=46781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}