{"id":6607,"date":"2018-09-01T13:49:18","date_gmt":"2018-09-01T13:49:18","guid":{"rendered":"http:\/\/kartik.local\/wcproducttable.com\/?p=6607"},"modified":"2021-03-26T17:33:24","modified_gmt":"2021-03-26T17:33:24","slug":"tutorial-3","status":"publish","type":"post","link":"https:\/\/wcproducttable.com\/tutorial\/tutorial-3","title":{"rendered":"3. Product &#8216;List&#8217; layout"},"content":{"rendered":"\n<p class=\"has-background\" style=\"background-color:#fafafa\">Aim: Build a 3 column table with multi-rows in the columns. Also, make it responsive.<\/p>\n\n\n\n<div style=\"height:38px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"644\" height=\"756\" src=\"https:\/\/wcproducttable.com\/wp-content\/uploads\/2018\/11\/2018-11-17_20-28-15.png\" alt=\"WooCommerce Product Table tutorial 3\" class=\"wp-image-7687\" srcset=\"https:\/\/wcproducttable.com\/wp-content\/uploads\/2018\/11\/2018-11-17_20-28-15.png 644w, https:\/\/wcproducttable.com\/wp-content\/uploads\/2018\/11\/2018-11-17_20-28-15-256x300.png 256w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/figure>\n\n\n\n<div style=\"height:68px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Creating the product table<\/h2>\n\n\n\n<iframe loading=\"lazy\" width=\"1280\" height=\"800\" frameborder=\"0\" scrolling=\"no\" src=\"https:\/\/screencast-o-matic.com\/embed?sc=cFQecrqaCc&amp;v=5&amp;ff=1\" allowfullscreen=\"true\"><\/iframe>\n\n\n\n<div style=\"height:56px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Making the table responsive<\/h2>\n\n\n\n<iframe loading=\"lazy\" width=\"1280\" height=\"800\" frameborder=\"0\" scrolling=\"no\" src=\"https:\/\/screencast-o-matic.com\/embed?sc=cFQec7qa5t&amp;v=5&amp;ff=1\" allowfullscreen=\"true\"><\/iframe>\n","protected":false},"excerpt":{"rendered":"<ul>\n<li>Create a layout that looks like a product list instead of strict table<\/li>\n<li>Add multiple rows within the columns<\/li>\n<li>Add a mobile friendly layout as well<\/li>\n<\/ul>\n","protected":false},"author":1,"featured_media":7267,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-6607","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial"],"_links":{"self":[{"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/posts\/6607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/comments?post=6607"}],"version-history":[{"count":27,"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/posts\/6607\/revisions"}],"predecessor-version":[{"id":8351,"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/posts\/6607\/revisions\/8351"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/media\/7267"}],"wp:attachment":[{"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/media?parent=6607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/categories?post=6607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wcproducttable.com\/wp-json\/wp\/v2\/tags?post=6607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}