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!
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!
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.
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.
- 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.
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.
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.
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
Visual Attributes is a WooCommerce extension that enhances variable products replacing the attribute dropdown with:
- color swatches
- text labels
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.
- Use images, icons, color swatches and text labels to select product attributes in variable products
- Mix the visual attributes with the standard select dropdown
- Setpresets for attributes: select the type and add the visual attribute once; It will be pre-filled when you create a new product and add this attribute
- Show visual attributes in WooCommerce shop loop, product category and product tag pages
- Font icons for crisp visualization in retina or other high density display
- Choose from Genericons or Font Awesome icon font libraries, or
- Use your own custom font icon set
- Specify to show visual attributes only on mobile, desktop or both
- Supports custom product attributes and taxonomy attributes respecting their custom order
- Display the attribute name
- as a label below the visual element
- as a tooltip that shows up when mouse rolls over the visual element
- Also works with simple products displaying visual attributes and optionally hiding the Additional Information tab
- Disable them on each product while preserving the data
- Easily customizable through visual controls
- Fully translatable
- Complete spanish translation included
- Complete german translation included. Thanks to Jessica Mense
- Good documentation and prompt support
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.
- 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
- 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
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.
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!
Grid View Table
For Customers flexibility we add Quantity Grid View for Two Global Attributes in Cart Page.
Grid View Table of Variations with Cart Buttons.
Tabular View for Variation
For Empower our customer we provide 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 we 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.
This extension is fully responsive for all devices.
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.