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.

oneteamsoftware

<p><strong>Variations Radio Buttons and Swatches</strong> is highly customizable plugin that lets you choose a color and an image for each attribute term, orientation of the options, different positions of the attribute label as well as to display thumbnail and price before or after the option’s name.</p>
<p>You can mix and match different looks of the options for products that have more than one attribute used for variations.</p>
<p>Free version of <strong>Variations Radio Buttons and Swatches</strong> is the most detailed plugin and offers more features than any other alternative.<br />
In addition to global settings it lets you customize every possible setting for the first attribute of the product as well as to define order in which thumbnail, title, stock and price information are displayed, position of the tooltip along with what is displayed in it.<br />
It even lets you display radio buttons / swatches for selected products only.</p>
<h3>Features</h3>
<ul>
<li>Supports products that use several attributes for variations</li>
<li>Radio buttons, swatches or default option selector</li>
<li>Display image, price and/or stock status of a variation</li>
<li>Customize location of an attribute label</li>
<li>Vertical or horizontal orientation of the attribute options</li>
<li>Choose order in which option/term title, thumbnail, price and stock status will be displayed</li>
<li>Display attribute/term description</li>
<li>Display term name or description as a tooltip</li>
<li>Choose location of the tooltip </li>
<li>Configurable border radius</li>
<li>Configurable width and height</li>
<li>Overwrite settings for the first variation attribute of a product</li>
<li>Attach an image to a term that will be displayed in the option selector</li>
<li>Set a color to a term that will be used as swatch background color</li>
<li>WPML compatible – it’s possible to build multilingual sites</li>
</ul>
<h3>PRO Extra Features</h3>
<ul>
<li>Overwrite settings for each attribute</li>
<li>Overwrite settings for all variation attributes of a product</li>
<li>Customize tooltip styling (ex. font, text alignment, background, border, margin, padding, opacity)</li>
<li>Customize attribute label styling (ex. font, text alignment, background, border, margin, padding, opacity)</li>
<li>Customize every possible radio buttons styling</li>
<li>Customize every possible swatches styling</li>
<li>Supports Variable Products within WooCommerce Composite Products</li>
</ul>
<p><a href="https://1teamsoftware.com/product/variations-radio-buttons-for-woocommerce-pro/" rel="nofollow ugc">Variations Radio Buttons and Swatches PRO</a></p>
<h4>Rate us & Review</h4>
<p>If you love our plugins, please give us a full five-star rating, so that we know that our work is valued and appreciated.<br />
This will be the drive and motivation for us to further improve our plugins with more useful features.<br />
We highly appreciate your support and love.</p>
<h4>Need support?</h4>
<p>Please <a href="https://1teamsoftware.com/contact-us" title="1TeamSoftware" rel="nofollow ugc">Contact Us</a> and we will be happy to assist you.</p>
<h3>PREMIUM PLUGINS</h3>
<ul>
<li><a href="https://1teamsoftware.com/product/woocommerce-shipping-labels-for-wcfm-pro/" rel="nofollow ugc">Shipping Labels for WCFM Multivendor Marketplace</a> – Let WCFM Vendors print shipping labels with and without shipping carrier account.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-shipping-labels-for-dokan-pro/" rel="nofollow ugc">Shipping Labels for Dokan Multivendor Marketplace</a> – Let Dokan Vendors print shipping labels with and without shipping carrier account.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-instant-shipping-labels-pro/" rel="nofollow ugc">Instant Shipping Labels Shipping PRO For WooCommerce</a> – Automatically purchase and email shipping labels for vendors and customers.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-fedex-shipping-pro/" rel="nofollow ugc">FedEx Shipping PRO for WooCommerce</a> – FedEx live shipping rates, shipping labels, tracking, emails.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-shipengine-shipping-pro/" rel="nofollow ugc">ShipEngine Shipping PRO For WooCommerce</a> – Access deeply discounted shipping rates, Printing Shipping Labels, Orders Auto-Completion.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-shipstation-shipping-pro/" rel="nofollow ugc">ShipStation Shipping PRO For WooCommerce</a> – Live Shipping Rates, Printing Phipping Labels, Import Tracking Information, Email Notifications, Orders Auto-Completion.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-shippo-shipping-pro/" rel="nofollow ugc">Shippo Shipping PRO For WooCommerce</a> – USPS, Fedex, UPS, DHL – Live Shipping Rates, Shipping Labels, Tracking, Emails.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-shipmondo-shipping-pro/" rel="nofollow ugc">Shipmondo Shipping PRO for WooCommerce</a> – Multi-Carrier shipping solutions for European e-commerce stores.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-easypost-shipping-pro/" rel="nofollow ugc">EasyPost Shipping PRO For WooCommerce</a> – Multi-Carrier Live Shipping Rates, Shipping Labels, Tracking, Emails.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-chitchats-shipping-pro/" rel="nofollow ugc">ChitChats Shipping PRO for WooCommerce</a> – Ship your packages from Canada via USA as if you were physically there.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-shipping-manifests-pro/" rel="nofollow ugc">Shipping Manifests PRO</a>– Groups shipments into batches and prints manifests for them</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-flexible-shipping-per-package-pro/" rel="nofollow ugc">Flexible Shipping Per Package PRO</a> – Table Rate shipping for Shipping Packages with advanced conditions and table rate rules.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-free-shipping-per-package-pro/" rel="nofollow ugc">Free Shipping Per Package PRO</a> – Free Shipping based on advanced conditions.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-marketplace-cart/" rel="nofollow ugc">Marketplace Cart</a> – Offer Amazon like cart/checkout experience for your customers.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-marketplace-cart-pay-for-selected-items/" rel="nofollow ugc">Pay for Selected Items for Marketplace Cart</a> – Allow customers to choose what items to pay for during checkout.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-package-orders/" rel="nofollow ugc">Package Orders</a> – Automatically create separate orders for items shipped from different locations.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-sticky-product-bar-pro/" rel="nofollow ugc">Sticky Product Bar PRO</a> – Adds a number of amazing features to a a highly configurable sticky product bar.</li>
<li><a href="https://1teamsoftware.com/product/variations-radio-buttons-for-woocommerce-pro/" rel="nofollow ugc">Radio Buttons and Swatches PRO</a> – Advanced plugin for displaying radio buttons or swatches instead of dropdown boxes for variation products.</li>
</ul>
<h3>FREE PLUGINS</h3>
<ul>
<li><a href="https://1teamsoftware.com/product/woocommerce-sticky-product-bar/" rel="nofollow ugc">Sticky Product Bar plugin</a> – Display sticky bar with product details, rating and add to cart button.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-shipping-packages/" rel="nofollow ugc">Shipping Packages</a> – Split your cart into packages that can be shipped with different shipping methods.</li>
<li><a href="https://1teamsoftware.com/product/woocommerce-shipping-discount/" rel="nofollow ugc">Shipping Discount</a> – Configurable shipping discount rules based on the amount spent for the items with a given shipping class.</li>
<li><a href="https://wordpress.org/plugins/variations-radio-buttons-for-woocommerce/" rel="ugc">Radio Buttons and Swatches</a> – Display radio buttons and swatches instead of dropdown boxes for variation products.</li>
<li><a href="https://wordpress.org/plugins/wc-easypost-shipping/" rel="ugc">EasyPost Shipping for WooCommerce</a> – Multi-Carrier Live Shipping Rates, Address Validation.</li>
<li><a href="https://wordpress.org/plugins/wc-free-shipping-per-package/" rel="ugc">Free Shipping Per Package</a> – Free Shipping based on advanced conditions.</li>
<li><a href="https://wordpress.org/plugins/wc-shippo-shipping/" rel="ugc">Shippo Shipping for WooCommerce</a> – USPS, Fedex, UPS, DHL – Live Shipping Rates, Address Validation.</li>
<li><a href="https://wordpress.org/plugins/wc-shipmondo-shipping/" rel="ugc">Shipmondo Shipping for WooCommerce</a> – Multi-Carrier Live Shipping Rates for European e-commerce stores.</li>
<li><a href="https://wordpress.org/plugins/wc-chitchats-shipping/" rel="ugc">ChitChats Shipping for WooCommerce</a> – ChitChats live Shipping Rates.</li>
<li><a href="https://wordpress.org/plugins/wc-shipstation-shipping/" rel="ugc">ShipStation Shipping for WooCommerce</a> – Live Shipping Rates from the carriers used in your ShipStation account.</li>
<li><a href="https://wordpress.org/plugins/wc-shipengine-shipping/" rel="ugc">ShipEngine Shipping for WooCommerce</a> – Deeply discounted live shipping rates for USPS, UPS, Fedex…</li>
<li><a href="https://wordpress.org/plugins/wc-fedex-shipping/" rel="ugc">FedEx Shipping for WooCommerce</a> – FedEx Express, SmartPost, Freight live shipping rates and address validation.</li>
</ul>


Radio Buttons and Swatches for WooCommerce

Increase conversions by displaying beautiful radio buttons and swatches instead of inconvenient dropdown boxes for product variations.

B3 Swatches vs Radio Buttons and Swatches for WooCommerce