<p>Instantly group multiple standalone WooCommerce products and display them as variations on each other’s pages. Show variants in <strong>Grid, Carousel, Dropdown, or Popup</strong>. Supports manual grouping, automatic grouping by attributes, color swatches, stock display, product info, custom styling, catalog page variants, and more.</p>
<hr />
<h2><strong>Key Features</strong></h2>
<h3><strong>Group Individual Products as Variants</strong></h3>
<ul>
<li>Link any WooCommerce products to create variant groups</li>
<li>Each group represents “Color”, “Size”, “Design”, etc.</li>
<li>One product can belong to multiple groups</li>
</ul>
<h3><strong>4 Beautiful Variant Display Layouts</strong></h3>
<ol>
<li><strong>Grid Layout</strong> (Simple visual variant cards)</li>
<li><strong>Carousel Layout</strong> (Horizontal scroll with arrows)</li>
<li><strong>Dropdown Layout</strong> (Compact & mobile friendly)</li>
<li><strong>Popup Layout</strong> (Large variant selector modal)</li>
</ol>
<h3><strong>Automatic Variant Generation</strong></h3>
<p>Automatically find products with <strong>matching attributes</strong> and build variant groups without manual mapping.</p>
<h3><strong>Color Swatches / Image Swatches</strong></h3>
<ul>
<li>Show each variant with <strong>color</strong>, <strong>image</strong>, or <strong>default product image</strong></li>
<li>Works even when the variant is a standalone product</li>
</ul>
<h3><strong>Show Variant Data</strong></h3>
<p>Fully configurable:</p>
<ul>
<li>Product name</li>
<li>Price</li>
<li>Stock availability</li>
<li>Description text</li>
<li>Custom label (“Colors”, “Other Variants”, etc.)</li>
</ul>
<h3><strong>Shop & Category Page Variants</strong></h3>
<p>Show variant carousel/grid <strong>below each product thumbnail</strong> on archives.</p>
<h3><strong>Advanced Style Customization</strong></h3>
<ul>
<li>Background colors</li>
<li>Text colors</li>
<li>Active/hover states</li>
<li>Border colors</li>
<li>Custom CSS support</li>
</ul>
<h3><strong>Unlimited Variant Groups Per Product</strong></h3>
<p>Add multiple groups, such as:</p>
<ul>
<li>Colors</li>
<li>Sizes</li>
<li>Compatible Models</li>
<li>Materials</li>
<li>Styles</li>
</ul>
<h3><strong>Shortcodes for Anywhere</strong></h3>
<p>Display variants anywhere with shortcodes:</p>
<div>
<div>
<div>
<div></div>
</div>
</div>
<div dir="ltr"><code>[nxtal_variants product_id="123"]<br />
[nxtal_variant_swatch size="50" shape="circle"]</code></div>
</div>
<hr />
<h2><strong>Perfect For:</strong></h2>
<ul>
<li>WooCommerce stores importing products via <strong>API / CSV / Dropshipping / AliExpress / eBay / Amazon</strong></li>
<li>Stores with multiple similar products sold separately</li>
<li>Affiliate sites where each color/size is a unique URL</li>
<li>Merchants who want an advanced visual variation presentation</li>
</ul>
<h2><strong>Ideal Use Cases</strong></h2>
<ul class="wccom-tick-list-primary">
<li>15 colors of a T-shirt imported individually</li>
<li>Shoes in many sizes imported from external vendors</li>
<li>Electronics with multiple compatible models</li>
<li>Different designs/styles of the same item</li>
<li>Affiliate catalogs where each URL is unique</li>
</ul>
<p> </p>
<h2><strong>Settings Overview</strong></h2>
<p><img src="https://woocommerce.com/wp-content/uploads/2025/12/settings-short.png" alt="" width="896" height="484" /></p>
<p> </p>
<p> </p>
<h2><strong>Product Page Grid View</strong></h2>
<p><img src="https://woocommerce.com/wp-content/uploads/2025/12/grid-front_3b168c.png" alt="" width="896" height="562" /></p>
<p> </p>
<p> </p>
<h2><strong>Product Page </strong><strong>Carousel View</strong></h2>
<p><img src="https://woocommerce.com/wp-content/uploads/2025/12/carousel-front.png" alt="" width="896" height="492" /></p>
<p> </p>
<p> </p>
<h2><strong>Product Page </strong><strong>Dropdown View</strong></h2>
<p><img src="https://woocommerce.com/wp-content/uploads/2025/12/dropdown-front.png" alt="" width="896" height="616" /></p>
<h2><strong>Product Page </strong><strong>Popup View</strong></h2>
<p><img src="https://woocommerce.com/wp-content/uploads/2025/12/popup-front.png" alt="" width="896" height="416" /></p>
<h2><strong>Catalog Page Grid View</strong></h2>
<p><img src="https://woocommerce.com/wp-content/uploads/2025/12/grid-catalog.png" alt="" width="896" height="557" /></p>
<h2><strong>Catalog Page </strong><strong>Carousel View</strong></h2>
<p><img src="https://woocommerce.com/wp-content/uploads/2025/12/carousel-catalog.png" alt="" width="896" height="518" /></p>
<h2><strong>Catalog Page </strong><strong>Dropdown View</strong></h2>
<p><img src="https://woocommerce.com/wp-content/uploads/2025/12/dropdown-catalog.png" alt="" width="896" height="554" /></p>
<h2><strong>Catalog Page </strong><strong>Popup View</strong></h2>
<p><img src="https://woocommerce.com/wp-content/uploads/2025/12/popup-catalog.png" alt="" /></p>

