<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>The Products by Attributes & Variations plugin gives you two ways to showing variations on listing pages: 1) displaying product variations as simple products, or 2) displaying product attributes on listing pages. Improve your user experience by allowing customers to find relevant variations from shop pages and add products to their cart without having to visit the product detail page.</p>
<p><img class="aligncenter wp-image-18734005635358 size-full" src="https://addify.store/adv-banners/addify-store.gif" alt="" width="900" height="141" /></p>
<h2>1.  Show variations as single products:</h2>
<p>This feature empowers you to show variations as simple products on shop, category, and other listing pages. Customers can find relevant product variations from listing pages and add products directly to their cart, and the variations are compatible with product filters and search. This makes your catalog look bigger and improves the user experience.</p>
<p><img class="alignnone size-full" src="https://woocommerce.com/wp-content/uploads/2019/10/WooCommerce-Show-Single-Variations-.png" width="958" height="1178" /></p>
<h3>Key settings</h3>
<ul>
<li>Display variations of all or specific items as simple products</li>
<li>Exclude any variations from showing as simple product</li>
<li>Option to hide the main product from listing pages</li>
</ul>
<p><img class="alignnone size-full wp-image-5822577" src="https://woocommerce.com/wp-content/uploads/2019/10/WooCommerce-Show-Single-Variations-Setting-page.png" alt="" width="925" height="898" /></p>
<p><strong>Exclude specific variation & customize sorting order</strong></p>
<p>From <strong>Product Edit > Variations</strong>, you can exclude individual variations from displaying them as simple products on listing pages. You can also give a custom menu sorting order for each variation.</p>
<p><img class="alignnone size-full wp-image-5710915" src="https://woocommerce.com/wp-content/uploads/2019/10/Variations-Settings-2.png" alt="" width="958" height="1212" /></p>
<p><strong>Exclude entire attribute:</strong></p>
<p>You can exclude any attribute and display products by only one attribute. For example, if you have color and size as attributes, you can exclude size and display products by color only. You can exclude this from the product edit sheet on the backend.</p>
<p><img class="alignnone size-full wp-image-7957711" src="https://woocommerce.com/wp-content/uploads/2019/10/Exclude-Attribute.png" alt="" width="960" height="512" /></p>
<hr />
<h2>2.  Display attribute selections on listing pages</h2>
<p>This lets you add product attributes to listing pages so customers can select their desired variations and add products to their carts from a listing page. This makes shopping easier — customers will no longer need to visit individual product pages to make selections.</p>
<p>The attributes are displayed in the same format as on the product detail page. For example, if you are using color swatches or a third party plugin to show size options in a dropdown menu and are showing color options with checkboxes, the same dropdown and checkboxes will be displayed on listing pages</p>
<p>You can also utilize the toggle mode option to keep your products listing compact. Customers can click on the show/hide button to see the variations.</p>
<p><img class="alignnone size-full wp-image-5710916" src="https://woocommerce.com/wp-content/uploads/2019/10/Variations-Dropdown-2.png" alt="" width="980" height="1168" /></p>
<h3>Key settings</h3>
<ul>
<li>Display attributes of all or selected products</li>
<li>Option to display quantity box</li>
<li>Toggle mode option to keep the listings compact</li>
</ul>
<p><img class="alignnone size-full wp-image-5000645" src="https://woocommerce.com/wp-content/uploads/2019/10/woocommerce-Show-variations-on-shop-page-.jpg" alt="woocommerce Show variations on shop page" width="954" height="939" /></p>
<h3>FAQs:</h3>
<p><strong>Can I use both features at the time?</strong></p>
<p>Yes, you can convert your variations into products, and at the same time show attribute selections under the parent product.</p>
<p><strong>Can I change variation product titles?</strong></p>
<p>Yes, you can customize the title for each product by variation.</p>
<p><strong>Is it compatible with product filter and layered navigation?</strong></p>
<p>Yes, both features are 100% compatible with default sortings, product filters, and layered navigation.</p>
<p> </p>

Products By Attributes & Variations

<p>This plugin enables you to 1) display product attributes on listing pages for easy selection and 2) display variations as simple products.</p>

Custom Product Variants vs Products By Attributes & Variations