<p>WooCommerce Hide Variations by User Roles extension enables you to manage the visibility of product variations based on user roles. Instead of keeping B2B variations visible for all, you can choose to only display them to B2B customers and other relevant user roles.</p>
<h2><strong>Features</strong></h2>
<ul>
<li>Hide Variations by User Roles</li>
<li>Completely hide or make variations un-selectable</li>
<li>Works with all popular user-role-editor plugins</li>
</ul>
<h3>Variations visibility options</h3>
<p>You can manage variation visibility for each variation under Product edit sheet > Variations from the backend. You can completely hide the variations based on user roles or keep them visible but un-selectable.</p>
<p><img class="alignnone size-full wp-image-7957559" src="https://woocommerce.com/wp-content/uploads/2021/05/Backend-Variation-selection.jpg" alt="" width="980" height="1320" /></p>
<p><strong>How the variations visibility change would show on the frontend</strong></p>
<p class="jetpack-slideshow-noscript robots-nocontent">This slideshow requires JavaScript.</p><div id="gallery-0-2-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\/05\/Unselectable.jpg","id":"7957560","title":"Unselectable","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2021\/05\/Completely-hidden.jpg","id":"7957561","title":"Completely hidden","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2021\/05\/When-both-variations-are-hidden.jpg","id":"7957562","title":"When both variations are hidden","alt":"","caption":"","itemprop":"image"}]"></div>
<h3>FAQs</h3>
<p><strong>Can we hide the entire product as well?</strong></p>
<p>The extension only hides variations, if you need to hide entire products. Please see our <a href="https://woocommerce.com/products/products-visibility-by-user-roles/">Products Visibility By User Roles</a> extension.</p>
<p><strong>Can we hide the entire attribute? Like, hide XL from all products?</strong></p>
<p>Unfortunately, this is not possible to hide the entire attribute or its variation from all products at once.</p>

Hide Variations by User Roles

<p>Hide individual product variations by user roles.</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>

Hide Variations by User Roles vs Variation Swatches and Photos