b3digital

B3 Swatches replaces WooCommerce variation dropdowns with fast, modern, and responsive swatches for variable products.
This version includes the feature set: color and button swatches, base layout and sizing controls, tooltip toggles, and per-product overrides.
<h4>Features</h4>
<ul>
<li>Color swatches for attribute terms</li>
<li>Button/label swatches for any attribute</li>
<li>Wrap layout for swatch display</li>
<li>Square swatch shape</li>
<li>Underline selector style</li>
<li>Swatch width and height controls</li>
<li>Internal and external layout padding</li>
<li>Show labels on color swatches</li>
<li>Selected chip color customization</li>
<li>Heading color and size controls</li>
<li>Label font-size control</li>
<li>Global settings UI with a live preview</li>
<li>Basic tooltip support (enable/disable)</li>
<li>Automatic dropdown-to-swatch replacement</li>
<li>Attribute-term swatch configuration (Products > Attributes > Configure terms)</li>
<li>Per-product swatch overrides for shared swatch types</li>
<li>Fallback to native select when JavaScript is unavailable</li>
<li>Optional uninstall cleanup when “Remove on uninstall” is enabled</li>
</ul>
Requirements:
<ul>
<li>WordPress 6.8+</li>
<li>WooCommerce 6.8+</li>
<li>PHP 7.4+</li>
</ul>
<h3>Support</h3>
If you need help, please start by checking the FAQ below.
To request support, use the support channel where you installed the plugin (for example, the WordPress.org support forum or the support channel on the plugin website).
When contacting support, please include:
<ul>
<li>WordPress version</li>
<li>WooCommerce version</li>
<li>Theme name</li>
<li>A short list of other active plugins</li>
<li>Steps to reproduce (and the product URL if possible)</li>
</ul>
Supported:
<ul>
<li>Standard WooCommerce variation forms and templates</li>
<li>Most properly-coded themes that do not replace the variation form markup</li>
<li>Configuration questions (global settings, attribute terms, per-product overrides)</li>
</ul>
Not supported:
<ul>
<li>Custom themes/builders that replace or heavily rewrite the WooCommerce variation form</li>
<li>Debugging issues caused by custom code snippets that modify variation selection behavior</li>
</ul>
<h3>Third Party Services</h3>
This plugin connects to the following external services under certain conditions:
<h4>Freemius SDK</h4>
This plugin uses the Freemius SDK for optional usage analytics. When a site owner opts in during onboarding, limited site and usage data may be sent to Freemius servers.
The plugin also includes <code>assets/freemius-pricing.css</code> and <code>assets/freemius-account.css</code>, which are styling companions for the Freemius SDK pricing/account screens. They are part of the Freemius integration surface and do not add swatch, cart, share, or other plugin feature logic.
<ul>
<li>Freemius homepage: <a href="https://freemius.com" rel="nofollow ugc">https://freemius.com</a></li>
<li>Freemius Terms of Service: <a href="https://freemius.com/terms/" rel="nofollow ugc">https://freemius.com/terms/</a></li>
<li>Freemius Privacy Policy: <a href="https://freemius.com/privacy/" rel="nofollow ugc">https://freemius.com/privacy/</a></li>
</ul>
<h3>Source Code & Build Tools</h3>
This plugin includes pre-built JavaScript and CSS files in the <code>dist/</code> directory. The original source code is included in the <code>src/</code> directory. To build from source:
<ol>
<li>Install Node.js dependencies: <code>npm install</code></li>
<li>Install PHP dependencies: <code>composer install</code></li>
<li>Build for production: <code>npm run build</code></li>
</ol>
The build process uses Vite (<code>vite.config.ts</code>) and TypeScript (<code>tsconfig.json</code>). See <code>package.json</code> for all available scripts.

B3 Swatches

Replace WooCommerce variation dropdowns with modern color and button swatches for variable products.

YayCommerce