Custom Product Variants

<p>Showcase individual products as variants of each other with swatches, colors, and multiple layout options.</p>

theme funda

<p><strong>Variation Dropdown to Radio Buttons for WooCommerce</strong> converts the standard WooCommerce variation <code><select></code> dropdown into beautiful, clickable radio buttons, switch boxes, or enhanced select controls — making it easier for customers to browse and choose product variations without hunting through a dropdown list.</p>
<p>Customers can see all available options at a glance, compare prices and stock status side-by-side, and select a variation in one click. The result is a faster, more intuitive shopping experience that reduces friction and increases add-to-cart rates.</p>
<blockquote>
<p>⭐ <strong><a href="https://www.codesmade.com/store/variation-dropdown-to-radio-for-woocommerce/" rel="nofollow ugc">Get the Pro Version</a></strong> for advanced layouts, image controls, column grids, and priority support.</p>
</blockquote>
<h4>Why Replace WooCommerce Dropdown Variations?</h4>
<p>The default WooCommerce dropdown hides all your variation options inside a collapsed select box. Shoppers must click, scroll, and read through a plain list — often missing options entirely. Radio buttons surface every variation immediately, letting customers see images, prices, and stock at a glance before they click.</p>
<p>Studies consistently show that visible product options reduce decision friction and increase conversion rates in e-commerce.</p>
<h4>Core Features</h4>
<ul>
<li><strong>Radio Buttons layout</strong> — replaces variation dropdowns with styled radio button cards</li>
<li><strong>Switch Box layout</strong> — modern card-style layout with image, price, and stock</li>
<li><strong>HTML Select layout</strong> — clean, accessible native select element</li>
<li><strong>Select2 layout</strong> — searchable, styled dropdown powered by Select2</li>
<li><strong>Show variation image</strong> — display variation thumbnail inside each option</li>
<li><strong>Show variation price</strong> — surface price differences directly on each button</li>
<li><strong>Show stock availability</strong> — display In Stock / Out of Stock per variation</li>
<li><strong>Show variation description</strong> — include variation description text beneath each option</li>
<li><strong>Show product title</strong> — prepend the parent product name to each variation label</li>
<li><strong>Out-of-stock handling</strong> — disable, strikethrough, or hide unavailable variations</li>
<li><strong>Custom variation name</strong> — override the label per variation from the product edit screen</li>
<li><strong>Lightweight and fast</strong> — scripts and styles load only on single product pages</li>
<li><strong>Zero configuration</strong> — works immediately after activation with sensible defaults</li>
<li><strong>Column grid control</strong> — set exact column counts for desktop and mobile independently</li>
<li><strong>Image position</strong> — place variation image left, above, or below the variation label</li>
<li><strong>Button style options</strong> — card, minimal, outlined, and more</li>
<li><strong>Priority email support</strong> — direct access to the development team</li>
<li><strong>Early access</strong> — first access to new layouts and features</li>
</ul>
<p><a href="https://www.codesmade.com/store/variation-dropdown-to-radio-for-woocommerce/" rel="nofollow ugc">Upgrade to Pro <span aria-hidden="true" class="wp-exclude-emoji">→</span></a></p>
<h4>Documentation & Support</h4>
<p>Full setup guide, screenshots, and developer hooks are available in the <a href="https://www.codesmade.com/variation-dropdown-to-radio-for-woocommerce-documentation/" rel="nofollow ugc">plugin documentation</a>.</p>
<p>For questions, bugs, or feature requests, visit the <a href="https://www.codesmade.com/contact-us/" rel="nofollow ugc">support page</a> or open a thread in the WordPress.org support forum.</p>
<h4>Works With</h4>
<ul>
<li>WooCommerce 5.0 and above</li>
<li>Simple variable products with any number of attributes</li>
<li>All major WooCommerce-compatible themes (Storefront, Flatsome, Astra, Divi, OceanWP, and more)</li>
<li>Page builders: Elementor, WPBakery, Beaver Builder, Gutenberg</li>
</ul>


Variation Dropdown to Radio Buttons for WooCommerce

Replace the default WooCommerce variation dropdown with radio buttons, switch boxes, or a styled Select2 — boosting conversions and user experience on …

Custom Product Variants vs Variation Dropdown to Radio Buttons for WooCommerce