#1 Independent Seller of WooCommerce Plugins
Switch language
English

YITH Color, Image & Label Variation Swatches for WooCommerce

What the plugin does Replace WooCommerce's default options to show and select product options (colors, sizes, dimensions, shapes, etc.) using text labels, images, icons, or color swatches. 
How you can benefit from it:
  • offer a clear overview of the options available in your products and improve the user experience in your shop;
  • replace the WooCommerce variations selector with a functional and modern design;
  • show available colors, materials, and textures by using color swatches or ad hoc images;
  • choose whether to show product options also on the Shop page or make them available only on the product detail page;
  • show an image gallery for each of your product variations and enhance available colors and styles for each of them.
loading
1 year of updates and support
30-day money back guarantee
30 days money back guarantee Buy confidently with our buyer protection and get a full refund for any reason. Read our refund policy >
This plugin is used by 15.435 customers, with a rating of 4.5/5 and a 98% customer satisfaction in support!
YITH Color, Image & Label Variations Swatches

The functional and captivating solution to show the options available (color, size, material, etc.) in your products

If you sell products with several options, such as the classic “size” and “color,” you may have realized that the solution WooCommerce offers by default — showing the options as text lists in drop-down menus — is neither effective nor usable. Imagine how frustrating users may feel when they want to see the colors available for a T-shirt and find a list of written colors without any color swatch to get a visual preview.

YITH Color, Image & Label Variation Swatches for WooCommerce allows you to replace the standard WooCommerce drop-down list with icons, custom images, and dynamic labels.

The plugin is extremely versatile and adapts to any product, from clothing (to set the sizes, colors, fabric, etc.) to jewelry (to show advanced options such as gemstone shape, necklace length, ring size, etc.). 

Regardless of what you sell, by showing your product options through images, color swatches, and ad hoc icons, your customers will understand the purchase options available for that product as soon as they visit the page. Usability and aesthetics will make it easier for your customers to choose the products to buy and will ensure a positive buying experience.

Choose where to show the available options for your products

Choose whether to show product options only on the product detail page or on the Shop and category pages too. 

By showing the available options also on the standard WooCommerce pages, your users will be able to quickly see the available sizes, colors, etc., and speed up the selection and purchase process.

Replace WooCommerce variation select

Replace WooCommerce drop-down list by choosing from 3 different option styles 

For each attribute you create, you can choose to replace the default WooCommerce drop-down list: the plugin offers color swatches, images, and label options. The final result, with just a few clicks, combines ease of use with great aesthetics, which fits any theme you use for your shop.

Use color swatches to show the available colors 

The most interesting option in this plugin is the one that allows you to create color swatches to show what colors are available for a product. You can create global color options, assign them to products and, if needed, override them in each product. In this way, for example, you can globally create the color “yellow” with the RGB code and set different shades of the same color in the products of your shop, so that the color swatches accurately show the actual colors.

Show colors with color swatches
Bi-color swatches
Hot

Use bicolor swatches for greater versatility

You can create color swatches with only one color or use the “bicolor” option to create samples with two colors. This option is useful if you sell products that have two dominant colors and you want to consistently show them to your users.

Use custom labels to best show text options 

For options such as sizes or materials, which need to be entered as text, you can use the “label” option. Text will be inserted into buttons and shown next to each other.

Custom labels for options
Custom images and icons
Hot

Use custom images and icons for a user-friendly and captivating result

The “image” option is the perfect fit to cover every need. You can upload fabric or pattern samples, icons, or even photos to show any option and provide immediate feedback to users. 

Hot

Create a variation product gallery to highlight different colors or styles of the same product

If you have product variations you can easily setup a variation product gallery to highlight colors or models available. To sell products available in different colors, you can for example create a dedicated image gallery for each color.

Product variation image gallery
Show a tooltip on product variations

Enable a tooltip with text and a preview to provide an immediate feedback

Choose whether to show a tooltip when hovering over the options to display the option name (e.g., the name of the color or style). In the tooltip, you can also choose whether to show a preview of the option: in this way, you can show, for example, a preview of the “blue” sweatshirt when the user hovers over the blue color sample.

New Hot

Change the attributes’ global options in specific products

Thanks to the new options added, it is now possible to change the style of the attributes for each product. This allows you to quickly set a different color shade in a specific product with just two clicks and without changing the color attributes globally configured. This is a time and effort-saving feature that allows versatile management of large product catalogs.

Change the style of product attributes

Free Vs Premium

Attribute creation
Free Premium
Create “Color swatches” attributes
Create bicolor swatches to show two-color samples
Set the color swatches size and border radius on the product page
Create “Image” attributes
Create “Label” attributes
Override the attributes' global style on specific products new
Set a tooltip for each attribute
Choose whether to show an image in the tooltip or not
Customize the tooltip color, position, and animation
Customize the border color of the options
Choose the attribute style for the product page: inline or below the label new
Choose whether to show the attribute description on the product page or not
Choose whether to replace the product image when hovering over the attribute or not
Choose whether to show the available attributes in the tab “Additional information” on the product page or not
Variation options
Free Premium
Show variations as separate products on the Shop page
Choose whether to show attributes on the Shop page or not
Enable AJAX for variations on the Shop page
Customize the text of the “Add to cart” button when a variation is selected
Set a different image gallery for each product variation hot
Import/export the variation galleries through WooCommerce import and export tools new
Import gallery images for each variation with WP All Import new

Plugin integrations

All the products in our YITH catalog are developed on the same shared framework. This grants full compatibility among all our plugins and allows combining them together to get even more powerful results and more complete solutions.

We do our best to also include compatibility with the most popular WordPress and WooCommerce plugins available on the market.

You can use this plugin with*:

Woocommerce Variations Update in Cart (by Makewebbetter)

