{"id":46070,"date":"2024-11-09T16:26:04","date_gmt":"2024-11-09T16:26:04","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=46070"},"modified":"2024-12-02T10:46:19","modified_gmt":"2024-12-02T10:46:19","slug":"how-to-display-product-tables-on-mobile-devices","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-display-product-tables-on-mobile-devices\/","title":{"rendered":"How to Display Product Tables on Mobile Devices"},"content":{"rendered":"
<\/svg><\/div>
Things to know<\/div>

If selected, the MOBILE LAYOUT<\/strong> options do not change the form and content of the custom product tables. The mobile functionality is not limited compared to the desktop one. The only exception is adding horizontal scrolling for the mobile layout. <\/p><\/div><\/div>\n\n\n\n

Set the<\/strong> MOBILE LAYOUT Options<\/strong><\/h2>\n\n\n\n
\n

You can specify the MOBILE LAYOUT<\/strong> options via the JetProductTables Dashboard<\/strong><\/a> <\/strong>settings or the Product Table<\/strong><\/a> block.<\/p>\n\n\n\n

These ways reproduce the same settings, but in this tutorial, we consider the usage of the Product Table<\/strong> block because it allows us to show how the table looks.<\/p>\n\n\n\n

To customize such settings via the JetProductTables Dashboard<\/strong>, navigate to the WordPress Dashboard > WooCommerce > Settings > Product Table<\/em><\/strong> <\/em>directory and then unroll the Settings<\/strong> tab.<\/p>\n\n\n\n

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

<\/p>\n<\/div><\/div>\n\n\n\n

Add the Product Table Block<\/strong><\/h2>\n\n\n\n
\n

Open a page or post you created to add the table. Find the Product Table<\/strong> block in the search bar and drag-n-drop this block where needed.<\/p>\n\n\n\n

\"adding-the-product-table-block\"<\/a><\/div>\n\n\n\n

After inserting the Product Table<\/strong> block, a table with default settings will be added to the page.<\/p>\n\n\n\n

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

<\/p>\n\n\n\n

Set the Mobile Layout<\/strong><\/h2>\n\n\n\n
\n

Navigate to the Block<\/strong> setting and press the \u201cSetup Table<\/strong>\u201d button.<\/p>\n\n\n\n

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

In the newly-appeared Setup Table<\/strong> pop-up, select the Settings<\/strong> tab. Scroll down the pop-up to the MOBILE LAYOUT<\/strong> drop-down list.<\/p>\n\n\n\n

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

<\/p>\n\n\n\n

Movable mobile layout<\/strong><\/h3>\n\n\n\n

Here, the \u201cMovable\u201d option is set by default. This option does not limit the Product Table<\/strong> functionality and keeps the appearance and content of the table. Also, it provides the horizontal scrolling for the table. The vertical table for this layout behaves the same way as a horizontal one.<\/p>\n\n\n\n

To observe how the \u201cMovable\u201d MOBILE LAYOUT<\/strong> looks, navigate to the top of the page, press the \u201cView<\/strong>\u201d button, and choose the \u201cMobile\u201d view option.<\/p>\n\n\n\n

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

<\/p>\n\n\n\n

Shorten mobile layout<\/strong><\/h3>\n\n\n\n

To set the \u201cShorten\u201d MOBILE LAYOUT<\/strong>, select this option in the MOBILE LAYOUT<\/strong> drop-down list. This option allows users to specify what Columns<\/strong> should be displayed. Thus, the Table<\/strong>‘s content will be shorter. <\/p>\n\n\n\n

To specify what columns should be displayed, tick the needed ones and then press the \u201cDone<\/strong>\u201d button on the pop-up.<\/p>\n\n\n\n

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

To observe how the \u201cShorten\u201d MOBILE LAYOUT<\/strong> looks, navigate to the top of the page, press the \u201cView<\/strong>\u201d button, and choose the \u201cMobile\u201d view option.<\/p>\n\n\n\n

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

<\/p>\n\n\n\n

Transform mobile layout<\/strong><\/h3>\n\n\n\n

To set the \u201cThansform\u201d MOBILE LAYOUT<\/strong>, select this option in the MOBILE LAYOUT<\/strong> drop-down list and then press the \u201cSave<\/strong>\u201d button on the pop-up.<\/p>\n\n\n\n

This option, if selected, transforms the content into a set of cards. Each card is a vertical table, where the desktop columns become rows. The first column of this table is the name of the corresponding desktop column, and the second column is its value. For this layout, the content is saved. Still, the visual appearance is completely changed, and the sticky header (because the table now has no global header) and sorting (because the layout changes globally and now there are no corresponding controls) stop working. For vertical tables, it works similarly to horizontal ones.<\/p>\n\n\n\n

To observe how the \u201cTransform\u201d MOBILE LAYOUT<\/strong> looks, navigate to the top of the page, press the \u201cView<\/strong>\u201d button, and choose the \u201cMobile\u201d view option.<\/p>\n\n\n\n

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

Collapsed mobile layout<\/strong><\/h3>\n\n\n\n

To set the \u201cCollapsed\u201d MOBILE LAYOUT<\/strong>, select this option in the MOBILE LAYOUT<\/strong> drop-down list and then press the \u201cDone<\/strong>\u201d button on the pop-up. This option transforms content into a set of cards. Each card is a vertical table, where the desktop columns become rows. In contrast to the \u201cTransform\u201d MOBILE LAYOUT<\/strong>, this layout is more compact. By default, the users observe only the first column of each line; by clicking on the “+<\/strong>” icon, they can unroll the contents of the rest of the line. Also, a header with the name of the first column is stored, so sorting can work for this Column<\/strong>. The vertical layout works similarly to the horizontal layout.<\/p>\n\n\n\n

\"collapsed<\/div>\n<\/div><\/div>\n\n\n\n

That\u2019s it. Now you know how to manage the appearance of the Product Tables<\/strong> of the JetProductTables<\/em> plugin on mobile devices (i.e., set different mobile layouts, specify the columns for displaying, and more).<\/p>\n","protected":false},"excerpt":{"rendered":"

Learn how to manage the appearance of the Product Tables on mobile devices (i.e., set different mobile layouts, specify the columns for displaying, and more).<\/p>\n","protected":false},"author":12,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[570],"yoast_head":"\nHow to Display Product Tables on Mobile Devices \u4e00 JetProductTables l Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to build custom product tables using the JetProductTables plugin on mobile devices (i.e., set different mobile layouts, specify the columns for displaying, and more).\" \/>\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-display-product-tables-on-mobile-devices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display Product Tables on Mobile Devices \u4e00 JetProductTables l Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to build custom product tables using the JetProductTables plugin on mobile devices (i.e., set different mobile layouts, specify the columns for displaying, and more).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-display-product-tables-on-mobile-devices\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-02T10:46:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/jetproducttable-dashboard-settings-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=\"5 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-display-product-tables-on-mobile-devices\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-display-product-tables-on-mobile-devices\/\",\"name\":\"How to Display Product Tables on Mobile Devices \u4e00 JetProductTables l Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2024-11-09T16:26:04+00:00\",\"dateModified\":\"2024-12-02T10:46:19+00:00\",\"description\":\"Learn how to build custom product tables using the JetProductTables plugin on mobile devices (i.e., set different mobile layouts, specify the columns for displaying, and more).\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-display-product-tables-on-mobile-devices\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-display-product-tables-on-mobile-devices\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-display-product-tables-on-mobile-devices\/#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 Display Product Tables on Mobile Devices\"}]},{\"@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 Display Product Tables on Mobile Devices \u4e00 JetProductTables l Crocoblock","description":"Learn how to build custom product tables using the JetProductTables plugin on mobile devices (i.e., set different mobile layouts, specify the columns for displaying, and more).","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-display-product-tables-on-mobile-devices\/","og_locale":"en_US","og_type":"article","og_title":"How to Display Product Tables on Mobile Devices \u4e00 JetProductTables l Crocoblock","og_description":"Learn how to build custom product tables using the JetProductTables plugin on mobile devices (i.e., set different mobile layouts, specify the columns for displaying, and more).","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-display-product-tables-on-mobile-devices\/","og_site_name":"Help Center","article_modified_time":"2024-12-02T10:46:19+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/11\/jetproducttable-dashboard-settings-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-display-product-tables-on-mobile-devices\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-display-product-tables-on-mobile-devices\/","name":"How to Display Product Tables on Mobile Devices \u4e00 JetProductTables l Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2024-11-09T16:26:04+00:00","dateModified":"2024-12-02T10:46:19+00:00","description":"Learn how to build custom product tables using the JetProductTables plugin on mobile devices (i.e., set different mobile layouts, specify the columns for displaying, and more).","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-display-product-tables-on-mobile-devices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-display-product-tables-on-mobile-devices\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetproducttables\/how-to-display-product-tables-on-mobile-devices\/#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 Display Product Tables on Mobile Devices"}]},{"@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\/46070"}],"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\/12"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=46070"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=46070"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=46070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}