{"id":308,"date":"2024-06-28T08:57:07","date_gmt":"2024-06-28T08:57:07","guid":{"rendered":"https:\/\/wpretro.com\/vsw\/docs\/getting-started\/my-section\/creating-a-variation-grid-layout\/"},"modified":"2024-06-28T14:23:49","modified_gmt":"2024-06-28T14:23:49","slug":"creating-a-variation-grid-layout","status":"publish","type":"docs","link":"https:\/\/wpretro.com\/vsw\/docs\/getting-started\/main\/creating-a-variation-grid-layout\/","title":{"rendered":"Creating a Variation Grid Layout"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In Variation Suite, you can easily create and customize grid layouts to display your product variations in a visually appealing format. Follow these steps to set up a variation grid layout:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"1-accessing-variation-display-settings\">1: Accessing Variation Display Settings<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the left-hand menu, click on <strong>WooCommerce<\/strong>.<\/li>\n\n\n\n<li>Select <strong>Settings<\/strong>.<\/li>\n\n\n\n<li>Click on the <strong>Variation Suite<\/strong> tab.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"527\" src=\"https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/3-2-1024x527.png\" alt=\"\" class=\"wp-image-341\" srcset=\"https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/3-2-1024x527.png 1024w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/3-2-300x154.png 300w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/3-2-768x395.png 768w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/3-2-600x309.png 600w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/3-2.png 1155w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"2-configuring-grid-layout\">2: Configuring Grid Layout<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Under <strong>Variation Display<\/strong>, choose <strong>Grid<\/strong> from the options.<\/li>\n\n\n\n<li>This setting determines how your product variations will be displayed on the frontend.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1091\" height=\"604\" src=\"https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/7-1024x567.png\" alt=\"\" class=\"wp-image-347\" srcset=\"https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/7-1024x567.png 1024w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/7-300x166.png 300w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/7-768x425.png 768w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/7-600x332.png 600w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/7.png 1091w\" sizes=\"auto, (max-width: 1091px) 100vw, 1091px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Modify the grid background color to match your website&#8217;s theme or branding.<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Remember<\/strong>, you have the flexibility to assign this layout to specific product categories by editing each category and selecting the preferred &#8220;Variations Display Mode&#8221; option.<\/p>\n","protected":false},"featured_media":0,"parent":302,"menu_order":3,"comment_status":"open","ping_status":"closed","template":"","meta":{"ghostkit_customizer_options":"","ghostkit_custom_css":"","ghostkit_custom_js_head":"","ghostkit_custom_js_foot":"","ghostkit_typography":""},"doc_tag":[],"class_list":["post-308","docs","type-docs","status-publish","hentry"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/comments?post=308"}],"version-history":[{"count":3,"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/308\/revisions"}],"predecessor-version":[{"id":348,"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/308\/revisions\/348"}],"up":[{"embeddable":true,"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/302"}],"next":[{"title":"Configuring the Variation Table","link":"https:\/\/wpretro.com\/vsw\/docs\/getting-started\/main\/configuring-the-variation-table\/","href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/306"}],"prev":[{"title":"Setting Up Variation Swatches","link":"https:\/\/wpretro.com\/vsw\/docs\/getting-started\/main\/setting-up-variation-swatches\/","href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/305"}],"wp:attachment":[{"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/media?parent=308"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/doc_tag?post=308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}