The combined use of this plugin with YITH Color, Image & Label Variation Swatches for WooCommerce allows customers to select or edit the product variation when they have already added the product to cart without the need to go back to the product page or shop page.

YITH WooCommerce Added to Cart Popup

Thanks to YITH WooCommerce Added to Cart Popup you could enable an automatic popup to notify the user about the updated cart content. Every time a product is added to the cart the popup automatically opens.
The integration between these two plugins allows users to choose the variation of the products directly from the modal window.

YITH WooCommerce Ajax Product Filter

YITH WooCommerce Ajax Product Filter allows filtering the product list basing on their attributes or price. The filter is applied by Ajax, therefore without the need to refresh the page to show the search result.

The combined use of these two plugins allows using colors, labels, and images configured with YITH Color, Image & Label Variation Swatches for WooCommerce for your terms when creating filters of Color swatches and Label/Image types.

YITH WooCommerce Compare

YITH WooCommerce Compare offers users the chance to compare two or more products in the shop in order to choose the one they really want. This information is shown within a dedicated tab and products can be grouped by category.

By combining both plugins, the customer can also compare the single variations in archive pages.

YITH WooCommerce Wishlist

YITH WooCommerce Wishlist is a plugin that allows your customers to arrange the products they are interested in one or more wish lists. This process allows them to check these products back again at a later moment and eventually proceed to purchase them.

Thanks to the integration between the plugins it will be possible to select and add a product variation configurated with YITH Color, Image & Label Variation Swatches for WooCommerce straight from the wishlist.

* All the plugins listed in this section are not included in YITH Color, Image & Label Variation Swatches for WooCommerce. In order to take advantage of a specific integration, you need to purchase and activate the premium version of the related plugin.

Screenshots

Admin settings

User view

Reviews (95)

Customer reviews

Rated 4.51 out of 5 stars
95 reviews

Are you a customer? Submit your review

submit review
  1. 5 out of 5

    annie.doan - verified customer

    Love itLove the new design, it's now been more than 6 months since I got it, right before you guys updated the dashboard, and I gotta say the change made it so much more fluid and easy to set up

  2. 4 out of 5

    Demelsa Garrido - verified customer

    4 estrellasEs un buen plugin, aunque me gustaría que hubiera una opción para poner de color gris un atributo que no esté en stock, creo que sería más visual para el cliente. Aún así, está muy bien. Lo recomiendo.

  3. 4 out of 5

    Joseph Kauffman - verified customer

    I approve it so farI love the plugin, specially after the last update! It has so many great options. Although I had some technical issues when I installed it, these were solved very quickly.

  4. 4 out of 5

    Erin Thiessen - verified customer

    Good for meI was using added to cart pop up first and then saw there was an integration with this plugin. I gave it a go and I'm not dissapointed, I just wish their functionalities came together in one single plugin.

  5. 5 out of 5

    Anton Ibarra - verified customer

    recommendedHighly recommended to show product attributes and very easy to configure, I am very happy with it.

FAQ

Here you can find some frequently asked questions about this plugin. If you can't find a reply to your doubts, ask a question: we will reply in a very short time
Topics:
  • All
  • General
  • Stock
  • Import

Can I associate a thumbnail to the color linked to the image of a product variation?

Yes, the plugin allows showing product variations in a graphic way with color swatches or images and then associating an image to each variation.

Can colors and sizes be visible on the shop page in both versions?

No, with the free version, the variation attributes are visible only on the product page. On the contrary, with the premium version, you can show the variation swatches on the Shop page too.

What will happen if a certain variation is out of stock?

When a product variation is not set or is out of stock, through the plugin Customization options, you can choose to hide it, blur it, or blur it and cross it out.

Is it possible to grey out the size attribute that is out of stock?

No, it is not possible. You can however grey-out or hide attributes that don't match any valid variation. For example let's suppose I sell t-shirts and these are my existing variations:
- Color red size S
- Color red size M
- Color green size L
Once I select color red, since size L doesn't match any valid variation it will grey-out. This is valid also if selecting first the size attributes and also with any number of attributes.

Does it manage inventory?

No, the plugin does not manage the inventory in any way.

What is the recommended size of an image attribute?

The image size is 1 MB, however it depends on your installation what size will fit best. If you don’t want to change the style, you can use the plugin size 50x50 px.

Does the plugin support Ajax loading?

Yes, the plugin supports Ajax and allows enabling the option to manage the variations form in Ajax on archive pages.

Is it possible to import variations?

No, this is not possible with the plugin.

How can I only show variations on the product page and not on the shop page?

You can turn off variations on archive pages simply by disabling the option "Allow attributes selection in shop and archive pages" in the plugin General options tab.

Can't find the answer?

Send us your question and we will reply very quick!

Send your question

Technical Info

  • Version: 2.8.1
  • Released: 2024-02-21
  •  
  • Minimum PHP version: 7.2
  • Requires: WordPress 6.2 and WooCommerce 8.4
  • Compatible up to: WordPress 6.4.x and WooCommerce 8.6.x
  •  
  • Supported multilanguage plugins: WPML, Loco Translate
  • Translation ready: YES
  • Languages 100% guaranteed by YITH: English, Italian, Spanish
  • Languages provided by users: French (34%), Dutch (34%)
  • Support for: YITH Proteo theme. All YITH plugins except for: YITH WooCommerce Product Bundles
  • Supported third party themes: Avada, Divi, Flatsome, Neighborhood, Storefront, X, Eola, Uncode
  • GDPR Compliant: Not applicable
loading
1 year of updates and support
30-day money back guarantee
30 days money back guarantee Buy confidently with our buyer protection and get a full refund for any reason. Read our refund policy >
98% CUSTOMER SATISFACTION

We take great care of you and your shop today, and every day after that.

Meet the team