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

<p><span style="font-weight: 400">Product addons for WooCommerce enable you to add unlimited extra product options by using 19 types of fields such as text field, drop-down, check-boxes, multiple select, color swatches, etc.</span></p>
<p><span style="font-weight: 400">Set individual pricing for each field or offer them for free based on your needs. You can create individual options or multiple sets of product fields and assign them to different products and categories.</span></p>
<h2><b>Features:</b></h2>
<ul>
<li style="font-weight: 400">Add unlimited product options and add-ons.</li>
<li style="font-weight: 400"><span style="font-weight: 400">19 Types of product fields.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Create multiple rules for products or categories.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">show or hide fields based on customer choices with conditional logic.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Display the addon price with the product or separately.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Flexible pricing options</span>
<ul>
<li style="font-weight: 400"><span style="font-weight: 400">Free (leave the price field empty)</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Fixed Price</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Percentage price</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Fixed and Percentage price based on quantity</span></li>
</ul>
</li>
<li style="font-weight: 400"><span style="font-weight: 400">Add color and image radio buttons (swatches).</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Set the sorting order of the fields and of the whole rule.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Hide or display custom product fields for specific user roles.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Preselect default options for checkboxes and radio buttons.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Display and manage the stock of the addon.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Add a tooltip for each option</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Hide or Display custom fields in cart and checkout pages.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Hide or Display fields in the order details page.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Easily manage rules from the backend.</span></li>
</ul>
<h3><b>Add Extra Product Options</b></h3>
<p><span style="font-weight: 400">Create extra product options that let customers enhance their purchases with product addons for WooCommerce. Choose from multiple field types and set conditions to control how options appear, making product customization simple and intuitive.</span></p>
<p><img class="size-medium wp-image-18734006340674 aligncenter" src="https://woocommerce.com/wp-content/uploads/2026/02/Add-Extra-Product-Options.png?w=885" alt="Add Extra Product Options" width="885" height="1300" /></p>
<h3><b>Create Extra Product Options with 19 Field Types</b></h3>
<p><span style="font-weight: 400">Add a wide range of fields to customize your products and enhance the customer experience with Product Addons and Extra Options. Choose from 19 field types.</span></p>
<ul>
<li style="font-weight: 400"><span style="font-weight: 400">Text Field</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Text Area</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Font Style</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Number</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Heading</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">URL</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Separator</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">File</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Dropdown</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Image Radio Button</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Radio Button</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Checkbox</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Multiple Select</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Date</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Time</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Color Picker</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Color Button (Swatches)</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Google Fonts</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Range Picker</span></li>
</ul>
<h3><b>Add Conditional Fields for Product Options</b></h3>
<p><span style="font-weight: 400">Show or hide product options based on customer selections or other conditions. You can apply the conditions on the cross rule as well.</span></p>
<p><img class="size-medium wp-image-18734006340677 aligncenter" src="https://woocommerce.com/wp-content/uploads/2026/02/Add-Conditional-Fields-for-Product-Options.png?w=896" alt="Add Conditional Fields for Product Options" width="896" height="585" /></p>
<h3><b>Flexible Pricing Options for Addons</b></h3>
<p><span style="font-weight: 400">Easily set prices for your product addons to match your store’s needs. Offer them for free, charge a fixed or percentage fee, apply fees based on quantity, or multiply the addon price by the product quantity in the cart for accurate pricing.</span></p>
<ul>
<li style="font-weight: 400"><span style="font-weight: 400">Free (leave the field empty)</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Fixed Price</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Percentage Price</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Fixed and Percentage price based on quantity</span></li>
</ul>
<p><img class="size-medium wp-image-18734006340678 aligncenter" src="https://woocommerce.com/wp-content/uploads/2026/02/Flexible-Pricing-Options-for-Addons.png?w=896" alt="Flexible Pricing Options for Addons" width="896" height="210" /></p>
<h3><b>Enable Price Per Character for Text</b></h3>
<p><span style="font-weight: 400">Extra product options for WooCommerce let you charge per character for personalized customizations. Set prices for adding names, initials, or phrases on products like cups, t-shirts, caps, and cards using printing, embossing, or engraving, and define a character limit for each customization.</span></p>
<p><img class="size-medium wp-image-18734006340682 aligncenter" src="https://woocommerce.com/wp-content/uploads/2026/02/Enable-Price-Per-Character-for-Text.png?w=896" alt="Enable Price Per Character for Text" width="896" height="385" /></p>
<h3><b>Manage Stock for Product Options</b></h3>
<p><span style="font-weight: 400">Control of your addon inventory and ensure accurate stock tracking. It lets you manage the availability of product addons, so customers can only select options that are in stock.</span></p>
<p><img class="size-medium wp-image-18734006340685 aligncenter" src="https://woocommerce.com/wp-content/uploads/2026/02/Manage-Stock-for-Product-Options.png?w=896" alt="Manage Stock for Product Options" width="896" height="450" /></p>
<h3><b>Assign Fields to Product or Categories</b></h3>
<p><span style="font-weight: 400">Assign extra product options to specific products or entire categories. This saves time by letting you set one rule and apply it to multiple products or categories at once.</span></p>
<p><img class="size-medium wp-image-18734006340686 aligncenter" src="https://woocommerce.com/wp-content/uploads/2026/02/Assign-Fields-to-Product-or-Categories.png?w=896" alt="Assign Fields to Product or Categories" width="896" height="218" /></p>
<h3><b>Show or Hide Product Options by User Role</b></h3>
<p><span style="font-weight: 400">Product addons for WooCommerce allow you to hide or display product options based on user roles. Make options visible to specific users, all registered users, or guests, giving you full control over who can access each feature.</span></p>
<p><img class="size-medium wp-image-18734006340689 aligncenter" src="https://woocommerce.com/wp-content/uploads/2026/02/Show-or-Hide-Product-Options-by-User-Role.png?w=896" alt="Show or Hide Product Options by User Role" width="896" height="363" /></p>

Product Addons and Extra Options

<p><span style="font-weight: 400">Personalize your products with product addons and extra options using 19 field types for free or paid. Set up conditional logic to automatically show or hide options based on what your customers select.</span></p>

Custom Product Variants vs Product Addons and Extra Options