{"id":306,"date":"2024-06-28T08:56:51","date_gmt":"2024-06-28T08:56:51","guid":{"rendered":"https:\/\/wpretro.com\/vsw\/docs\/getting-started\/my-section\/configuring-the-variation-table\/"},"modified":"2024-06-29T14:20:17","modified_gmt":"2024-06-29T14:20:17","slug":"configuring-the-variation-table","status":"publish","type":"docs","link":"https:\/\/wpretro.com\/vsw\/docs\/getting-started\/main\/configuring-the-variation-table\/","title":{"rendered":"Configuring the Variation Table"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In Variation Suite, you can configure and display product variations in a structured table layout. Follow these steps to set up a variation table 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<ul 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<\/ul>\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-table-layout\">2: Configuring Table Layout<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Under <strong>Variation Display<\/strong>, choose <strong>Table<\/strong> from the options.<\/li>\n\n\n\n<li>This setting defines how your product variations will appear on the frontend in a tabular format.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"653\" src=\"https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/8-1024x653.png\" alt=\"\" class=\"wp-image-350\" srcset=\"https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/8-1024x653.png 1024w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/8-300x191.png 300w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/8-768x490.png 768w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/8-600x383.png 600w, https:\/\/wpretro.com\/vsw\/wp-content\/uploads\/2024\/06\/8.png 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Verify which columns you need to show on the table. Drag\/drop to change their order.<\/li>\n\n\n\n<li>Choose the table location, it can be above the add-to-cart button, or in case you have many attributes, you can choose before tabs which means the table will appear in full width.<\/li>\n\n\n\n<li>Customize the table&#8217;s appearance by adjusting settings such as table header color and row background color for out-of-stock variations.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Remember<\/strong>, you can select this layout for specific categories by editing each category and setting the &#8220;Variations Display Mode&#8221; option accordingly.<\/p>\n","protected":false},"featured_media":0,"parent":302,"menu_order":4,"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-306","docs","type-docs","status-publish","hentry"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/306","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=306"}],"version-history":[{"count":4,"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/306\/revisions"}],"predecessor-version":[{"id":356,"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/306\/revisions\/356"}],"up":[{"embeddable":true,"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/302"}],"next":[{"title":"Customizing Price Displays","link":"https:\/\/wpretro.com\/vsw\/docs\/getting-started\/main\/customizing-price-displays\/","href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/307"}],"prev":[{"title":"Creating a Variation Grid Layout","link":"https:\/\/wpretro.com\/vsw\/docs\/getting-started\/main\/creating-a-variation-grid-layout\/","href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/docs\/308"}],"wp:attachment":[{"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/media?parent=306"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/wpretro.com\/vsw\/wp-json\/wp\/v2\/doc_tag?post=306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}