<p><span style="font-weight: 400">The WooCommerce product variation table plugin allows you to replace the default variation selection dropdown and display your product variations in a convenient and customizable table or list layout. This offers more visibility and enables customers to quickly browse through the available options and purchase the desired products.</span></p>
<p><span style="font-weight: 400">Select the columns you want to display, customize color, and number of variations. Display it to everyone, or select user roles.</span></p>
<p><span style="font-weight: 400">The WooCommerce variation table plugin is a perfect addition to your B2B store as it allows bulk add-to-cart and easy navigation for wholesale dealers.</span></p>
<div class="woo-sc-box normal">Enable customers to seelct number of products they want to see on the page by using the <strong><a href="https://woocommerce.com/products/product-per-page-for-woocommerce/">WooCommerce number of products per page plugin</a></strong>.</div>
<h2><strong>Key Features</strong></h2>
<ul class="wccom-tick-list-primary">
<li style="font-weight: 400"><span style="font-weight: 400">Displays product variations in table/list view</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Customize product variation table columns to include specific information (name, short description, image, quantity, SKU, prices, add to cart, and more)</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Search bar to find specific variations</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Displays Print, PDF, CSV, Excel, and Copy buttons</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Enable table/list view for specific products, categories, and user roles</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Enable bulk Add-to-Cart Button</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Select a dark or light theme for the product list design </span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Customize text, background, and button colors for both table and list view</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Choose from pre-defined positions to show variations table or use a shortcode</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Enable pagination and limit the number of product variations to display per page</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Display the “Added to Cart” message in a popup</span></li>
</ul>
<div class="woo-sc-box normal" style="background-color: #beecba">This Plugin is fully compatible with HPOS(High-Performance Order Storage) and Multisite.</div>
<h3><strong>Display Product Variations in Two Different Layouts</strong></h3>
<p><span style="font-weight: 400">WooCommerce product variation plugin allows you to showcase product variations in a table or list design. Replace the default variation selection dropdown with a user-friendly variation table or list design. Choose column attributes, customize color, and enable bulk add-to-cart for a quick and easy purchase. </span></p>
<p><img class="aligncenter wp-image-18734002753378 size-full" src="https://woocommerce.com/wp-content/uploads/2020/06/2023-10-23_13-51-48.png" alt="Display Product Variations in Two Different Layouts - List View" width="824" height="665" /></p>
<h3><strong>Customize Variation Table Columns</strong></h3>
<p><span style="font-weight: 400">Display specific information </span> <span style="font-weight: 400">columns in the variations table and customize their order. You can include the following options in the table:</span></p>
<ul class="wccom-tick-list-secondary">
<li style="font-weight: 400"><span style="font-weight: 400">Checkbox</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Thumbnail</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Variation Title</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Short Description</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">SKU</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Price</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Stock</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Length</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Weight</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Height</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Quantity</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Add to Cart Button</span></li>
</ul>
<p><img class="aligncenter wp-image-18734003511920 size-full" src="https://woocommerce.com/wp-content/uploads/2020/06/2024-04-06_10-44-50.png" alt="Customize Variation Table Columns" width="621" height="459" /></p>
<h3><strong>Add to Cart Multiple Products at Once</strong></h3>
<p><span style="font-weight: 400">The bulk add-to-cart feature makes it simple for B2B and wholesale customers to purchase products in large quantities. From a table or list view, you can easily find and select product variations, and place bulk orders at once.</span></p>
<p><img class="aligncenter wp-image-18734003511928 size-full" src="https://woocommerce.com/wp-content/uploads/2020/06/2024-04-06_10-51-44.png" alt="Add to Cart Multiple Products at Once" width="1105" height="659" /></p>
<h3><strong>Use Shortcode to Display Variation Table in Builders</strong></h3>
<p><span style="font-weight: 400">The WooCommerce product variation table plugin enables you to use a shortcode to display the variation table in builders such as Elementor and Divi. This makes it easy for merchants to display the table without any coding.</span></p>
<p><img class="aligncenter wp-image-18734003511924 size-full" src="https://woocommerce.com/wp-content/uploads/2020/06/2024-04-06_10-48-42.png" alt="Use Shortcode to Display Variation Table in Builders" width="791" height="282" /><span style="font-weight: 400">.</span></p>
<h3><strong>Real-time search filter</strong></h3>
<p><span style="font-weight: 400">The Ajax-based search filter allows users to search products by price or similar attributes and view real-time results. Product variations update as soon as the user adds a product name or any of that product’s attributes to the search bar.</span></p>
<p><img class="aligncenter wp-image-18734002853754 size-full" src="https://woocommerce.com/wp-content/uploads/2020/06/new-Copy.png" alt="Real-time search filter" width="1614" height="654" /></p>
<h3><strong>Print, copy, or extract product variations</strong></h3>
<p><span style="font-weight: 400">The product variations table for WooCommerce allows customers to print, copy, or export the list of product variations to review offline. They can download the table in various formats such as Excel, CSV, or PDF format and also print it.</span></p>
<p><img class="aligncenter wp-image-18734002853755 size-full" src="https://woocommerce.com/wp-content/uploads/2020/06/new-Copy-2.png" alt="Print, copy, or extract product variations" width="1614" height="658" /></p>
<h3><strong>Select Variation Table Position and Add Pagination</strong></h3>
<p><span style="font-weight: 400">You can choose whether you want to display the product variation table before or after the single product summary. Restrict the number of variations to be displayed per page and enable pagination for the table.</span></p>
<p><img class="aligncenter wp-image-18734002853761 size-full" src="https://woocommerce.com/wp-content/uploads/2020/06/new-Copy-3.png" alt="Select Variation Table Position and Add Pagination" width="1614" height="1022" /></p>
<h3><strong>Easily Configure WooCommerce Variation Tables for Specific Products or User Roles</strong></h3>
<p><span style="font-weight: 400">The WooCommerce variation plugin allows you to restrict displaying variation tables for specific products, categories, or user roles. This feature helps merchants to only display the table for specific products.</span></p>
<p><img class="alignnone wp-image-18734003511949 size-medium" src="https://woocommerce.com/wp-content/uploads/2020/06/2024-04-06_11-04-50.png?w=714" alt="Easily Configure WooCommerce Variation Tables for Specific Products or User Roles" width="714" height="371" /></p>
<h3><strong>Customize Table Layout</strong></h3>
<p><span style="font-weight: 400">Variation table WooCommerce enables multiple customization options. You can choose which product attributes to display in columns, such as price, SKU, image, etc. Customize table, button, and text colors. </span></p>
<p><img class="aligncenter wp-image-8519571 size-full" src="https://woocommerce.com/wp-content/uploads/2020/06/Customize-table-layout-1.png" alt="WooCommerce Variation Table - Customize Table Layout" width="667" height="424" /></p>
<h3><strong>Responsive design</strong></h3>
<p><span style="font-weight: 400">The product variations table for WooCommerce is responsive and user-friendly, allowing users to navigate them on a mobile device.</span></p>
<p><img class="aligncenter wp-image-8519520 size-full" src="https://woocommerce.com/wp-content/uploads/2020/06/responsive.jpeg" alt="WooCommerce Variation Table - Responsive design" width="540" height="1200" /></p>
<p> </p>
<h2>Compatibility</h2>
<p>Our plugins are designed to be highly versatile and also compatible with the most commonly used themes, browsers, builders, and mobile views. We understand the importance of flexibility and integration when it comes to enhancing your website’s functionality. Our plugins can effortlessly integrate with the following:</p>
<h3>Themes Compatibility</h3>
<ul class="wccom-tick-list-secondary">
<li>Store Front</li>
<li>Avada</li>
<li>Flatsome</li>
<li>Woodmart</li>
<li>Porto</li>
<li>Divi</li>
</ul>
<h3>Builders</h3>
<ul class="wccom-tick-list-secondary">
<li>Elementor</li>
</ul>
<h3>Compatible with</h3>
<ul class="wccom-tick-list-secondary">
<li>Multi-Site</li>
</ul>
<table class="borderless">
<tbody>
<tr>
<td><img class="alignnone wp-image-18734002262567" src="https://woocommerce.com/wp-content/uploads/2014/08/unnamed-1.png?w=320" alt="WooCommerce Product Variations Table - documentation" width="120" height="105" /></td>
<td>
<h2>Documentation</h2>
<p>Looking for assistance? Check out the extensive documentation for a complete understanding of the WooCommerce Product Variations Table plugin.</p>
<h4><a href="https://woocommerce.com/document/variation-table-for-woocommerce/" target="_blank" rel="noopener">View documentation</a></h4>
</td>
</tr>
</tbody>
</table>
<table class="borderless">
<tbody>
<tr>
<td><img class="alignnone wp-image-18734002262567" src="https://woocommerce.com/wp-content/uploads/2014/08/unnamed.png" alt="woocommerce FmeAddons Support" width="120" height="105" /></td>
<td>
<h2>Questions and Support</h2>
<p>For Questions and Support: If you have inquiries before making a purchase or require assistance, don’t hesitate to contact our support team.</p>
<p><a href="mailto:support@fmeaddons.com">Send email</a></td>
</tr>
</tbody>
</table>

