<h2><b>Replace dropdown fields on product variations with the swatches plugin</b></h2>
<p><span style="font-weight: 400">By using variation swatches for WooCommerce, you can turn product variations into eye-catching swatches that suit your theme perfectly. Display radio buttons in the form of text labels, images, or colors instead of the default dropdowns. You can also share the variation link of the specific attribute and allow customers to find the exact variation they are looking for.</span></p>
<p><span style="font-weight: 400">Variations swatches can be displayed on the product page and shop page. Also, set different swatch sizes for both pages. It provides a simplified experience for your customers. For out-of-stock product variations, you can hide the radio buttons, cross them out, or blur them. You can show radio buttons on all variable products or selected ones. With this plugin, you can also customize the radio button shape, tooltip, and border.</span></p>
<h3><strong>Features</strong></h3>
<ul>
<li style="font-weight: 400"><span style="font-weight: 400">Display swatches as radio buttons, colors, images, or text labels</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Customize the size of each swatch</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Set variation swatches at the product level</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Display dual color swatches </span><b>(New)</b></li>
<li style="font-weight: 400"><span style="font-weight: 400">Change product images on the shop page when users click or hover</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Hide, blur, or cross out variations that are out of stock</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Add radio buttons to all or selected variable products</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Display all attributes on the shop page </span><b>(New)</b></li>
<li style="font-weight: 400"><span style="font-weight: 400">Edit attributes on Cart Page </span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Generate product variation Link</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Change radio button shapes</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Enable tooltips and borders</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Map product attributes with swatch types</span></li>
</ul>
<h3><strong>Show Product Variation Swatches as Radio Buttons</strong></h3>
<p><span style="font-weight: 400">Display variation swatches as radio buttons on the shop and product pages to enhance user experience and navigation. You can add different types of attribute swatches such as radio buttons, images, colors, or text labels, instead of the default dropdown selection.</span></p>
<p> </p>
<p class="jetpack-slideshow-noscript robots-nocontent">This slideshow requires JavaScript.</p><div id="gallery-0-3-slideshow" class="jetpack-slideshow-window jetpack-slideshow jetpack-slideshow-black" data-trans="fade" data-autostart="1" data-gallery="[{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2021\/11\/round.png","id":"18734005776279","title":"round","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2021\/11\/Square.png","id":"18734005776277","title":"Square","alt":"","caption":"","itemprop":"image"}]"></div>
<p> </p>
<h3><strong>Variation Swatches as Color, Radio Button, Images, or Text Labels</strong></h3>
<p><span style="font-weight: 400">Variation swatches as radio button lets you showcase product variations in radio buttons, color swatches, images, and text labels. These swatches provide a more user-friendly and interactive way for customers to select product variations, such as choosing the color of a t-shirt or the size of a pair of jeans.</span></p>
<p> </p>
<p class="jetpack-slideshow-noscript robots-nocontent">This slideshow requires JavaScript.</p><div id="gallery-0-4-slideshow" class="jetpack-slideshow-window jetpack-slideshow jetpack-slideshow-black" data-trans="fade" data-autostart="1" data-gallery="[{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2021\/11\/R1.png","id":"18734005776287","title":"R1","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2021\/11\/R2.png","id":"18734005776286","title":"R2","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2021\/11\/r3.png","id":"18734005776285","title":"r3","alt":"","caption":"","itemprop":"image"}]"></div>
<p> </p>
<h3><strong>Highlight Product Variation Image</strong></h3>
<p><span style="font-weight: 400">Variation swatches for WooCommerce enable you to highlight product variations in the form of images. You can place image radio buttons on the shop page beneath the product image. Users can preview product variations when they hover over or click on the buttons. Allow users to quickly see the product variations without leaving the shop page.</span></p>
<p><img class="aligncenter wp-image-8830860 size-full" src="https://woocommerce.com/wp-content/uploads/2021/11/3-2.gif" alt="Highlight product variation images for quick preview and selection." width="600" height="338" /></p>
<h3><b>Display All Attributes on Shop Page</b></h3>
<p><span style="font-weight: 400">Display all variation attribute swatches on the shop page so customers can quickly select options like size or color and add products to the cart without opening the product page.</span></p>
<p><img class="size-medium wp-image-18734006360529 aligncenter" src="https://woocommerce.com/wp-content/uploads/2021/11/Display-All-Attributes-on-Shop-Page.png?w=896" alt="Display All Attributes on Shop Page" width="896" height="492" /></p>
<h3><b>Dual Color Variation Swatches (New)</b></h3>
<p><span style="font-weight: 400">Dual Color Variation Swatches let you showcase two colors within a single swatch. This feature is perfect for products that come in dual tones, as it allows you to represent both shades in one variation. Instead of creating multiple swatches, you can easily assign two colors to a single attribute, giving customers a clear view of multicolored product options.</span></p>
<p><img class="size-medium wp-image-18734005795868 aligncenter" src="https://woocommerce.com/wp-content/uploads/2021/11/Dual-Color-swatches.png?w=832" alt="Dual Color swatches" width="832" height="467" /></p>
<h3><strong>Customize the Variation Swatches for Specific Product</strong></h3>
<p><span style="font-weight: 400">You can customize the product variations swatches for specific products in the product settings. You can add or remove the variation attribute and set the shape. Variation swatches plugin also enables you to customize the size of specific swatches for the product page. However, product-level settings take precedence over general settings.</span></p>
<p><img class="aligncenter wp-image-18734002956781 size-full" src="https://woocommerce.com/wp-content/uploads/2021/11/Customize-the-Variation-Swatches-for-Specific-Product.png" alt="Custom swatches with adjustable size and shape" width="1414" height="507" /></p>
<h3><strong>Customization of the Image Radio Button</strong></h3>
<p><span style="font-weight: 400">Variation swatches for WooCommerce lets you customize the image radio button on the shop page. You can choose to display product variation images by clicking on image swatches or hovering over them depending on your store theme. This adds extra appeal to product variations.</span></p>
<p><img class="size-medium wp-image-18734005795875 aligncenter" src="https://woocommerce.com/wp-content/uploads/2021/11/Customization-of-the-Image-Radio-Button-1.png?w=896" alt="Customization of the Image Radio Button" width="896" height="480" /></p>
<p> </p>
<h3><b>Variation Swatches for Out-of-Stock Products</b></h3>
<p><span style="font-weight: 400">Variations swatches as radio buttons enables you to display the radio buttons for out-of-stock products. You have multiple options such as hiding the out-of-stock product swatches to minimize any confusion. However, you can also blur or cross out the variations that are not available.</span></p>
<p> </p>
<p class="jetpack-slideshow-noscript robots-nocontent">This slideshow requires JavaScript.</p><div id="gallery-0-5-slideshow" class="jetpack-slideshow-window jetpack-slideshow jetpack-slideshow-black" data-trans="fade" data-autostart="1" data-gallery="[{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2021\/11\/out-of-stock.png","id":"18734005776300","title":"out of stock","alt":"","caption":"Out of Stock product \u0026#8211; Cross","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2021\/11\/Out-of-Stock-Swatch-Type-Blur.png","id":"18734005795881","title":"Out-of-Stock-Swatch-Type \u0026#8211; Blur","alt":"Out-of-Stock-Swatch-Type - Blur","caption":"Out of Stock Product \u0026#8211; Blur","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2021\/11\/Out-of-stock-products.png","id":"18734005795882","title":"Out of stock products","alt":"Out of stock products - Settings","caption":"Out of Stock \u0026#8211; Settings","itemprop":"image"}]"></div>
<p> </p>
<h3><b>Edit Product Variations Directly from the Cart</b></h3>
<p><span style="font-weight: 400">Swatches for WooCommerce allows your customers to change product variations like size, color, or style without leaving the cart page. They can update their selections instantly, making the checkout process faster, smoother, and more convenient. This feature improves user experience, and helps minimize cart abandonment.</span></p>
<p><img class="size-medium wp-image-18734006060310 aligncenter" src="https://woocommerce.com/wp-content/uploads/2021/11/Edit-Product-Variations-Directly-from-the-Cart.png?w=896" alt="Edit Product Variations Directly from the Cart" width="896" height="574" /></p>
<h3>Show Radio buttons for All or Selected Products</h3>
<p><span style="font-weight: 400">Increase store engagement with the variation swatches for WooCommerce. You can choose to display variation swatches on selected product variations. Whether you want to add radio buttons to all products or selected variations, this plugin gives you the flexibility to display variations swatches on all or specific variable products.</span></p>
<ul>
<li class="li2">All variable products</li>
<li class="li2">All variable products except for X</li>
<li class="li2">Specific variable products</li>
</ul>
<p><img class="size-medium wp-image-18734005795888 aligncenter" src="https://woocommerce.com/wp-content/uploads/2021/11/Show-Radio-buttons-for-All-or-Selected-Products-1.png?w=896" alt="Show Radio buttons for All or Selected Products" width="896" height="663" /></p>
<p> </p>
<h3><b>Generate Product variations URL</b></h3>
<p><span style="font-weight: 400">Generate a unique URL for any product variation and its attributes, allowing you to share direct links with customers. Customers land instantly on the selected variation without reselecting options, making their buying journey faster, smoother, and more engaging.</span></p>
<p><img class="size-medium wp-image-18734005994908 aligncenter" src="https://woocommerce.com/wp-content/uploads/2021/11/Generate-Product-variations-URL.png?w=855" alt="Generate Product variations URL" width="855" height="836" /></p>
<h3 class="p1">Change Radio Button Shapes and Sizes</h3>
<p><span style="font-weight: 400">Variation Swatches as Radio Buttons offers the freedom to customize the shape and size of the variation swatches. You can choose round or square button swatches and adjust the size by entering the width and height. This way, you can create radio button swatches that complement your website design. Both the shop and product pages can be customized to have different shapes and sizes for the swatches.</span></p>
<p class="jetpack-slideshow-noscript robots-nocontent">This slideshow requires JavaScript.</p><div id="gallery-0-6-slideshow" class="jetpack-slideshow-window jetpack-slideshow jetpack-slideshow-black" data-trans="fade" data-autostart="1" data-gallery="[{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2021\/11\/rs.png","id":"18734005776318","title":"rs","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2021\/11\/ss.png","id":"18734005776317","title":"ss","alt":"","caption":"","itemprop":"image"}]"></div>
<h3><b>Add Button Border and Enable Tooltips</b><b></b></h3>
<p><span style="font-weight: 400">Color swatches for WooCommerce allow you to customize swatch styles by adding borders and adjusting the border radius to match your store design. You can also change the shape of the radio buttons for a consistent look. To enhance the shopping experience, you can enable tooltips on product variation swatches that display either text or an image.</span></p>
<p><img class="aligncenter wp-image-8830865 size-full" src="https://woocommerce.com/wp-content/uploads/2021/11/8-2.png" alt="Swatches with borders, rounded edges, and tooltips" width="873" height="486" /></p>
<h3><b>Replace Dropdown Selection with Multiple Swatches</b></h3>
<p><span style="font-weight: 400">Use the Variations swatches as radio buttons instead of the default dropdown selection to display products with multiple variants, more interactively and user-friendly.</span></p>
<p><span style="font-weight: 400">Map attributes to different swatch types and display product variations in the form of swatches. Highlight your product variations more effectively.</span></p>
<p class="jetpack-slideshow-noscript robots-nocontent">This slideshow requires JavaScript.</p><div id="gallery-0-7-slideshow" class="jetpack-slideshow-window jetpack-slideshow jetpack-slideshow-black" data-trans="fade" data-autostart="1" data-gallery="[{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2021\/11\/Screenshot-from-2025-09-26-10-51-36.png","id":"18734005776350","title":"Screenshot from 2025-09-26 10-51-36","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2021\/11\/l2.png","id":"18734005776343","title":"l2","alt":"","caption":"","itemprop":"image"}]"></div>
<p> </p>
<h2><b>Benefits of Using the Variation Swatches for WooCommerce</b></h2>
<ul>
<li style="font-weight: 400"><span style="font-weight: 400">Displaying product variations in a limited space boosts conversions</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Provides an improved user experience (UX), allowing customers to select their preferred variants easily</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Enhanced user engagement through interactive WooCommerce variation swatches and photos</span></li>
</ul>

Variation Swatches as Radio Buttons

<p><span style="font-weight: 400">Replace the default dropdown with variation swatches for WooCommerce, like buttons, text labels, images, or colors, for a better shopping experience.</span></p>

<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 select 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">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>

Variation Swatches as Radio Buttons vs Product Variations Table