There are several WordPress plugins for WooCommerce to Improve WooCommerce Product Variations feature with Swatches, Colors and Photos. All the plugins which listed here will allow you to replace standard WooCommerce selects with icons, custom images, and dynamic labels.
What is a variable product?
A variable product is a standard product type in WooCommerce. A variable product has multiple attributes and the customer select one from each attribute. For example, a shoe has size and color attributes – the customer can select these parameters.
Why We need to Improve WooCommerce Product Variations feature?
I chose WooCommerce because it had variable pricing and working with WordPress very well. I experienced with WordPress for several years ago then I don’t want to start again with a new platform. That feature allows you to create specific products that have several variations, for example, sizes, colors, materials and more… So WooCommerce is the best choice to start a small shop.
Variable Products in WooCommerce allows you to add variations to a single product such as color, size, price, images or any other specific feature your product might have. This includes setting up attributes, terms, and variations. By default, WooCommerce display product variation (options) as a drop-down list. It’s simple but looks ugly and your customers haven’t complete overview about their interested products.
Using color and image swatches provides a much nicer way to display the available colors of a product, available styles, available sizes, or pretty much anything else that you can display using an image or color.
So let’s just start today’s round up of showing you 10 plugins that hopefully has something that will push your WooCommerce store up and running better than before!
Table of Contents
1. WooCommerce Colors and Swatches for Variations
WooCommerce Color and Swatches for Variations will help you with selecting variations which will beautify and manage your estore. There you can apply product images with your woocommerce products intact which will give a the perfect picture of your swatch image.
Are you running an E-Commerce store and thus want to adorn your site with best of image swatches?
This plugin provides a much nicer way to display variations of variable products.
Adding to the list, woocommerce color swatch count upon extending product attributes which will give a streamlined look of your store to your customers who are buying things from your excellent and unique platform. Woocommerce color swatch provides a beautiful a clean look that helps to attract your customers and give a real swatch image of your woocommerce product.
Benefits of WooCommerce Color and Swatches for Variations:
- User friendly interface
- Defines every selected woocommerce product with global attribute and swatch images.
- WooCommerce Color and Swatches for Variations provides with perfect display of thumbnail display type.
- WooCommerce Color Swatches comes with different size variation for product detail page as well as shop/archive/category page.
- WooCommerce color swatch provides smooth color and image swatches for variable products.
2. Woocommerce Visual Attributes & Options Swatches
This is my first paid plugin on the ways to find the best methods to Improving WooCommerces Variation feature. In my opinion, it’s suitable for power users who had enough knowledge for build their own product attributes styles. Woocommerce Visual Attributes & Options Swatches is flexible and customizable almost features.
Woo Visual Attributes Swatches allows you to customize the look and feel for any variation attribute, dropdowns, labels, radio buttons, colors and pictures are supported. Feeling lazy? Woo Visual Attributes Swatches got you covered by allowing you to define quicly the configuration needed for thousand of products in a heartbeat.
3. Woocommerce Color or Image Variation Swatches
Convert your normal variable attribute dropdown select to nicely looking color or image select. You can display images or color in all common size. Display them in round or square mode.
Features
- Supports Color. Image Select and Dropdown Select.
- Mix Color or Image Select with Default Dropdown Select.
- Global Color or Image Values for Attributes.
- Works on Mobile Devices.
- Option to use custom attribute label.
- Different sizes of swatch from small to large.
- Square as well as round swatch support.
- Option to display option name below swatch
- Shows Color or Image swatches on shop/category/tag archive pages.
- Change Product Image on swatch hover on shop/category/tag archive pages.
- Color , Image swatches compatible with [product_page ] shortcode.
4. WooCommerce Variation Master
Variation Master is an Extension by makewebbetter for WooCommerce. It allows admin to addmultiple gallery images for each variation and when visitor selects the variation those galleryimages will be shown as gallery images instead of main product gallery images, can add colorand image swatches, also can allow buyers to change the selected variation on cart page,Variation Master is very easy to use admin can simply Export/Import the variation galleryimages and color or image swatches for all variations, along with the easy global setting featuresadmin has full control to modify the setting for each variation, admin can disable the color andimage swatches for particular variation, can hide/show the attribute name, can change thecolor/swatch images for particular variable product.
5. Openswatch – Woocommerce variations image swatch
Openswatch is a plugin for wordpress and woocommerce with alot of new feature. This plugin make your woocommerce website became friendly and easy use for your customer.
This is some feature of OpenSwatch:
- Allow add,change swatch image for variations attributes
- Add/ change swatch image for variations item for each product
- Display swatch image for variations item on shopping cart and order details
- Add new function about filter follow attribute on product list (category / products search)
- Turn On or Off tooltips for swatch item feature
- Turn On / Off openswatch on each product
- Price filter
- Enable / Disable swatch color on product list
- Enable / Disable pre-select for variable product
- Change product image follow color selected (all image in product page, not only 1 image as default woocommerce)
- Work with default woocomerce variations system
- Easy extend and control
6. Improved Variable Product Attributes for WooCommerce
I mention about this plugin first because currently I’m using it on my little shop about Fountain Pen and Ink. That’s why I want to recommend it to you. It’s easy using and had enough option to improve the default WooCommerce’s Product Variation feature. Thanks dzeriho – the author who send me a copy of this plugin for trial before buying.
My favorite feature of Improved Variable Product Attributes for WooCommerce prevent your customers from selecting unavailable attribute combinations and only let them select the available ones. Giving them the option to add to cart only when all attribute terms have been selected. By using it, my shop never shows Out of stock options again!
Improved Variable Product Attributes for WooCommerce is a plugin that improves attributes selection in your shop. Improve your customer product selection, set up your shop attribute styles and never show the Out of stock option. Use Text, HTML, Images or Color to show product variation selectors to your customers. Add a unique style to your web shop now and amaze your visitors and clients! Display your improved attributes on the single product pages as well as on product archive pages! Let your customers select the attribute variations on the product archive pages and add them to the cart using AJAX, without having to enter the single pages, or use the plugin to display attributes on product archive pages. Custom attribute names and attribute descriptions are supported!
7. WooCombinator for variable products
WooCombinator hides the select elements and renders buttons instead – but the controlling logic is still handled by WooCommerce.
You can set your own classes and/or select from the 7 pre-defined styles. Also you can write your own inline CSS styles (if there are no other option to inckude/edit a custom CSS file).
By default WooCombinator try to re-use the button element of your theme but maybe you will need some CSS tweaks. So this plugin turns the boring select elements of variable products to buttons.
Features
- WordPress Customizer is supported
- 7 predefined styles
- Set CSS classes for elements and states
- Write your own inline CSS rules
- Changes only the display logic – the control logic is still handled by WooCommerce
- Documentation included
- Minified CSS and JS files are included
Warning
- some CSS/HTML knowledge maybe required
- depending on your WooCommerce template maybe you will need to define the active and disabled states on your own
- if you are using 3rd party plugins to change the behaviour of the select elements then WooCombinator maybe won’t work
8. Woocommerce Variations to Table – Grid
Woocommerce Variations to Table – Grid will turn product’s page default variations select-option menus to user friendly table – grid display. It features a self-explanatory with plenty of options admin settings panel, great documentation and support and per product options.
Features
- User friendly and self-explanatory administration panel.
- Displays all the needed data for your variable products with options to disable them.
- Supports “any” when you set your product variations
- Supports “custom attributes” that you may add to the products on the fly
- “Add Selected to Cart” with select all checkbox for mass adding variations to cart
- Option to disable or enable the table/grid per product.
- In Stock, Out of Stock and Low Stock (with threshold) custom messages
- Easy to use shortcode with full documentation to help you put the table where ever you need and shortcodes are executed.
- Easy to use global shortcode that will display all variations of all variable products on any page.
- Extensible / developer friendly. You can alter the plugin without hacking it, but via WordPress filters and actions.
- Make variations stand out with your custom sticker/icon. You can enable/disable or override it per variation.
- Supports YITH WooCommerce Wishlist
- Supports YITH WooCommerce Quick View
- Supports WooCommerce Product Gift Wrap
- AJAX can be enabled from settings
- Sorting of table columns in the frontend
- Default table header (auto generated), generic custom table header and per product custom table header can be set
- Easily translatable via .po / .mo files.
- Available translations: English, Greek, Français, Italiano.
9. YITH WooCommerce Color and Label Variations
YITH WooCommerce Color and Label Variations allows you to replace standard WooCommerce selects with icons, custom images and dynamic labels. The plugin is extremely versatile and adapts to any type of product: from clothes (for each item you will certainly need to show sizes and colours available) to jewels (maybe you want to show advanced options, such as gemstone form, necklace length o ring size, if the product is available in different precious metals and so on). Regardless of what you sell, if you show your product options through ad hoc images and icons, you help your customer understand, immediately as he/she comes into the page, which purchase options are available for that product: for example, in a few seconds he/she will be able to understand that the T-shirt he/she likes so much is available in his/her size or favourite colour. From that moment to clicking on “Purchase” button is a short step!
10. Woocommerce Table View For Variations
Key Features
- Grid View Table: For Customers flexibility they add Quantity Grid View for Two Global Attributes in Cart Page.
- Cart Button: Grid View Table of Variations with Cart Buttons.
- Tabular View for Variation: For Empower our customer it has the tabular variation for all variable products.
- Tabular View for price Variation: This Extension provides the price variation for each variable product in tabular format.
- Dropdown Menu for Attribute: For customers flexibility they provide the dropdown menu to easily select the attributes for customer.
- One Click Add to Cart: In this extension you can just one click to variation’s of variable product add to cart button and your variation product would be added in your cart.
- Fully Responsive: This extension is fully responsive for all devices.
10+. WooCommerce Swatches
The most advanced WooCommerce Swatch extension for product attributes (supports custom attributes too) that adds three types (Color, Image, and Label or Text) of product attribute display types with WooCommerce default product attribute display type. And it converts product attribute dropdown in single product template into swatch or swatches.
You can display product attribute swatch or swatches in WooCommerce Shop page, Product archive pages, Cart page, Users’ order item page, and Email template too.
STWooSwatches extension easily allows you to add a new term to product attribute (color, image or label swatch) in data tab while editing a product.
Main Features
- Settings available in WordPress default customizer
- Three Swatch types – Color, Image and Label type
- Allowed Swatch sizes – Tiny, Small, Medium, Large
- Supported Swatch shapes – Circle, Square and Rounded Square
- Swatch Position – After Product Title, Before Product Title or Use Shortcode
- Global settings for WooCommerce Product Category display settings
- Global Swatch or Swatches settings for WooCommerce Cart and Checkout page display settings
- Enable Tooltip
- Option for Tooltip background color
- Option for Tooltip text color
- Live Preview for all options or settings
- Customize swatch Border color
- Customize activate swatch Border color
- Swatches in
- Shop (Product Catalog) and Product Archive page
- Cart and Checkout
- Order Item Meta
- Email Template too.
- Compatible with WPML
Other WooCommerce WordPress Plugin for Variables Product
JC WooCommerce Advanced Product Attributes
Take control of WooCommerce product attribites and easily replace the default variable product dropdowns with Images, text, and Colour Swatches with JC WooCommerce Advanced Product Attributes. Select the default square, or modern circular attribute styles on a per attribute basis, giving your complete control of the look, if this is not enough the display can be tweaked further using the build in style settings page.
With the display of improved attributes on your website, make it easier to manage product attributes with the introduction of attribute groups, allowing you to create sets of attributes that can be simply loaded onto products with the click of a single button, saving you time and effort.
Visual Attributes – WooCommerce Variable Products
Visual Attributes is a WooCommerce extension that enhances variable products replacing the attribute dropdown with:
- images
- color swatches
- text labels
- icons
So you can pick each attribute by clicking on a visually descriptive element.
Enhance the user experience in your store by giving them the ability to simply click visual elements instead of clicking the attribute menu, read the attributes and only then select the desired one.
Visual Attributes is also good for mobile devices since your users can just tap the element instead of launching the disruptive select interface in iPhone and Android.
WooCommerce Product Colorizer
WooCommerce Product Colorizer is a WooCommerce e-store extension that generates live preview of different colors of products.
- This plugin requires that you generate a “mask” for your product. A mask is a cleaner .pngoutline of your white
colored product. The mask can be generated in photo editing software, such as Photoshop or GIMP. Moreover, if you want to add an additional color attribute (e.g. color of the logo on your product), you have to generate a .svg file using a free draw editor – Inkscape.. - The plugin works by coloring in the clear mask as it’s sitting over the static product preview, presenting the appearance of a different colored product. By using the Path code which can be generated in Inkscape, the overlay layer will automatically take the proper shape which will allow to present the color of the other part of the product.
- It also allows for the inclusion of a “background-image”, which can include an element on a product that is not affected by color changes. For example, if you featured a white t-shirt with a black logo in your product preview, the logo, being the “background-image”, would not be affected by any color changes, and it would remain the same color.
- For further information please refer to: this site. This link covers the process of generating different colored previews that this plugin is using.
Conclusion
Shoppers appreciate seeing visual representations of product attributes when using your store, and it can help make things feel polished and clean. Improve WooCommerce Product Variations with Colors and Image swatches is your answer if you are looking to edge out the competition by sprucing up variable products available in your store.
I’m looking for a way when click on variation swatch the parent image loads in lightbox manner. Is there a possibility.
You can try Improved Variable Product Attributes for WooCommerce which I used for my small shop. It’s work as your description.
smart variation image pro.. but slows down your site speed. S
Oh, I’m not found your plugin which was mentioned here!
I am looking for a way to add custom lengths, fore example selling string in any length and it calculates. There’s probably an easy way to do this but I can’t see how.
Thanks :)
I am setting up a site that sells scented candles. One of the purchase options we want to create is to allow the user to choose three candle fragrances from a list of 10 fragrances.
We are selling this group as a single priced item. Can Woo Already handle this? Or do I need one of these plugins to extend the attributes / variations features?
Thank you for your help!
No, I guess it’s not available to use. You must write by yourself or ask the custom to write what color of candles in the notes at checkout form.