Product Variations Table

<p><span style="font-weight: 400">Display product variations in a table or list view to help customers filter, sort, and add products to their cart.</span></p>

<h2>Replace dropdowns with color and image swatches</h2>
<p>Give your product variations a cleaner, more intuitive presentation by replacing standard dropdown fields with color swatches and image selections.</p>
<p>Instead of forcing customers to select from text-based options, you can present variations visually—making it easier to understand available styles, colors, sizes, or configurations at a glance.</p>
<div style="text-align:center;margin: 24px 0">
	<a href="https://woocommerce.com/wp-content/uploads/2012/06/Screen-Shot-2012-06-13-at-18.44.18.png"><br />
		<img class="aligncenter size-full wp-image-17786" src="https://woocommerce.com/wp-content/uploads/2012/06/Screen-Shot-2012-06-13-at-18.44.18.png" alt="Variation dropdowns replaced with visual swatches" width="313" height="155" style="max-width:100%;height:auto;border:1px solid #e5e7eb;border-radius:8px" /><br />
	</a>
</div>
<p>Swatches improve usability, reduce friction, and create a more polished shopping experience—especially for products where visual choice matters.</p>
<h2>Simple setup, no complexity</h2>
<p>This extension is designed to be easy to configure and maintain.</p>
<p>You can define swatches in two ways:</p>
<ul>
<li><strong>Globally at the attribute level</strong> – Set colors or images once and reuse them across all products.</li>
<li><strong>Per product</strong> – Override or customize swatches for specific products when needed.</li>
</ul>
<p>This flexibility allows you to get up and running quickly, while still giving you control where it matters.</p>
<div style="flex-wrap:wrap;gap:24px;margin:32px 0;align-items:flex-start">
<div style="flex:1 1 420px;min-width:280px">
		<a href="https://woocommerce.com/wp-content/uploads/2012/06/configuration-of-color-swatches.png"><br />
			<img src="https://woocommerce.com/wp-content/uploads/2012/06/configuration-of-color-swatches.png?w=896" alt="Configuration of color swatches" width="896" height="739" style="width:100%;height:auto;border:1px solid #e5e7eb;border-radius:8px" /><br />
		</a></p>
