Digital Web Tutor

<p>Swatchify is a minimal, lightweight, and fast plugin that converts standard WooCommerce variation dropdowns into beautiful and user-friendly text swatches. This enhances the user experience of your WooCommerce store, allowing customers to easily select product variations.</p>
<p>Features:<br />
* Converts variation dropdowns to clickable text swatches.<br />
* Works seamlessly with standard WooCommerce products.<br />
* Minimalist and lightweight coding for optimal performance.<br />
* Choose between Square, Rounded, or Circle swatches via a simple settings panel.</p>
<h3>How to Use</h3>
<p>Using Swatchify is completely automatic. It applies to your existing WooCommerce variable products out of the box:</p>
<ol>
<li>Create a Variable Product in WooCommerce (Products -> Add New -> Product Data: Variable product).</li>
<li>Under the “Attributes” tab, add your attributes (e.g., Size, Color) and make sure “Used for variations” is checked.</li>
<li>Under the “Variations” tab, generate your variations and assign prices to them.</li>
<li>Publish the product and view it on the front end. The native WooCommerce dropdowns will automatically be converted to beautifully styled, clickable swatches!</li>
<li>To change the shape of the swatches, navigate to <strong>Settings -> Swatchify Settings</strong> in your WordPress dashboard and choose between Square, Rounded, or Circle shapes.</li>
</ol>


Swatchify – Variation Swatches for WooCommerce

A minimal and lightweight plugin to convert WooCommerce variation dropdowns into beautiful text swatches.

b3digital

<p>B3 Swatches replaces WooCommerce variation dropdowns with fast, modern, and responsive swatches for variable products.</p>
<p>This version includes the feature set: color and button swatches, base layout and sizing controls, tooltip toggles, and per-product overrides.</p>
<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>
<p>Requirements:</p>
<ul>
<li>WordPress 6.8+</li>
<li>WooCommerce 6.8+</li>
<li>PHP 7.4+</li>
</ul>
<h3>Support</h3>
<p>If you need help, please start by checking the FAQ below.</p>
<p>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).</p>
<p>When contacting support, please include:</p>
<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>
<p>Supported:</p>
<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>
<p>Not supported:</p>
<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>
<p>This plugin connects to the following external services under certain conditions:</p>
<h4>Freemius SDK</h4>
<p>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.</p>
<p>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.</p>
<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>
<p>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:</p>
<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>
<p>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.</p>


B3 Swatches

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

Swatchify – Variation Swatches for WooCommerce vs B3 Swatches