Your products deserve options that stand out. 🎨✨
YaySwatches is a powerful WooCommerce variation swatches plugin that transforms boring dropdowns into beautiful color, image, label swatches with various visual effects. Help customers see their choices clearly and pick variations faster. No coding needed.
Customize styles, improve product clarity, and create a smoother shopping experience that converts.
It works seamlessly with WooCommerce, most page builders and block themes.
👋 <a href="https://demo.yaycommerce.com/yayswatches/" rel="nofollow ugc">Quick Demo</a> | <a href="https://demo.yaycommerce.com/try-yayswatches/" rel="nofollow ugc">Admin Demo</a>
YaySwatches brings your WooCommerce product variations to life:
<ul>
<li>Enable color, image, and label swatches </li>
<li>Zoom preview or enlarged image of swatch</li>
<li>Display full color/attribute name on hover</li>
<li>Shows additional info when hovering over a swatch</li>
<li>Customers can select variations directly from the product listing (Pro version)</li>
<li>Greyed-out or crossed swatches for out-of-stock items (Pro version)</li>
<li>Dual-color swatches supported</li>
</ul>
<a href="https://yaycommerce.com/yayswatches-variation-swatches-for-woocommerce/" rel="nofollow ugc">Check out YaySwatches Pro</a> 💎
👋 YaySwatches Works with Popular Page Buiders
<ul>
<li>Gutenberg</li>
<li>Elementor</li>
<li>Kubio Page Builder</li>
<li>SiteOrigin</li>
<li>Beaver Builder</li>
<li>Brizy Builder</li>
<li>Divi</li>
<li>Thrive Architect</li>
<li>Bricks Builder</li>
<li>Oxygen</li>
<li>And many more</li>
</ul>
🚀 Works with Any WooCommerce Themes
<ul>
<li>Brandy</li>
<li>Blocksy</li>
<li>GeneratePress</li>
<li>OceanWP</li>
<li>Storefront</li>
<li>YITH themes</li>
</ul>
🌐 Multi-Language Plugins Supported
<ul>
<li>WPML</li>
<li>Polylang</li>
</ul>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/whunb1CZepg?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<a href="https://docs.yaycommerce.com/yayswatches/getting-started/introduction" rel="nofollow ugc">Documentation</a> | <a href="https://docs.yaycommerce.com/yayswatches/why-upgrade" rel="nofollow ugc">Free vs Pro</a>
<h3>⚡️ FEATURES</h3>
YaySwatches is a feature-packed WooCommerce variation swatches plugin with a modern and simplified user interface.
It combines WooCommerce global attributes and custom product attributes in a single dashboard.
Just visit YaySwatches options and settings, you will see all available product attributes and set the styles you like.
Color Swatches 
Displaying the corresponding product image swatches based on colors.
Automated Variation Image Swatches 
If your products come with different variant images, they will be shown automatically.
Customizable Swatch Bubbles 
Plenty of design options, including swatch shape, size, border, color, spacing, and tooltip.
Customizable Swatch Button 
You can tweak the variation button design to fit your website’s color profiles. Even better, you can display buttons for attributes like size, material, model, etc. right on the shop/category page.
Powerful Attribute Options 
YaySwatches works with pre-existing attributes (free version) and also custom product attributes (premium version only).
Enhanced Shop Page & Catalogs (PRO) 
Shop page, catalogs, and category pages are fully supported in <a href="https://yaycommerce.com/yayswatches-variation-swatches-for-woocommerce/" rel="nofollow ugc">YaySwatches Pro</a> version. You can enable and set a limit to the number of swatch bubbles shown for each product on the shop page. This helps keep your product grid neat and tidy. Once the customer clicks on the rest of the swatch options, they can view the remaining swatches or jump to the product page.
Out-of-stock Variation Visibility (PRO) 
Show or hide those variations that have been sold out on the product page, shop page, and categories page. You can choose a predesigned style for showing/hiding out-of-stock variants to fit your WooCommerce store.
Making Your Products Easy to Find 
The ultimate goal of this plugin is to make browsing your products or services extremely easy!
<h3>QUICK & EASY SETUP</h3>
With YaySwatches – Variation Swatches for WooCommerce plugin, it takes a few minutes to set up all WooCommerce variation swatches.
It provides a more vivid appearance for your product attributes through color swatches, image swatches, automated variant image swatches, buttons, and radio buttons.
As a result, all of the items are displayed so that your customer can quickly get all the available product options you have to offer.
With YaySwatches, the customers can browse and buy your products with engagement!
To further enhance your ecommerce site, you can even <a href="https://yaycommerce.com/how-to-send-woocommerce-custom-emails-per-product/" rel="nofollow ugc">send WooCommerce custom email per product</a>, product variations, or product SKUs.
Find out more: 
🔍 Want to see YayCommerce in action? <a href="https://demo.yaycommerce.com/" rel="nofollow ugc">View all YayCommerce plugin demos</a> and explore the full suite of features.

YaySwatches – Variation Swatches for WooCommerce

Your products deserve options that stand out. 🎨✨

B3 Swatches vs YaySwatches – Variation Swatches for WooCommerce