Mehbub Rashid

Brian Harris

minhnguyen25

Woosuite

Variation Swatches

Variation Swatches for WooCommerce plugin provides a much nicer way to display variations of variable products. This plugin will help you select style for each attribute as color, image or label. With this plugin, you can present product colors, sizes, styles and many things in a better way which is not supported by WooCommerce. 
This plugin only adds more options to show product variations with swatches. It doesn’t touch the default drop-down style of WooCommerce.
With a friendly and easy-to-use interface, you can add default color, image or label to each attribute in the attributes management page. It can also helps you pick the right style for quick-add attribute right inside the editing product page.
<iframe loading="lazy" title="How to Setup Variation Swatches for WooCommerce Free (Color, Image & Button Swatches)" width="750" height="422" src="https://www.youtube.com/embed/1qGusf9IfFY?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Woosuite Variation Swatches for WooCommerce Features :
<ul>
<li><a href="https://aovup.com/plugins/woocommerce-variation-swatches/#button" rel="friend nofollow ugc">Auto Convert All Variation Dropdowns To Button Swatch</a> – With a click of a button you can convert your dropdowns into button/label.</li>
<li><a href="https://aovup.com/plugins/woocommerce-variation-swatches/#autoimage" rel="friend nofollow ugc">Auto Convert Into Image Swatches*</a> – By toggling this option you can set dual color for those products that can not be described with one color.</li>
<li><a href="https://aovup.com/plugins/woocommerce-variation-swatches/#dualcolor" rel="friend nofollow ugc">Dual Color Variation Swatches*</a> – Automatically covert dropdowns to “Image Swatch” if variation has an image.</li>
<li><a href="https://aovup.com/plugins/woocommerce-variation-swatches/#archive" rel="friend nofollow ugc">Show swatches on archive / shop</a> – Let users find what they really want by showing your swatches on the shop archive.</li>
<li><a href="https://aovup.com/plugins/woocommerce-variation-swatches/#shapes" rel="friend nofollow ugc">Attribute Variation Swatches Shapes</a> – We have included three presets for you to choose from as well as advanced styling options to further customize your swatches.</li>
<li><a href="https://aovup.com/plugins/woocommerce-variation-swatches/#outofstock" rel="friend nofollow ugc">Out of Stock Variation Swatches Control</a> – With our recent update, we have included the option for you to manage how to handle your out-of-stock variation.</li>
<li>Completely integrate with WooCommerce plugin</li>
<li>Work on variable product only</li>
<li>Create attribute color swatches</li>
<li>Create attribute image swatches</li>
<li>Create attribute label/text swatches</li>
<li>Manage attribute globally</li>
<li>Create new attribute swatch in product editing page</li>
</ul>
<h4>What’s Next</h4>
If you like this Variation swatches plugin, then consider checking out our <a href="https://wpclient.com/" rel="nofollow ugc">other projects</a>:
<ul>
<li><a href="https://aovup.com/plugins/woocommerce-additional-variation-images/" title="Additional variation images for WooCommerce" rel="friend nofollow ugc">Additional variation images for WooCommerce</a> – Show additional variation images and videos to showcase your product key highlights.</li>
<li><a href="https://aovup.com/plugins/woocommerce-show-variations-on-shop-page/" rel="nofollow ugc">Show Variations on Shop Page</a> – Show your variation products on your shop page separately to increase your catalog size and the user experience.</li>
<li><a href="https://aovup.com/plugins/dynamic-pricing-discount-rules/" title="Dynamic Pricing & Discount Rules for WooCommerce" rel="friend nofollow ugc">Dynamic Pricing & Discount Rules for WooCommerce</a> – Create Buy one get one free offers, schedule promotions, tiered pricing, role base pricing, and much more.</li>
<li><a href="https://aovup.com/plugins/min-max-quantities/" title="Minimum/Maximum Quantity for WooCommerce" rel="friend nofollow ugc">Minimum/Maximum Quantity for WooCommerce</a> – Create quantity increments, spending rules, and as the name suggests minimum and maximum quantity for woocommerce.</li>
<li><a href="https://aovup.com/plugins/woocommerce-product-bundles/" rel="nofollow ugc">Product Bundles for WooCommerce</a> – Improve your average order value by creating irresistible product bundles.</li>
<li><a href="https://aovup.com/plugins/wholesale/" rel="nofollow ugc">Wholesale Suite for Woocommerce</a> – Maximize your store revenue by catering to wholesale customers, you can sell to B2B + B2C.</li>
<li><a href="https://aovup.com/plugins/product-table/" rel="nofollow ugc">Quick Order Form for WooCommerce</a> – Create a streamlined bulk order form to reduce friction in users checking out.</li>
<li><a href="https://aovup.com/plugins/woocommerce-quick-view/" rel="nofollow ugc">Product Quick View for WooCommerce</a> – Allows users to get a quick look at products without opening the product page.</li>
<li><a href="https://aovup.com/plugins/restriction-rules/" rel="nofollow ugc">Restriction Rules for WooCommerce</a> – Set your store to private mode, password protection, menu item restriction, hide products, and more.</li>
<li><a href="https://aovup.com/plugins/sales-agent-reps/" rel="nofollow ugc">Sales Agents for WooCommerce</a> – Grow your business by adding sale agents to your WooCommerce store.</li>
</ul>
Visit <a href="https://aovup.com/blog/" rel="friend nofollow ugc">the AOVUP blog</a> to learn from our <a href="https://aovup.com/woocommerce/" title="WooCommerce Tutorials" rel="friend nofollow ugc">WordPress Tutorials</a> and find out about other <a href="https://aovup.com/plugins/" title="Best WordPress Plugins" rel="friend nofollow ugc">WooCommerce plugins</a>.

