{"id":46222,"date":"2024-12-02T10:48:05","date_gmt":"2024-12-02T10:48:05","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=46222"},"modified":"2025-01-10T10:49:35","modified_gmt":"2025-01-10T10:49:35","slug":"product-comparison-table-use-cases","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/product-comparison-table-use-cases\/","title":{"rendered":"How to Build Product Comparison Tables for Different Use Cases"},"content":{"rendered":"\n<p>In this guide, we&#8217;ll walk you through how to create product comparison tables for different use cases on a fashion store website. But first of all, we\u2019ll start by building a table preset.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"JetProductTables WordPress Plugin Overview. WooCommerce Focused | New JetPlugin Release\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/Vqvvp9zqsn4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-jetproducttables-table\">Create JetProductTables Table<\/h2>\n\n\n\n<p>With the <em>JetProductTables<\/em> plugin, you can build and customize a product table in three different ways. It can be done with the help of:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-a-preset-for-product-table\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Preset Manager<\/strong><\/a>;<\/li>\n\n\n\n<li><a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-generate-shortcode-for-product-table\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Shortcode Generator<\/strong><\/a>;<\/li>\n\n\n\n<li><a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/product-table-block-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Product Table<\/strong> block<\/a>.<\/li>\n<\/ul>\n\n\n\n<p>To access the <strong>Preset Manager,<\/strong> go to the <strong><em>WordPress Dashboard &gt; WooCommerce &gt; Settings<\/em><\/strong> tab, and go to the <strong>Product Table<\/strong> tab.<\/p>\n\n\n\n<p>Alternatively, you can press the \u201c<strong>Product Tables Settings<\/strong>\u201d link under the <em>JetProductTables<\/em> plugin\u2019s name in the <strong><em>WordPress Dashboard &gt; Plugins<\/em><\/strong> to be redirected to this tab.<\/p>\n\n\n\n<p>For starters, we\u2019ll create a basic table that includes four columns:<\/p>\n\n\n\n<ul>\n<li><strong>Product Image<\/strong>;<\/li>\n\n\n\n<li><strong>Product Name<\/strong>;<\/li>\n\n\n\n<li><strong>Price<\/strong>;<\/li>\n\n\n\n<li><strong>Button<\/strong><strong>s<\/strong>.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-tables-section.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-tables-section-1024x640.webp\" alt=\"product tables section\" class=\"wp-image-46229\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-tables-section-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-tables-section-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-tables-section-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-tables-section-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-tables-section-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-tables-section.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Since we\u2019re building the comparison table for a fashion store, we\u2019ll focus on building the following tables:<\/p>\n\n\n\n<ul>\n<li>Product styles comparison table,<strong> <\/strong>we\u2019ll create it with the <strong>Product Table<\/strong> block;<\/li>\n\n\n\n<li>Product price comparison table, which we\u2019ll create with the <strong>Shortcode Generator<\/strong>;<\/li>\n\n\n\n<li>Product seasonality comparison table, which we\u2019ll create with the <strong>Product Table<\/strong> block.<\/li>\n<\/ul>\n\n\n\n<p>In this tutorial, you can learn more about <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-create-and-set-up-product-table\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to create a product table<\/a>. When you have a basic set of columns, you can use them as a starting point for developing various presets for all kinds of occasions. Currently, a preset can be applied when:<\/p>\n\n\n\n<ul>\n<li>configuring integrations;<\/li>\n\n\n\n<li>generating a shortcode;<\/li>\n\n\n\n<li>adding a <strong>Product Table<\/strong> block to a page.<\/li>\n<\/ul>\n\n\n\n<p>The main advantage of presets compared to global settings or configuring a table through an individual block or shortcode:<\/p>\n\n\n\n<ul>\n<li>With presets, users can create multiple layout options for displaying the table, whereas global settings allow for only one;<\/li>\n\n\n\n<li>When using presets with a shortcode or block, if changes need to be made, there&#8217;s no need to search for all the places where the shortcode or block was added \u2014 the changes made to the preset are automatically applied to every table where the preset is used.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-a-comparison-table-preset\">Create a Comparison Table Preset<\/h2>\n\n\n\n<p>For our use case, we\u2019ll create a new preset \u2014 \u201cComparison Table for Articles\u201d; it will include four columns as specified in the global settings.<\/p>\n\n\n\n<p>Click on the \u201c<strong>Present Manager<\/strong>\u201d button to open the <strong>Presets Manager<\/strong> popup. &nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset-1024x640.webp\" alt=\"preset manager\" class=\"wp-image-46231\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Enter the name and click \u201c<strong>Save Preset<\/strong>\u201d. When saved, the new preset will appear below. To edit it, click on the \u201cpencil\u201d icon.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/saving-preset-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/saving-preset-1-1024x640.webp\" alt=\"editing preset\" class=\"wp-image-46232\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/saving-preset-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/saving-preset-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/saving-preset-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/saving-preset-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/saving-preset-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/saving-preset-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"columns-section\">Columns section<\/h3>\n\n\n\n<p>Upon default, the preset contains the columns from the global settings. For both the <strong>Product Image<\/strong> and <strong>Product Name<\/strong> columns, we\u2019re going to toggle on the <strong>Linked <\/strong>switcher; it will link the product name and image to the product page.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/linked.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/linked-1024x640.webp\" alt=\"presets manager table columns\" class=\"wp-image-46233\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/linked-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/linked-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/linked-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/linked-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/linked-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/linked.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The rest of the settings we\u2019ll leave as is.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"settings-section\">Settings section<\/h3>\n\n\n\n<p>In <strong>General<\/strong> settings, we\u2019ll choose \u201cHorizontal\u201d <strong>DIRECTION <\/strong>to display products in rows.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset-general-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset-general-settings-1024x640.webp\" alt=\"presets manager table columns\" class=\"wp-image-46234\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset-general-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset-general-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset-general-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset-general-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset-general-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/editing-preset-general-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The rest of the settings we\u2019ll leave as is. In this tutorial, you can find more information on all the features from the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/jetproducttables-dashboard-settings-overview\/#general\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Settings<\/strong><\/a> tab.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"filters-section\">Filters section<\/h3>\n\n\n\n<p>On the <strong>Filters<\/strong> settings tab, we\u2019ll turn off the filters because we don\u2019t need them in this preset.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/preset-manager-table-filters.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/preset-manager-table-filters-1024x640.webp\" alt=\"presets manager table filters \" class=\"wp-image-46235\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/preset-manager-table-filters-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/preset-manager-table-filters-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/preset-manager-table-filters-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/preset-manager-table-filters-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/preset-manager-table-filters-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/preset-manager-table-filters.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Click on the \u201c<strong>Save Preset<\/strong>\u201d to save the changes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"build-custom-comparison-tables-for-various-use-cases\">Build Custom Comparison Tables for Various Use Cases<\/h2>\n\n\n\n<p>Now, let\u2019s figure out a set of use cases that will display various products.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"products-style-comparison-table\">Products style comparison table<\/h3>\n\n\n\n<p>As a demonstration of this use case, we\u2019ll create an article called &#8220;Style Comparison: Finding the Perfect Women&#8217;s Sunglasses&#8221; with a product comparison table. It will present three different styles (\u201cOval\u201d, \u201cCateye\u201d, and \u201cHeart-shaped\u201d) of women&#8217;s glasses.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-1024x640.webp\" alt=\"article preview\" class=\"wp-image-46236\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The table will have the following columns: <strong>Product Image<\/strong>, <strong>Product Name<\/strong>, <strong>Product Price<\/strong>, and <strong>Buttons<\/strong>. To build it, we need to get the product IDs of items that represent these styles.&nbsp;<\/p>\n\n\n\n<p>Go to <strong><em>WordPress Dashboard &gt; WooCommerce &gt; Products &gt; All Products<\/em><\/strong>.&nbsp;<\/p>\n\n\n\n<p>In our store, glasses belong to the <strong>Accessories<\/strong> product category; we\u2019ll filter the products by this category to obtain the IDs. In your specific case, you\u2019ll need to pick some other category for which you want to build a table.<\/p>\n\n\n\n<p>In the <strong>Select a category<\/strong> dropdown, we\u2019ll pick the <strong>Accessories<\/strong> category, and we\u2019ll filter the necessary items by clicking the \u201c<strong>Filter<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-ids.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-ids-1024x640.webp\" alt=\"filtering products\" class=\"wp-image-46237\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-ids-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-ids-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-ids-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-ids-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-ids-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-ids.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>To get the product ID, hover over the corresponding product and copy the \u201cID:XXXX\u201d numerical value. In our example, those values are: \u201c3394\u201d, \u201c3378\u201d, and \u201c3368\u201d. Now, we should go back to the article and add those values to the product table.<\/p>\n\n\n\n<p>To add a <strong>Product Table<\/strong> block to the article body, type \u201cproduct table\u201d in the <strong>Blocks<\/strong> search and click on the block to add it to the page.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block-1024x640.webp\" alt=\"adding product table block\" class=\"wp-image-46238\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">When you add the <strong>Product Table<\/strong> block, its settings will be in the default state, and it will immediately display some products from your inventory. <\/p><\/div><\/div>\n\n\n\n<p>In the block\u2019s settings, you\u2019ll find the \u201c<strong>Setup Table<\/strong>\u201d button (within <strong>Product Table Settings<\/strong>); click it to open the <strong>Setup Table<\/strong> popup.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"query-section\">Query section<\/h4>\n\n\n\n<p>Since we\u2019re going to display individual products, choose the \u201cProducts\u201d option in the <strong>QUERY TYPE<\/strong> field and enter product IDs (separated by commas) into the <strong>INCLUDE <\/strong>field in the <strong>General<\/strong> settings tab.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/building-a-table-include-tab.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/building-a-table-include-tab-1024x640.webp\" alt=\"applying product IDs\" class=\"wp-image-46239\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/building-a-table-include-tab-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/building-a-table-include-tab-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/building-a-table-include-tab-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/building-a-table-include-tab-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/building-a-table-include-tab-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/building-a-table-include-tab.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"settings-section\">Settings section<\/h4>\n\n\n\n<p>Then, go to the <strong>Settings<\/strong> tab and apply the preset created for these comparison use cases.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-preset-to-the-table.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-preset-to-the-table-1024x640.webp\" alt=\"adding the preset\" class=\"wp-image-46240\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-preset-to-the-table-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-preset-to-the-table-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-preset-to-the-table-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-preset-to-the-table-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-preset-to-the-table-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-preset-to-the-table.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Finally, click \u201c<strong>Done<\/strong>\u201d to save the changes.<\/p>\n\n\n\n<p>After adding the IDs and the <strong>Preset<\/strong>, check the table\u2019s updated look.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-table-block.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-table-block-1024x640.webp\" alt=\"style comparison product table backend result\" class=\"wp-image-46241\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-table-block-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-table-block-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-table-block-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-table-block-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-table-block-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-table-block.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Compare it with the way it looks on the front end.<\/p>\n\n\n\n<div class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/style-comparison.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/style-comparison-1024x640.webp\" alt=\"style comparison table frontend result\" class=\"wp-image-46242\" style=\"width:840px;height:auto\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/style-comparison-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/style-comparison-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/style-comparison-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/style-comparison-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/style-comparison-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/style-comparison.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Both the image and product name are clickable and are linked to the product pages of these featured items (as specified in the preset).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"size-comparison-table\">Size comparison table<\/h3>\n\n\n\n<p>As a demonstration of this use case, we\u2019ll create an article with the \u201cFinding the Perfect Fit: Shirt Bodysuit Size Guide&#8221; title. It will present product variations of a single product, \u201cShirt Bodysuit,\u201d and an explainer guide to make the correct measurements and choose the right size.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-1-1024x640.webp\" alt=\"article preview\" class=\"wp-image-46243\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The table will have the following columns: \u201cProduct Image\u201d, \u201cProduct Description\u201d, \u201cPrice\u201d, and \u201cAction Button\u201d.<\/p>\n\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">This comparison table will display product images of the same size because the content of the Zolden template does not include size variation images of the demo products.<\/p><\/div><\/div>\n\n\n\n<p>To build a table like that, we need to get the product ID of the item which variations we\u2019re going to display in the comparison table.<\/p>\n\n\n\n<p>Go to <strong><em>WordPress Dashboard &gt; WooCommerce &gt; Products &gt; All Products<\/em><\/strong> to obtain the IDs.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-id.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-id-1024x640.webp\" alt=\"getting product id\" class=\"wp-image-46244\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-id-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-id-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-id-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-id-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-id-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/getting-product-id.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>To get the product ID, hover over the corresponding product and copy the \u201cID:XXXX\u201d numerical value. In our example, this value is: \u201c10003\u201d. Now, we need to go back to the shortcode editor and add this value to the product table.<\/p>\n\n\n\n<p>Go to <strong><em>WordPress Dashboard &gt; WooCommerce &gt; Settings &gt; Product Table<\/em><\/strong> and click on the \u201c<strong>Generate Shortcode<\/strong>\u201d button.<\/p>\n\n\n\n<p>As it was mentioned previously, our starter table includes four columns: <strong>Product Image<\/strong>, <strong>Product Name<\/strong>, <strong>Price<\/strong>, and <strong>Buttons<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generate-shortcode-button.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generate-shortcode-button-1024x640.webp\" alt=\"generate shortcode button\" class=\"wp-image-46245\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generate-shortcode-button-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generate-shortcode-button-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generate-shortcode-button-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generate-shortcode-button-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generate-shortcode-button-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generate-shortcode-button.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>However, we\u2019re going to alter them to get the following set of columns: <strong>Product Image<\/strong>, <strong>Full Description<\/strong>, <strong>Price<\/strong>, and <strong>Buttons<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-columns.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-columns-1024x640.webp\" alt=\"table columns\" class=\"wp-image-46246\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-columns-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-columns-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-columns-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-columns-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-columns-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-columns.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The <strong>Full Description<\/strong> column will display the contents of the <strong>Description <\/strong>field, which is available in the variable product settings.&nbsp;<\/p>\n\n\n\n<p>To add this description, go to <strong><em>WordPress Dashboard &gt; Products &gt; Your Product<\/em><\/strong> in the <strong>Product data<\/strong> section:<\/p>\n\n\n\n<ul>\n<li>choose \u201cVariable product\u201d in the <strong>Product data <\/strong>dropdown;<\/li>\n\n\n\n<li>click on the <strong>Variations<\/strong> in the side menu;<\/li>\n\n\n\n<li>scroll down to the bottom of the product variation you want to edit, and fill in the <strong>Description<\/strong> field.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/description-field.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/description-field-1024x640.webp\" alt=\"description field\" class=\"wp-image-46247\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/description-field-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/description-field-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/description-field-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/description-field-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/description-field-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/description-field.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>For our use case, we\u2019ll add the corresponding measurements for each size variation, which will be displayed in our table.<\/p>\n\n\n\n<p>Now, let\u2019s get back to the <strong>Shortcode Editor<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"query-sectionnbsp\">Query section&nbsp;<\/h4>\n\n\n\n<p>We\u2019ll apply the following settings in the <strong>Query<\/strong> section:<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-tab.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-tab-1024x640.webp\" alt=\"shortcode generator query section\" class=\"wp-image-46248\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-tab-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-tab-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-tab-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-tab-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-tab-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-tab.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>QUERY TYPE <\/strong>\u2014 choose \u201cProduct Variations\u201d;<\/li>\n\n\n\n<li><strong>GET VARIATIONS FROM<\/strong> \u2014 choose \u201cSpecific product IDs\u201d;<\/li>\n\n\n\n<li><strong>PRODUCT ID(s) <\/strong>\u2014 paste the ID of our chosen product.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"columns-sectionnbsp\">Columns section&nbsp;<\/h4>\n\n\n\n<p>In our basic set of columns, we\u2019re going to remove the <strong>Product Name<\/strong> column and replace it with <strong>Full Description<\/strong>. To add a new column, click on the dropdown, select the \u201cFull Description\u201d column type, and click on the \u201c<strong>Add Column<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/full-description-column.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/full-description-column-1024x640.webp\" alt=\"shortcode generator columns section\" class=\"wp-image-46249\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/full-description-column-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/full-description-column-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/full-description-column-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/full-description-column-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/full-description-column-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/full-description-column.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"settings-section\">Settings section<\/h4>\n\n\n\n<p>For this type of table, we don\u2019t need a header\/footer. As for the <strong>DIRECTION<\/strong>, we\u2019ll choose the \u201cHorizontal\u201d type.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-tab.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-tab-1024x640.webp\" alt=\"shortcode generator settings section\" class=\"wp-image-46250\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-tab-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-tab-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-tab-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-tab-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-tab-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-tab.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"filter-section\">Filter section<\/h4>\n\n\n\n<p>In the filter section, we\u2019ll disable the <strong>Enable Filters <\/strong>toggle under the <strong>Table Filters<\/strong> section.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/filters-tab.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/filters-tab-1024x640.webp\" alt=\"shortcode generator filter section\" class=\"wp-image-46251\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/filters-tab-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/filters-tab-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/filters-tab-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/filters-tab-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/filters-tab-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/filters-tab.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Since all the customizations are completed, it\u2019s time to click the \u201c<strong>Generate Shortcode<\/strong>\u201d button to get the shortcode.<\/p>\n\n\n\n<p>To copy the shortcode, click the corresponding button.<\/p>\n\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">When you click on the \u201c<strong>Close<\/strong>\u201d button, all of your table settings will be preserved until you refresh the page.<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generated-shortcode.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generated-shortcode-1024x640.webp\" alt=\"generated shortcode\" class=\"wp-image-46252\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generated-shortcode-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generated-shortcode-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generated-shortcode-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generated-shortcode-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generated-shortcode-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/generated-shortcode.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Now, let\u2019s go to our article to apply the product table shortcode. To do so, we need to add the <strong>Shortcode<\/strong> block to the article body. Or just paste the shortcode, and it will be automatically transformed into a corresponding block.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/shortcode-block.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/shortcode-block-1024x640.webp\" alt=\"shortcode block\" class=\"wp-image-46253\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/shortcode-block-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/shortcode-block-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/shortcode-block-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/shortcode-block-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/shortcode-block-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/shortcode-block.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Click \u201c<strong>Save draft<\/strong>\u201d and preview the article draft.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview-1024x640.webp\" alt=\"variable product table preview\" class=\"wp-image-46254\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"seasonal-comparison-table\">Seasonal comparison table<\/h3>\n\n\n\n<p>As a demonstration of this use case, we\u2019ll create an article with the \u201cFall Jacket Guide: Comparing This Season\u2019s Trendiest Outerwear&#8221; title. It will present four autumn jackets with an explanation of features.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-2.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-2-1024x640.webp\" alt=\"article preview\" class=\"wp-image-46255\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-2-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-2-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-2-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-2-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-2-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/article-preview-2.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The table will have the following columns: <strong>Product Name<\/strong>,<strong> Product Image<\/strong>,<strong> Product Summary<\/strong>,<strong> Product Tags<\/strong>,<strong> Product Price<\/strong>, and <strong>Buttons<\/strong>.<\/p>\n\n\n\n<p>To build a table like that, we need to get the product IDs of corresponding items.&nbsp;<\/p>\n\n\n\n<p>Go to <strong><em>WordPress Dashboard &gt; WooCommerce &gt; Products &gt; All Products<\/em><\/strong> to obtain the IDs.<\/p>\n\n\n\n<p>We\u2019ll build this table with the <strong>Product Table<\/strong> block and will present it in a \u201cVertical\u201d format.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview-1-1024x640.webp\" alt=\"table preview\" class=\"wp-image-46256\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-preview-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>So you pick the IDs of products you want to include in the table; let\u2019s move to creating a post.<\/p>\n\n\n\n<p>To add a <strong>Product Table<\/strong> block to the article body, type \u201cproduct table\u201d in the <strong>Blocks<\/strong> search and click on the block to add it to the page.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block-1-1024x640.webp\" alt=\"adding product table block\" class=\"wp-image-46257\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/adding-product-table-block-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>When you add a block, it will display all products in a basic set of columns. Now, let\u2019s modify the layout and display of the products.&nbsp;<\/p>\n\n\n\n<p>Click on the \u201c<strong>Setup Table<\/strong>\u201d button to open the table editor.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/block-inserted.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/block-inserted-1024x640.webp\" alt=\"block added to the article\" class=\"wp-image-46258\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/block-inserted-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/block-inserted-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/block-inserted-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/block-inserted-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/block-inserted-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/block-inserted.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"query-section\">Query section<\/h4>\n\n\n\n<p>Since we\u2019re going to display individual products, choose the \u201cProducts\u201d option in the <strong>QUERY TYPE<\/strong> field and enter product IDs (separated by commas) into the INCLUDE field in the <strong>General<\/strong> settings tab.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-section-table-3.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-section-table-3-1024x640.webp\" alt=\"query section\" class=\"wp-image-46259\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-section-table-3-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-section-table-3-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-section-table-3-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-section-table-3-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-section-table-3-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/query-section-table-3.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The rest of the settings we\u2019ll leave as is.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"column-section\">Column section<\/h4>\n\n\n\n<p>In our basic set of columns, we\u2019re going to remove and rearrange the columns a bit in the following way.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/columns-section-table-3.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/columns-section-table-3-1024x640.webp\" alt=\"columns settings\" class=\"wp-image-46260\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/columns-section-table-3-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/columns-section-table-3-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/columns-section-table-3-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/columns-section-table-3-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/columns-section-table-3-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/columns-section-table-3.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Product Name<\/strong>;<\/li>\n\n\n\n<li><strong>Product Image<\/strong>;<\/li>\n\n\n\n<li><strong>Summary<\/strong>;<\/li>\n\n\n\n<li><strong>Tags<\/strong>;<\/li>\n\n\n\n<li><strong>Price<\/strong>;<\/li>\n\n\n\n<li><strong>Buttons<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"settings-section\">Settings section<\/h4>\n\n\n\n<p>For this type of table, we don\u2019t need a header\/footer. As for the <strong>DIRECTION<\/strong>, we\u2019ll choose the \u201cVertical\u201d type.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-section-table-3.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-section-table-3-1024x640.webp\" alt=\"settings section\" class=\"wp-image-46261\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-section-table-3-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-section-table-3-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-section-table-3-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-section-table-3-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-section-table-3-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/settings-section-table-3.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"filter-section\">Filter section<\/h4>\n\n\n\n<p>In the filter section, we\u2019ll disable the <strong>Enable Filters<\/strong> toggle under the <strong>Table Filter<\/strong> section.<\/p>\n\n\n\n<p>When you\u2019ve done all the necessary customizations, click on the \u201c<strong>Done<\/strong>\u201d button.&nbsp;<\/p>\n\n\n\n<p>After applying all the necessary settings, preview the changes.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-backend.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-backend-1024x640.webp\" alt=\"table preview backend\" class=\"wp-image-46262\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-backend-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-backend-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-backend-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-backend-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-backend-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-backend.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Compare it with the way it looks on the front end.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-frontend.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-frontend-1024x640.webp\" alt=\"vertical table frontend preview\" class=\"wp-image-46263\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-frontend-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-frontend-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-frontend-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-frontend-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-frontend-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/table-3-preview-frontend.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"style-the-table\">Style the Table<\/h2>\n\n\n\n<p>Make sure your comparison tables match your website\u2019s overall design. The <em>JetProductTables<\/em> plugin allows you to adjust the table&#8217;s colors, fonts, and borders to fit your brand&#8217;s aesthetic. Consistent styling ensures that the tables don&#8217;t feel out of place and enhances the overall user experience.<\/p>\n\n\n\n<p>To customize the table, go to <strong><em>WordPress Dashboard &gt; WooCommerce &gt; Settings &gt; Product Table &gt; Design<\/em><\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/design-section.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/design-section-1024x640.webp\" alt=\"design customization\" class=\"wp-image-46264\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/design-section-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/design-section-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/design-section-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/design-section-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/design-section-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/design-section.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Once you\u2019ve customized the table, embed it in relevant articles or product pages. By doing so, you&#8217;re adding value to your content, allowing readers to get all the information they need without jumping from page to page.<\/p>\n\n\n\n<p>That\u2019s it. Now you know how to create, customize, and manage the presets available with the <em>JetProductTables<\/em> plugin on your WordPress store powered by <em>WooCommerce<\/em>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial will walk you through the process of building product comparison tables using the JetProductTables plugin, tailored to different use cases. <\/p>\n","protected":false},"author":17,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[570],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Build Product Comparison Tables for Different Use Cases \u2014 JetProductTables | Crocoblock<\/title>\n<meta name=\"description\" content=\"Create product comparison tables for different use cases with JetProductTables. Enhance user experience and help customers make decisions faster on your WooCommerce store.\" \/>\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\/product-comparison-table-use-cases\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build Product Comparison Tables for Different Use Cases \u2014 JetProductTables | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Create product comparison tables for different use cases with JetProductTables. Enhance user experience and help customers make decisions faster on your WooCommerce store.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/product-comparison-table-use-cases\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-10T10:49:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-tables-section-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=\"16 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\/product-comparison-table-use-cases\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/product-comparison-table-use-cases\/\",\"name\":\"How to Build Product Comparison Tables for Different Use Cases \u2014 JetProductTables | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2024-12-02T10:48:05+00:00\",\"dateModified\":\"2025-01-10T10:49:35+00:00\",\"description\":\"Create product comparison tables for different use cases with JetProductTables. Enhance user experience and help customers make decisions faster on your WooCommerce store.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/product-comparison-table-use-cases\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/product-comparison-table-use-cases\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/product-comparison-table-use-cases\/#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 Build Product Comparison Tables for Different Use Cases\"}]},{\"@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 Build Product Comparison Tables for Different Use Cases \u2014 JetProductTables | Crocoblock","description":"Create product comparison tables for different use cases with JetProductTables. Enhance user experience and help customers make decisions faster on your WooCommerce store.","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\/product-comparison-table-use-cases\/","og_locale":"en_US","og_type":"article","og_title":"How to Build Product Comparison Tables for Different Use Cases \u2014 JetProductTables | Crocoblock","og_description":"Create product comparison tables for different use cases with JetProductTables. Enhance user experience and help customers make decisions faster on your WooCommerce store.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/product-comparison-table-use-cases\/","og_site_name":"Help Center","article_modified_time":"2025-01-10T10:49:35+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/product-tables-section-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/product-comparison-table-use-cases\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/product-comparison-table-use-cases\/","name":"How to Build Product Comparison Tables for Different Use Cases \u2014 JetProductTables | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2024-12-02T10:48:05+00:00","dateModified":"2025-01-10T10:49:35+00:00","description":"Create product comparison tables for different use cases with JetProductTables. Enhance user experience and help customers make decisions faster on your WooCommerce store.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/product-comparison-table-use-cases\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/product-comparison-table-use-cases\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/product-comparison-table-use-cases\/#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 Build Product Comparison Tables for Different Use Cases"}]},{"@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\/46222"}],"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\/17"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=46222"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=46222"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=46222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}