{"id":62,"date":"2026-07-25T13:37:02","date_gmt":"2026-07-25T13:37:02","guid":{"rendered":"https:\/\/promptlesswp.com\/demo\/?page_id=62"},"modified":"2026-08-13T19:25:44","modified_gmt":"2026-08-13T19:25:44","slug":"product-grid","status":"publish","type":"page","link":"https:\/\/promptlesswp.com\/demo\/product-grid\/","title":{"rendered":"Product Grid Layouts"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Section 12 of 13 \u00b7 Product Grid<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WooCommerce, carded.<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Product Grid reads straight from your WooCommerce catalog: price, rating, sale badges, and add-to-cart, all styled by the same design system as every other card on this site.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Cards \u00b7 Full Commerce \u00b7 Dark<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The shop, full-featured.<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Cards with price, star rating, sale badge, and add-to-cart, everything WooCommerce knows about a product, carded.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Minimal \u00b7 4 Columns \u00b7 Price Only<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The lookbook treatment.<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The minimal style at four columns with price only: an editorial catalog for browsing, not converting.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Carousel \u00b7 Cards \u00b7 Auto<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The catalog, on a rail.<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The same WooCommerce product cards \u2014 price, rating, sale badge, and add-to-cart \u2014 on a horizontal scroll-snap rail. A featured-products strip that reads the live catalog; switching a product grid to a carousel changes only the arrangement.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Carousel \u00b7 4-Up \u00b7 Autoplay \u00b7 Dark<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Featured products, auto-advancing.<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Four products per view with autoplay and loop: the rail advances every five seconds and wraps at the ends, with a pause\/play button that also pauses on hover and keyboard focus. Full commerce cards on the dark theme.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Keep going<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Next: Map. Directions without an API key.<\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Section 12 of 13 \u00b7 Product Grid WooCommerce, carded. The Product Grid reads straight from your WooCommerce catalog: price, rating, sale badges, and add-to-cart, all styled by the same design system as every other card on this site. Next: Map All sections Cards \u00b7 Full Commerce \u00b7 Dark The shop, full-featured. Cards with price, star&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":12,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-62","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/promptlesswp.com\/demo\/wp-json\/wp\/v2\/pages\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promptlesswp.com\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/promptlesswp.com\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/promptlesswp.com\/demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promptlesswp.com\/demo\/wp-json\/wp\/v2\/comments?post=62"}],"version-history":[{"count":2,"href":"https:\/\/promptlesswp.com\/demo\/wp-json\/wp\/v2\/pages\/62\/revisions"}],"predecessor-version":[{"id":200,"href":"https:\/\/promptlesswp.com\/demo\/wp-json\/wp\/v2\/pages\/62\/revisions\/200"}],"wp:attachment":[{"href":"https:\/\/promptlesswp.com\/demo\/wp-json\/wp\/v2\/media?parent=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}