Variation Swatches for WooCommerce

Creates variation swatches for WooCommerce, converts your variation dropdown into color, label, or photo swatches with ease, The original Variation Sw …

VillaTheme

Andy Ha

Product Variations Swatches for WooCommerce is a professional plugin that allows you to show and select attributes for variation products. The plugin displays variation select options of the products under colors, buttons, images, variation images, radio so it helps the customers observe the products they need more visually, save time to find the wanted products than dropdown type for variations of a variable product.
<blockquote>
<a href="https://new2new.com/?item=woo-product-variations-swatches" title="Demo WooCommerce Product Variations Swatches" rel="nofollow ugc">Try the Demo</a> |<a href="https://docs.villatheme.com/?item=woo-product-variations-swatches" title="Documents" rel="nofollow ugc">Documents</a> |<a href="https://1.envato.market/bd0ek" title="Pro Version" rel="nofollow ugc">Pro Version</a> | <a href="https://www.facebook.com/groups/villatheme" title="VillaTheme" rel="nofollow ugc">Facebook group</a>
</blockquote>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/m53mVhVOd5M?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>
<h3>Important Notice:</h3>
<ul>
<li>
Plugin works based on WooCommerce 7.x or higher, PHP 7.0+
</li>
<li>
It is released on WordPress.org and you can use plugin as free to build themes for sale.
</li>
</ul>
<h3>FEATURES</h3>
► Converting any variations dropdown type into swatches with a couple of clicks: 
When you activate WooCommerce Product Variations Swatches plugin, the variation products in the dropdown type will be converted into the variation swatches.
► Customizing the global attributes and custom attributes in the plugin setting: 
This plugin allows you to customize quickly all existing global attributes in WooCommerce through the swatches setting of this plugin.
<ul>
<li>
Search attribute: You can use the search bar to search for an existing global attribute
</li>
<li>
Display Style: You can set to display global attributes in 2 styles: Horizontal or vertical
</li>
<li>
Display Type: You can set to display global attributes in 5 types: Button, Color, Image, Variation Image, Radio
</li>
<li>
Swatches profile: You can select to show one of the available swatches profile
</li>
<li>
Edit terms of the global attributes: You can customize each attribute term of an existing global attribute
</li>
</ul>
► Swatches profiles: 
WooCommerce Product Variations Swatches plugin allows you to design and style for swatches profiles.
<ul>
<li>
Customizing a swatches profile: You can customize to display a default swatch design pattern: Name, Padding, Height, Width, Font size, the size on mobile mode, on the product list, Color, Box-shadow effect
</li>
<li>
Styling Hover status: You can customize the hover status including Color, Background, Border, Box-shadow effect, Reduce size
</li>
<li>
Styling Selected status: You can customize the display status when a variation swatch is selected. The customization includes Color, Background, Border, Box-shadow effect, Reduce size
</li>
<li>
Customizing Tooltip: You can customize the tooltip status when a variation swatch is selected. including Color, Border, Font size and Positions of the tooltip
</li>
</ul>
► Works on mobile: WooCommerce product variations swatches work perfectly on mobile devices
► Easy to use: Friendly interface and easy to use
<h3>PRO VERSION:</h3>
► All features from free version
► Unlimited Swatches profiles: You also can duplicate the current swatches profile to generate rapidly many swatch design patterns
► Show the particular attributes on product list: this allows you to show/hide a particular attribute on the product list
► Change product image: No matter type of swatches is, you can set image for each attribute term and make product image change accordingly when customer selects that attribute term
► Disable out-of-stock variation items: Out-of-stock attribute combination can be automatically detected and displayed as blur or crossed-out, clickable or not or even hidden
► Tooltip content: You can modify tooltip content and even use attribute/variation image in tooltip
► Installing easily to display custom attributes of the variation products on the front end: 
You can easily install to display custom attributes of the variations products on the front end by the custom attribute option.
<ul>
<li>
Custom attribute name: You can enter the name of the existing attributes, then customize them rapidly
</li>
<li>
Assign category: Choose in which categories customizing the attribute be applied
</li>
<li>
Display Style: You can select to display custom attributes in 2 styles: Horizontal or vertical
</li>
<li>
Display Type: You can select to display custom attributes in 5 types: Button, Color, Image, Variation Image, Radio
</li>
<li>
Swatches profile: Selecting to show custom attributes in one of the available swatches profile
</li>
<li>
Show on product list: This allows you to show/hide a particular custom attribute on the product list
</li>
</ul>
► Display product variations swatches in the product list and assigned pages: 
You can manage to show/hide the product variations swatches through some options in the display on the product list tab
<ul>
<li>
Show Add to cart button: You can enable to show the Add to cart button and it will show up after selecting attributes
</li>
<li>
Show attribute name: You can select to show/hide the attribute name of variation swatches
</li>
<li>
Position: You can customize the positions of the variation swatch on the shop page, category page, and the products list
</li>
<li>
Text tooltip: This allows you to show or hide the variation text tooltip on the products list
</li>
<li>
Maximum attribute item: You can manage the number of the attribute items shown on the swatches
</li>
</ul>
► Multilingual support: 
If you use WPML to translate attributes, you only need configure attribute image in the primary language. Attribute image of translated attributes are inherited from original attribute.
<h3>Documentation</h3>
<ul>
<li><a href="https://docs.villatheme.com/?item=woo-product-variations-swatches" rel="nofollow ugc">Getting Started</a></li>
</ul>
<h3>Plugin Links</h3>
<ul>
<li><a href="https://villatheme.com/extensions/woocommerce-product-variations-swatches/" rel="nofollow ugc">Project Page</a></li>
<li><a href="https://docs.villatheme.com/?item=woo-product-variations-swatches" rel="nofollow ugc">Documentation</a></li>
<li><a href="https://villatheme.com/knowledge-base/security-is-our-priority/" rel="nofollow ugc">Report Bugs/Issues</a></li>
</ul>
<h3>MAY BE YOU NEED</h3>
<a href="https://wordpress.org/plugins/9mail-wp-email-templates-designer/" rel="ugc">9MAIL – WordPress Email Templates Designer</a>
<a href="https://wordpress.org/plugins/9map-map-multi-locations/" rel="ugc">9Map – Map Multi Locations</a>
<a href="https://wordpress.org/plugins/woo-abandoned-cart-recovery/" rel="ugc">Abandoned Cart Recovery for WooCommerce</a>
<a href="https://wordpress.org/plugins/woo-advanced-product-information/" rel="ugc">Advanced Product Information for WooCommerce</a>
<a href="https://wordpress.org/plugins/affi-affiliate-marketing-for-woo/" rel="ugc">AFFI – Affiliate Marketing for WooCommerce</a>
<a href="https://wordpress.org/plugins/woo-alidropship/" rel="ugc">ALD – Dropshipping and Fulfillment for AliExpress and WooCommerce</a>
<a href="https://wordpress.org/plugins/woo-boost-sales/" rel="ugc">Boost Sales for WooCommerce – Set up Up-Sells & Cross-Sells Popups & Auto Apply Coupon</a>
<a href="https://wordpress.org/plugins/bopo-woo-product-bundle-builder/" rel="ugc">Bopo – WooCommerce Product Bundle Builder</a>
<a href="https://wordpress.org/plugins/bulky-bulk-edit-products-for-woo/" rel="ugc">Bulky – Bulk Edit Products for WooCommerce</a>
<a href="https://wordpress.org/plugins/woo-cart-all-in-one/" rel="ugc">Cart All In One For WooCommerce</a>
<a href="https://wordpress.org/plugins/catna-woo-name-your-price-and-offers/" rel="ugc">Catna – Woo Name Your Price and Offers</a>
<a href="https://wordpress.org/plugins/checkout-upsell-funnel-for-woo/" rel="ugc">Checkout Upsell Funnel for WooCommerce</a>
<a href="https://wordpress.org/plugins/chinads-dropshipping-taobao-woocommerce/" rel="ugc">ChinaDS – Tmall-Taobao Dropshipping for WooCommerce</a>
<a href="https://wordpress.org/plugins/clear-autoptimize-cache-automatically/" rel="ugc">Clear Autoptimize Cache Automatically</a>
<a href="https://wordpress.org/plugins/compe-woo-compare-products/" rel="ugc">COMPE – WooCommerce Compare Products</a>
<a href="https://wordpress.org/plugins/woo-coupon-reminder/" rel="ugc">Coreem – Coupon Reminder for WooCommerce</a>
<a href="https://wordpress.org/plugins/woo-coupon-box/" rel="ugc">Coupon Box for WooCommerce</a>
<a href="https://wordpress.org/plugins/woo-multi-currency/" rel="ugc">CURCY – Multi Currency for WooCommerce – The best free currency exchange plugin – Run smoothly on WooCommerce 9.x</a>
<a href="https://wordpress.org/plugins/woo-customer-coupons/" rel="ugc">Customer Coupons for WooCommerce</a>
<a href="https://wordpress.org/plugins/depart-deposit-and-part-payment-for-woo/" rel="ugc">DEPART – Deposit and Part payment for Woo</a>
<a href="https://wordpress.org/plugins/email-template-customizer-for-woo/" rel="ugc">Email Template Customizer for WooCommerce</a>
<a href="https://wordpress.org/plugins/epoi-wp-points-and-rewards/" rel="ugc">EPOI – WP Points and Rewards</a>
<a href="https://wordpress.org/plugins/epow-custom-product-options-for-woocommerce/" rel="ugc">EPOW – Custom Product Options for WooCommerce</a>
<a href="https://wordpress.org/plugins/eu-cookies-bar/" rel="ugc">EU Cookies Bar for WordPress</a>
<a href="https://wordpress.org/plugins/exmage-wp-image-links/" rel="ugc">EXMAGE – WordPress Image Links</a>
<a href="https://wordpress.org/plugins/woo-virtual-reviews/" rel="ugc">Faview – Virtual Reviews for WooCommerce</a>
<a href="https://wordpress.org/plugins/fewc-extra-checkout-fields-for-woocommerce/" rel="ugc">FEWC – Extra Checkout Fields For WooCommerce</a>
<a href="https://wordpress.org/plugins/woo-free-shipping-bar/" rel="ugc">Free Shipping Bar for WooCommerce</a>
<a href="https://wordpress.org/plugins/gift4u-gift-cards-all-in-one-for-woo/" rel="ugc">GIFT4U – Gift Cards All in One for Woo</a>
<a href="https://wordpress.org/plugins/handmade-dropshipping-for-etsy-and-woo/" rel="ugc">HANDMADE – Dropshipping for Etsy and WooCommerce</a>
<a href="https://wordpress.org/plugins/happy-helpdesk-support-ticket-system/" rel="ugc">HAPPY – Helpdesk Support Ticket System</a>
<a href="https://wordpress.org/plugins/jagif-woo-free-gift/" rel="ugc">Jagif – WooCommerce Free Gift</a>
<a href="https://wordpress.org/plugins/woo-lookbook/" rel="ugc">LookBook for WooCommerce – Shoppable with Product Tags</a>
<a href="https://wordpress.org/plugins/woo-lucky-wheel/" rel="ugc">Lucky Wheel for WooCommerce – Spin a Sale</a>
<a href="https://wordpress.org/plugins/woo-notification/" rel="ugc">Notification for WooCommerce | Boost Your Sales – Recent Sales Popup – Live Feed Sales – Upsells</a>
<a href="https://wordpress.org/plugins/woo-orders-tracking/" rel="ugc">Orders Tracking for WooCommerce</a>
<a href="https://wordpress.org/plugins/woo-photo-reviews/" rel="ugc">Photo Reviews for WooCommerce</a>
<a href="https://wordpress.org/plugins/pofily-woo-product-filters/" rel="ugc">Pofily – WooCommerce Product Filters</a>
<a href="https://wordpress.org/plugins/woo-product-builder/" rel="ugc">Product Builder for WooCommerce – Custom PC Builder</a>
<a href="https://wordpress.org/plugins/product-pre-orders-for-woo/" rel="ugc">Product Pre-Orders for WooCommerce</a>
<a href="https://wordpress.org/plugins/product-size-chart-for-woo/" rel="ugc">Product Size Chart For WooCommerce</a>
<a href="https://wordpress.org/plugins/redis-woo-dynamic-pricing-and-discounts/" rel="ugc">REDIS – WooCommerce Dynamic Pricing and Discounts</a>
<a href="https://wordpress.org/plugins/rees-real-estate-for-woo/" rel="ugc">REES – Real Estate for Woo</a>
<a href="https://wordpress.org/plugins/import-shopify-to-woocommerce/" rel="ugc">S2W – Import Shopify to WooCommerce</a>
<a href="https://wordpress.org/plugins/sales-countdown-timer/" rel="ugc">Sales Countdown Timer</a>
<a href="https://wordpress.org/plugins/subre-product-subscription-for-woo/" rel="ugc">SUBRE – Product Subscription for WooCommerce – Recurring Payments</a>
<a href="https://wordpress.org/plugins/woo-suggestion-engine/" rel="ugc">Suggestion Engine for WooCommerce</a>
<a href="https://wordpress.org/plugins/woo-thank-you-page-customizer/" rel="ugc">Thank You Page Customizer for WooCommerce – Increase Your Sales</a>
<a href="https://wordpress.org/plugins/tmds-dropshipping-for-temu-and-woo/" rel="ugc">TMDS – Dropshipping for TEMU and Woo</a>
<a href="https://wordpress.org/plugins/vargal-additional-variation-gallery-for-woo/" rel="ugc">VARGAL – Additional Variation Gallery for Woo</a>
<a href="https://wordpress.org/plugins/w2s-migrate-woo-to-shopify/" rel="ugc">W2S – Migrate WooCommerce to Shopify</a>
<a href="https://wordpress.org/plugins/webpos-point-of-sale-for-woocommerce/" rel="ugc">WebPOS – Point of Sale for WooCommerce</a>
<a href="https://wordpress.org/plugins/wp-lucky-wheel/" rel="ugc">WordPress Lucky Wheel – Spin a Sale</a>
<a href="https://wordpress.org/plugins/wpbulky-wp-bulk-edit-post-types/" rel="ugc">WPBulky – WordPress Bulk Edit Post Types</a>

Product Variations Swatches for WooCommerce

Showcase variations and impress your customers with beautiful swatches such as color, button, image, and more.

Variation Swatches for WooCommerce vs Product Variations Swatches for WooCommerce