<p style="margin:10px 0 0 0"><strong>Color swatch configuration</strong><br />Quickly assign colors to variation terms for a clean, visual selection experience.</p>
</p></div>
<div style="flex:1 1 420px;min-width:280px">
		<a href="https://woocommerce.com/wp-content/uploads/2012/06/configuration-of-image-swatches.png"><br />
			<img src="https://woocommerce.com/wp-content/uploads/2012/06/configuration-of-image-swatches.png?w=896" alt="Configuration of image swatches" width="896" height="814" style="width:100%;height:auto;border:1px solid #e5e7eb;border-radius:8px" /><br />
		</a></p>
<p style="margin:10px 0 0 0"><strong>Image swatch configuration</strong><br />Use images for variation choices when visual presentation matters more than plain text.</p>
</p></div>
</div>
<h2>Configure once, reuse globally</h2>
<p>For stores with shared attributes across many products, global configuration is one of the biggest advantages. Set up your attributes once and reuse them throughout your catalog instead of configuring each product from scratch.</p>
<div style="flex-wrap:wrap;gap:24px;margin:32px 0;align-items:flex-start">
<div style="flex:1 1 420px;min-width:280px">
		<a href="https://woocommerce.com/wp-content/uploads/2012/06/configuration-of-attributes-overview.png"><br />
			<img src="https://woocommerce.com/wp-content/uploads/2012/06/configuration-of-attributes-overview.png?w=896" alt="Configuration of attributes overview" width="896" height="590" style="width:100%;height:auto;border:1px solid #e5e7eb;border-radius:8px" /><br />
		</a></p>
<p style="margin:10px 0 0 0"><strong>Attributes overview</strong><br />Manage the attributes used across your variable products from a familiar WooCommerce interface.</p>
</p></div>
<div style="flex:1 1 420px;min-width:280px">
		<a href="https://woocommerce.com/wp-content/uploads/2012/06/configuration-of-global-attribute-with-color.png"><br />
			<img src="https://woocommerce.com/wp-content/uploads/2012/06/configuration-of-global-attribute-with-color.png?w=896" alt="Configuration of global attribute with color" width="896" height="651" style="width:100%;height:auto;border:1px solid #e5e7eb;border-radius:8px" /><br />
		</a></p>
<p style="margin:10px 0 0 0"><strong>Global attribute setup</strong><br />Assign swatch values directly to global attributes so they are ready to use across multiple products.</p>
</p></div>
</div>
<h2>Designed to work with your store</h2>
<p>Variation Swatches and Photos has been built and refined alongside WooCommerce for years, with a focus on reliability, compatibility, and ease of use.</p>
<ul>
<li>Works with a wide range of WooCommerce-compatible themes</li>
<li>Integrates directly into the native product variation system</li>
<li>Supports both global attribute setup and per-product overrides</li>
<li>No complex setup or custom development required</li>
</ul>
<p>The goal is simple: enhance how variations are displayed without changing how your store works.</p>
<h2>Key features</h2>
<ul>
<li>Replace dropdowns with <strong>color swatches</strong> or <strong>image selections</strong></li>
<li>Configure swatches globally for attributes</li>
<li>Override swatches at the product level</li>
<li>Improve variation selection for customers</li>
<li>Works with existing WooCommerce variable products</li>
</ul>
<h2>See it in action</h2>
<p>To view live examples, visit the <a href="https://www.elementstark.com/woocommerce-extension-demos/product-category/swatches-and-photos/">demo page</a>.</p>

Variation Swatches and Photos

<p>Show color and image swatches instead of dropdowns for variable products.</p>

Product Variations Table vs Variation Swatches and Photos