{"id":6542,"date":"2026-03-11T19:08:08","date_gmt":"2026-03-11T19:08:08","guid":{"rendered":"https:\/\/creativewebui.com\/flexi-post-grid\/?post_type=docs&#038;p=6542"},"modified":"2026-03-11T19:17:59","modified_gmt":"2026-03-11T19:17:59","password":"","slug":"woocommerce-product-grid-layout-flexi-post-grid-guide","status":"publish","type":"docs","link":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/","title":{"rendered":"Product Grid for WooCommerce"},"content":{"rendered":"\n<p>Flexi Post Grid includes a powerful <strong>Product Grid layout<\/strong> that allows you to display WooCommerce products in a modern card-style grid.<\/p>\n\n\n\n<p>With this layout you can display:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Product image<\/li>\n\n\n\n<li>Price<\/li>\n\n\n\n<li>Rating<\/li>\n\n\n\n<li>Color swatches<\/li>\n\n\n\n<li>Wishlist button<\/li>\n\n\n\n<li>Add to Cart button<\/li>\n<\/ul>\n\n\n\n<p>The Product Grid layout provides extensive <strong>design and functionality controls<\/strong>, allowing you to create a fully customizable product showcase.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Select Product Grid Style<\/h2>\n\n\n\n<p>To display WooCommerce products, first choose the <strong>Product Grid style<\/strong> inside the grid widget.<\/p>\n\n\n\n<p>Go to:<\/p>\n\n\n\n<p><strong>Grid Widget \u2192 Grid Style Types \u2192 Product Grid<\/strong><\/p>\n\n\n\n<p>After selecting this option, the widget will automatically load <strong>product-specific settings and styling controls<\/strong>.<\/p>\n\n\n\n<p>These controls only appear when the <strong>Product Grid layout<\/strong> is selected.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"183\" height=\"212\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Select-Product-Grid-Style.jpg\" alt=\"\" class=\"wp-image-6538\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Configure Product Grid Settings<\/h2>\n\n\n\n<p>Inside the widget settings you will see <strong>Product Grid Settings<\/strong>, where you can control which product elements appear inside each grid card.<\/p>\n\n\n\n<p>Available options include:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Rating<\/h3>\n\n\n\n<p>Enable or disable the WooCommerce product rating display.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Price<\/h3>\n\n\n\n<p>Displays the product price on the grid card.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Color Swatches<\/h3>\n\n\n\n<p>Displays available product color options using circular swatches.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Product Button<\/h3>\n\n\n\n<p>Shows the main product button such as <strong>Add to Cart<\/strong> or <strong>Select Options<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Add to Cart Button Text<\/h3>\n\n\n\n<p>Customize the label used for the Add to Cart button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Select Options Button Text<\/h3>\n\n\n\n<p>Customize the button text for variable products.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Button Icon<\/h3>\n\n\n\n<p>Upload or select an icon to display inside the product button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Button Icon<\/h3>\n\n\n\n<p>Enable or disable the button icon display.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Button Text<\/h3>\n\n\n\n<p>Enable or disable the button label.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Icon Position<\/h3>\n\n\n\n<p>Choose whether the icon appears <strong>before or after the button text<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Wishlist<\/h3>\n\n\n\n<p>Displays a wishlist icon on the product card.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"661\" height=\"593\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Configure-Product-Grid-Settings.jpg\" alt=\"\" class=\"wp-image-6537\" srcset=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Configure-Product-Grid-Settings.jpg 661w, https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Configure-Product-Grid-Settings-300x269.jpg 300w, https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Configure-Product-Grid-Settings-600x538.jpg 600w\" sizes=\"(max-width: 661px) 100vw, 661px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Customize Product Rating Style<\/h2>\n\n\n\n<p>You can fully customize the appearance of the WooCommerce rating stars.<\/p>\n\n\n\n<p>Go to:<\/p>\n\n\n\n<p><strong>Style \u2192 Product Rating<\/strong><\/p>\n\n\n\n<p>Available options include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Alignment<\/li>\n\n\n\n<li>Empty star color<\/li>\n\n\n\n<li>Filled star color<\/li>\n\n\n\n<li>Star size<\/li>\n\n\n\n<li>Margin spacing<\/li>\n<\/ul>\n\n\n\n<p>This allows you to match the rating design with your website style.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"311\" height=\"325\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Customize-Product-Rating-Style.jpg\" alt=\"\" class=\"wp-image-6539\" srcset=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Customize-Product-Rating-Style.jpg 311w, https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Customize-Product-Rating-Style-287x300.jpg 287w\" sizes=\"(max-width: 311px) 100vw, 311px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Customize Product Price Style<\/h2>\n\n\n\n<p>The <strong>Product Price styling panel<\/strong> allows you to design how prices appear inside the grid.<\/p>\n\n\n\n<p>Go to:<\/p>\n\n\n\n<p><strong>Style \u2192 Product Price<\/strong><\/p>\n\n\n\n<p>You can control:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Price typography<\/li>\n\n\n\n<li>Text color<\/li>\n\n\n\n<li>Alignment<\/li>\n\n\n\n<li>Margin spacing<\/li>\n<\/ul>\n\n\n\n<p>Additional styling options are available for:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Regular Price<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Typography<\/li>\n\n\n\n<li>Color<\/li>\n\n\n\n<li>Strike-through color<\/li>\n\n\n\n<li>Strike-through thickness<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Sale Price<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Typography<\/li>\n\n\n\n<li>Text color<\/li>\n\n\n\n<li>Background color<\/li>\n\n\n\n<li>Padding<\/li>\n\n\n\n<li>Border radius<\/li>\n<\/ul>\n\n\n\n<p>These options allow you to highlight <strong>discounted products visually<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"307\" height=\"718\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Customize-Product-Price-Style.jpg\" alt=\"\" class=\"wp-image-6540\" srcset=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Customize-Product-Price-Style.jpg 307w, https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Customize-Product-Price-Style-128x300.jpg 128w\" sizes=\"(max-width: 307px) 100vw, 307px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Configure Product Color Swatches<\/h2>\n\n\n\n<p>Flexi Post Grid supports <strong>WooCommerce product color swatches<\/strong>.<\/p>\n\n\n\n<p>These allow customers to preview product color options directly inside the grid.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Enable Color Swatches<\/h3>\n\n\n\n<p>Go to:<\/p>\n\n\n\n<p><strong>Plugin Settings \u2192 Product Grid \u2192 Product Options<\/strong><\/p>\n\n\n\n<p>Enable:<\/p>\n\n\n\n<p><strong>Enable Product Color Swatches<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"786\" height=\"530\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Swatch-Settings.jpg\" alt=\"\" class=\"wp-image-6541\" srcset=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Swatch-Settings.jpg 786w, https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Swatch-Settings-300x202.jpg 300w, https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Swatch-Settings-768x518.jpg 768w, https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Swatch-Settings-600x405.jpg 600w\" sizes=\"(max-width: 786px) 100vw, 786px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Swatch Settings<\/h3>\n\n\n\n<p>Available options include:<\/p>\n\n\n\n<p><strong>Swatches to Show<\/strong><br>Controls how many color circles appear before the &#8220;+N&#8221; indicator.<\/p>\n\n\n\n<p>Example:<br>If set to <strong>4<\/strong>, the grid will show four colors and then display <strong>+N<\/strong> for additional colors.<\/p>\n\n\n\n<p><strong>Show All Swatches<\/strong><br>Displays all available colors instead of limiting the number.<\/p>\n\n\n\n<p><strong>Show +N (More Count)<\/strong><br>Displays the &#8220;+N&#8221; indicator when additional colors exist.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Managing Product Colors<\/h3>\n\n\n\n<p>Product colors can be configured from WooCommerce attributes.<\/p>\n\n\n\n<p>Go to:<\/p>\n\n\n\n<p><strong>WooCommerce \u2192 Products \u2192 Attributes \u2192 Color<\/strong><\/p>\n\n\n\n<p>Then assign colors to each attribute term.<\/p>\n\n\n\n<p>These colors will automatically appear as swatches in the product grid.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"467\" height=\"209\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Managing-Product-Colors.jpg\" alt=\"\" class=\"wp-image-6535\" srcset=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Managing-Product-Colors.jpg 467w, https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Managing-Product-Colors-300x134.jpg 300w\" sizes=\"(max-width: 467px) 100vw, 467px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6: Customize Swatch Styling<\/h2>\n\n\n\n<p>Swatch appearance can be styled using the widget style panel.<\/p>\n\n\n\n<p>Go to:<\/p>\n\n\n\n<p><strong>Style \u2192 Product Swatches<\/strong><\/p>\n\n\n\n<p>Available styling options include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Alignment<\/li>\n\n\n\n<li>Swatch size<\/li>\n\n\n\n<li>Gap between swatches<\/li>\n\n\n\n<li>Border style<\/li>\n\n\n\n<li>Border radius<\/li>\n\n\n\n<li>Typography<\/li>\n\n\n\n<li>Text color<\/li>\n\n\n\n<li>Box shadow<\/li>\n\n\n\n<li>Margin spacing<\/li>\n<\/ul>\n\n\n\n<p>This allows you to match swatches with your store design.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"303\" height=\"597\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Customize-Swatch-Styling.jpg\" alt=\"\" class=\"wp-image-6536\" srcset=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Customize-Swatch-Styling.jpg 303w, https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Customize-Swatch-Styling-152x300.jpg 152w\" sizes=\"(max-width: 303px) 100vw, 303px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 7: Enable Wishlist Feature<\/h2>\n\n\n\n<p>Flexi Post Grid includes a <strong>built-in wishlist feature<\/strong> for product grids.<\/p>\n\n\n\n<p>You can enable this globally from plugin settings.<\/p>\n\n\n\n<p>Go to:<\/p>\n\n\n\n<p><strong>Plugin Settings \u2192 Product Grid \u2192 Wishlist<\/strong><\/p>\n\n\n\n<p>Enable:<\/p>\n\n\n\n<p><strong>Enable Wishlist<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"598\" height=\"256\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Enable-Wishlist-Feature.jpg\" alt=\"\" class=\"wp-image-6533\" srcset=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Enable-Wishlist-Feature.jpg 598w, https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Enable-Wishlist-Feature-300x128.jpg 300w\" sizes=\"(max-width: 598px) 100vw, 598px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Wishlist Shortcode<\/h2>\n\n\n\n<p>To create a wishlist page, use the following shortcode:<\/p>\n\n\n\n[fpg_wishlist&#093;\n\n\n\n<p>Add this shortcode to any page to display the user&#8217;s saved wishlist products.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a new page called <strong>Wishlist<\/strong><\/li>\n\n\n\n<li>Insert the shortcode<\/li>\n\n\n\n<li>Publish the page<\/li>\n<\/ol>\n\n\n\n<p>Visitors can then view and manage their saved products.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Customize Wishlist Style<\/h2>\n\n\n\n<p>Wishlist icon appearance can be customized in the widget style panel.<\/p>\n\n\n\n<p>Go to:<\/p>\n\n\n\n<p><strong>Style \u2192 Wishlist<\/strong><\/p>\n\n\n\n<p>Options include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Icon position<\/li>\n\n\n\n<li>Icon design (heart or other styles)<\/li>\n\n\n\n<li>Icon size<\/li>\n\n\n\n<li>Icon color<\/li>\n\n\n\n<li>Active icon color<\/li>\n\n\n\n<li>Background color<\/li>\n\n\n\n<li>Active background color<\/li>\n<\/ul>\n\n\n\n<p>These settings allow you to match the wishlist icon with your website theme.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"305\" height=\"363\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Customize-Wishlist-Style.jpg\" alt=\"\" class=\"wp-image-6534\" srcset=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Customize-Wishlist-Style.jpg 305w, https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Customize-Wishlist-Style-252x300.jpg 252w\" sizes=\"(max-width: 305px) 100vw, 305px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How Product Grid Works<\/h2>\n\n\n\n<p>When the <strong>Product Grid layout<\/strong> is selected:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>WooCommerce products are automatically loaded<\/li>\n\n\n\n<li>Product price and ratings are displayed<\/li>\n\n\n\n<li>Color swatches appear for products with color attributes<\/li>\n\n\n\n<li>Wishlist icon allows users to save products<\/li>\n\n\n\n<li>Add to Cart button allows quick purchase actions<\/li>\n<\/ul>\n\n\n\n<p>This creates a <strong>complete WooCommerce product browsing experience directly inside the grid layout<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Product Grid Best Use Cases<\/h2>\n\n\n\n<p>Product Grid works well for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>WooCommerce shop pages<\/li>\n\n\n\n<li>Featured products sections<\/li>\n\n\n\n<li>Product landing pages<\/li>\n\n\n\n<li>Home page product showcases<\/li>\n\n\n\n<li>Category product displays<\/li>\n<\/ul>\n\n\n\n<p>Because of its flexible design controls, it can be used for <strong>modern eCommerce layouts without additional plugins<\/strong>.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flexi Post Grid includes a powerful Product Grid layout that allows you to display WooCommerce products in a modern card-style grid. With this layout you can display: The Product Grid layout provides extensive design and functionality controls, allowing you to create a fully customizable product showcase. Step 1: Select Product Grid Style To display WooCommerce products, first choose the Product Grid style inside the grid widget. Go to: Grid Widget \u2192 Grid Style Types \u2192 Product Grid After selecting this option, the widget will automatically load product-specific settings and styling controls. These controls only appear when the Product Grid layout is selected. Step 2: Configure Product Grid Settings Inside the widget settings you will see Product Grid Settings, where you can control which product elements appear inside each grid card. Available options include: Show Rating Enable or disable the WooCommerce product rating display. Show Price Displays the product price on the grid card. Show Color Swatches Displays available product color options using circular swatches. Show Product Button Shows the main product button such as Add to Cart or Select Options. Add to Cart Button Text Customize the label used for the Add to Cart button. Select Options Button Text Customize the button text for variable products. Button Icon Upload or select an icon to display inside the product button. Show Button Icon Enable or disable the button icon display. Show Button Text Enable or disable the button label. Icon Position Choose whether the icon appears before or after the button text. Show Wishlist Displays a wishlist icon on the product card. Step 3: Customize Product Rating Style You can fully customize the appearance of the WooCommerce rating stars. Go to: Style \u2192 Product Rating Available options include: This allows you to match the rating design with your website style. Step 4: Customize Product Price Style The Product Price styling panel allows you to design how prices appear inside the grid. Go to: Style \u2192 Product Price You can control: Additional styling options are available for: Regular Price Sale Price These options allow you to highlight discounted products visually. Step 5: Configure Product Color Swatches Flexi Post Grid supports WooCommerce product color swatches. These allow customers to preview product color options directly inside the grid. Enable Color Swatches Go to: Plugin Settings \u2192 Product Grid \u2192 Product Options Enable: Enable Product Color Swatches Swatch Settings Available options include: Swatches to ShowControls how many color circles appear before the &#8220;+N&#8221; indicator. Example:If set to 4, the grid will show four colors and then display +N for additional colors. Show All SwatchesDisplays all available colors instead of limiting the number. Show +N (More Count)Displays the &#8220;+N&#8221; indicator when additional colors exist. Managing Product Colors Product colors can be configured from WooCommerce attributes. Go to: WooCommerce \u2192 Products \u2192 Attributes \u2192 Color Then assign colors to each attribute term. These colors will automatically appear as swatches in the product grid. Step 6: Customize Swatch Styling Swatch appearance can be styled using the widget style panel. Go to: Style \u2192 Product Swatches Available styling options include: This allows you to match swatches with your store design. Step 7: Enable Wishlist Feature Flexi Post Grid includes a built-in wishlist feature for product grids. You can enable this globally from plugin settings. Go to: Plugin Settings \u2192 Product Grid \u2192 Wishlist Enable: Enable Wishlist Wishlist Shortcode To create a wishlist page, use the following shortcode: [fpg_wishlist&#093; Add this shortcode to any page to display the user&#8217;s saved wishlist products. Example: Visitors can then view and manage their saved products. Customize Wishlist Style Wishlist icon appearance can be customized in the widget style panel. Go to: Style \u2192 Wishlist Options include: These settings allow you to match the wishlist icon with your website theme. How Product Grid Works When the Product Grid layout is selected: This creates a complete WooCommerce product browsing experience directly inside the grid layout. Product Grid Best Use Cases Product Grid works well for: Because of its flexible design controls, it can be used for modern eCommerce layouts without additional plugins.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[27],"doc_tag":[],"class_list":["post-6542","docs","type-docs","status-publish","hentry","doc_category-grid-styles-types-and-design"],"year_month":"2026-04","word_count":802,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Elementordipak","author_nicename":"elementordipak","author_url":"https:\/\/creativewebui.com\/flexi-post-grid\/author\/elementordipak\/"},"doc_category_info":[{"term_name":"Grid Styles Types and Design","term_url":"https:\/\/creativewebui.com\/flexi-post-grid\/docs-category\/grid-styles-types-and-design\/"}],"doc_tag_info":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Product Grid for WooCommerce - Flexi Post Grid<\/title>\n<meta name=\"description\" content=\"Learn how to create a WooCommerce product grid using Flexi Post Grid. Display price, ratings, color swatches, wishlist, and Add to Cart buttons with full design customization.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Product Grid for WooCommerce - Flexi Post Grid\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a WooCommerce product grid using Flexi Post Grid. Display price, ratings, color swatches, wishlist, and Add to Cart buttons with full design customization.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Flexi Post Grid\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-11T19:17:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Select-Product-Grid-Style.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"183\" \/>\n\t<meta property=\"og:image:height\" content=\"212\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/\",\"url\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/\",\"name\":\"Product Grid for WooCommerce - Flexi Post Grid\",\"isPartOf\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Select-Product-Grid-Style.jpg\",\"datePublished\":\"2026-03-11T19:08:08+00:00\",\"dateModified\":\"2026-03-11T19:17:59+00:00\",\"description\":\"Learn how to create a WooCommerce product grid using Flexi Post Grid. Display price, ratings, color swatches, wishlist, and Add to Cart buttons with full design customization.\",\"breadcrumb\":{\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/#primaryimage\",\"url\":\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Select-Product-Grid-Style.jpg\",\"contentUrl\":\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Select-Product-Grid-Style.jpg\",\"width\":183,\"height\":212},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/creativewebui.com\/flexi-post-grid\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documentation\",\"item\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Product Grid for WooCommerce\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/#website\",\"url\":\"https:\/\/flexipostgrid.creativewebui.com\/\",\"name\":\"Flexi Post Grid\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/flexipostgrid.creativewebui.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Product Grid for WooCommerce - Flexi Post Grid","description":"Learn how to create a WooCommerce product grid using Flexi Post Grid. Display price, ratings, color swatches, wishlist, and Add to Cart buttons with full design customization.","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:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/","og_locale":"en_US","og_type":"article","og_title":"Product Grid for WooCommerce - Flexi Post Grid","og_description":"Learn how to create a WooCommerce product grid using Flexi Post Grid. Display price, ratings, color swatches, wishlist, and Add to Cart buttons with full design customization.","og_url":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/","og_site_name":"Flexi Post Grid","article_modified_time":"2026-03-11T19:17:59+00:00","og_image":[{"width":183,"height":212,"url":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Select-Product-Grid-Style.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/","url":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/","name":"Product Grid for WooCommerce - Flexi Post Grid","isPartOf":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/#primaryimage"},"image":{"@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Select-Product-Grid-Style.jpg","datePublished":"2026-03-11T19:08:08+00:00","dateModified":"2026-03-11T19:17:59+00:00","description":"Learn how to create a WooCommerce product grid using Flexi Post Grid. Display price, ratings, color swatches, wishlist, and Add to Cart buttons with full design customization.","breadcrumb":{"@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/#primaryimage","url":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Select-Product-Grid-Style.jpg","contentUrl":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/03\/Select-Product-Grid-Style.jpg","width":183,"height":212},{"@type":"BreadcrumbList","@id":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/woocommerce-product-grid-layout-flexi-post-grid-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativewebui.com\/flexi-post-grid\/"},{"@type":"ListItem","position":2,"name":"Documentation","item":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/"},{"@type":"ListItem","position":3,"name":"Product Grid for WooCommerce"}]},{"@type":"WebSite","@id":"https:\/\/flexipostgrid.creativewebui.com\/#website","url":"https:\/\/flexipostgrid.creativewebui.com\/","name":"Flexi Post Grid","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flexipostgrid.creativewebui.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/6542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/comments?post=6542"}],"version-history":[{"count":9,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/6542\/revisions"}],"predecessor-version":[{"id":6551,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/6542\/revisions\/6551"}],"wp:attachment":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/media?parent=6542"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/doc_category?post=6542"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/doc_tag?post=6542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}