Variation Swatches for WooCommerce
Variation Swatches for WooCommerce lets you add swatches for variable product attributes in your WooCommerce store, with different styling options.
Variation Swatches for WooCommerce offers your shoppers with an out-and-out overview of all options and variations available for products with variable attributes (for eg: color, size, texture, etc.). The plugin comes with options to display swatches of different types, with custom styling, tooltips and tooltip descriptions. It also lets you set swatches to behave according to unavailability and limited stocks.
Swatch Up Your Products In Style
4 Swatch Types
Choose from our swatch types Color, Image, Label/Button & Radio to showcase your product variations
Stuff in more information inside Tooltip using Description, Images, Term Name options
Customize your swatches style to unmask the possibility of customer attention
Stock left Label
Prompt customer to grab your products with Min. Stock left label
Avoid hiding a variation, display out of stock label to let user know the product variations.
Swatches on Shop Page
Quicker choice made by customer, by displaying variation swatches on Shop page.
Know More About WooCommerce Product Variation Swatches
Clear-Cut Display of Product Variables
WooCommerce Product Variation Swatches lets you display your variable attributes in four different styles as swatches. With the plugin integrated into the product attributes settings, easily display all added attributes as swatches, with a swatch style suiting each product characteristic. Product Attribute Variation Swatches are available in the following display styles: (i) Color, (ii) Image, (iii) Label, and (iv) Radio.
Extra Detail with Tooltips/Hover Image/Hover Descriptions
With the WooCommerce Product Variation Swatches, display the hover pop-ups with images, term name or descriptions, and get to show some extra detail to your product variations.
Suppose you need to display a informative text on a specific attribute value, you can display it as a tooltip description instead of the hover image or the hover tooltip.
Show Variations Instantly with Swatches on Shop Page
Some shoppers may be lazy enough to visit the product page before they know of any available variations. In such cases, it is wise to display these variations on the shop page, so that the shoppers can be early aware of the available choices. With the WooCommerce Product Variation Swatches, get to display the swatches on the shop page, and provide early detail to the shoppers.
Set Swatches Behavior Based on Availability of Products
If you have a product variation which is moving to limited stock or becomes unavailable for sale, you can easily convey them to the swatches created using the WooCommerce Product Variation Swatches plugin. With multiple options to set the behavior of swatches according to the availability of the products, you can display limited stock/out of stock indications to the shoppers for the ease of shopping.
Configure Swatch Display Style With Ease
WooCommerce Swatches allows the store owner to define swatches style specific to each product attribute. The style may need to be different according to the nature of the attribute and their specific characteristics.
WooCommerce Variation Swatches lets you add variation swatches for variable product attributes in your WooCommerce online store. The plugin allows you to customize the height, width, and shape of the swatch icons.
The WooCommerce Variation Swatches plugin is made to provide the shoppers with an out-and-out overview of the variations available for products (say, color, size, texture, etc.) in your WooCommerce store through swatches. With the plugin, you can display your variations with color, image, and label swatches.
Display tooltips for the swatches while hovering. You can change the font color and background color of the tooltip.
- 3 Swatch Types: With Product Variation Swatches for WooCommerce(Variation Swatches for WooCommerce), the product variations can be displayed as label, color and image swatches.
- Customization: The swatches icons and labels/buttons can be customized for their height and width. You can select between a round or square shape for the icon.
- Behavior of unavailable variation swatches: The swatches with variations for a product in the WooCommerce store that are not available or out-of-stock, will be blurred with a crossed mark.
- Tooltip: Display the term name as a tooltip while hovering on the swatch.
- Swatches for Local Terms: You can add swatches for both globally and locally added terms.
BUY PREMIUM VERSION
The premium version of the Variation Swatches for WooCommerce comes with a handful of extra features for swatches display.
With the extra features and customizations, your variation swatches can get along with any WooCommerce theme you use.
Upgrade to Premium Now!
PREMIUM VERSION FEATURES
An Extra Swatch Option – Radio: The premium version of the swatches plugin for WooCommerce allows you to display your product attributes in the form of Radio buttons.
Individual Attribute Settings: With individual attribute settings, you can override the global settings for individual swatches.
Additional Tooltips: You can set an image, term name, or description as a tooltip for swatches.
Separate Style Customization: Custom styling can be done for individual swatches with the premium version of the plugin. You can style the icon height, width, and roundness, and also the border color, color on hover and color on selected.
Extra Styling for Tooltips: With options to display images and descriptions as tooltips, you also have options to style them according to your WooCommerce theme and product pages.
Out of Stock Label: Instead of hiding a variation, you can display an out of stock label to let your shopper know all the existing product variations.
Stock Left Alert: With a minimum stock left alert, you can call the attention of shoppers to the limited stock of any product in your WooCommerce store.
Swatches on Shop Page: By displaying variation swatches on your WooCommerce Shop page, make your shoppers quickly understand the variations which are available and which are not.
Stock Left Alert on Shop Page: Display the stock left on the WooCommerce shop page, so that the shoppers can grab products of limited numbers.
- Products > Swatches Options
- Products > Attributes
- Products > Attribute terms
- Products local attributes
- Product variation swatches
- WooCommerce 3.0 or greater
- WordPress 4.0 or greater
- PHP version 5.2.4 or greater (PHP 5.6 or greater is recommended)
- MySQL version 5.0 or greater (MySQL 5.6 or greater is recommended)
- Log in to your WordPress dashboard
- Navigate to the Plugins menu and click Add New.
- Search and locate ‘Product variation swatches for WooCommerce’ plugin.
- Click ‘Install Now’
The manual installation method involves downloading ‘Product variation swatches for WooCommerce’ plugin and uploading it to your webserver via FTP application. You may find more instructions on how to do this here (https://codex.wordpress.org/Managing_Plugins#Manual_Plugin_Installation).
The tooltip is used to set hover element for each term of an attribute/variation.
To set tooltip for swatches,
- Navigate to Swatches Options → Global Settings → Tooltip Settings.
- Enable the checkbox Enable tooltip.
- Save the changes.
Note: Free version will let you have Term name in the tooltip, you can have Image, description as well in the tooltip when using the Premium version of WooCommerce Product Variation Swatches
Where can I enter the term image/color/label in WooCommerce Variation Swatches?
- Navigate to Products → Attributes
- To add a New Attribute and then configure the term (image/color/label), follow steps 3-7. If you already have an attribute saved, you can skip the steps and directly go to step 6.
- Using Add New Attribute section add a new attribute. Fill in the desired attribute name.
- Choose the attribute type from the type drop down. You can choose between attribute type Color /Image /Label /Radio(available in Premium Version)
- Click on Add Attribute button to add the attribute.
- Once the attribute is added, you can now configure the Terms as per the attribute type selected for the attribute.
- Click on Configure Terms, you now add in the terms.
- Attribute type Label – You will be asked to enter the Label Display Term Name along with default term data.
- Attribute type Image – You will be asked to upload the term image along with default term data.
- Attribute type Color – You will be asked to pick the term colour along with default term data.
Is there an option to set swatches for local attributes in WooCommerce Variation Swatches?
With our Premium version, you can set swatches for local attributes. Once installed, you can configure the same from the Product page.
Can I set an image as a tooltip?
With the free version of WooCommerce Variation Swatches, you only have the option to set term name as a tooltip. If you need Images as the tooltip, you have to Upgrade to Premium Version of WooCommerce Product Variation Swatches.
Is there an option to display the number of products left in the stock?
Upgrade to Premium version to display the number of products left in the stock. Stock left alert (min count) can also be set as per your preference when using WooCommerce Variation Swatches.
Contributors & Developers
“Variation Swatches for WooCommerce” is open source software. The following people have contributed to this plugin.
WooCommerce Variation Swatches
WooCommerce Variation Swatches is the most popular attribute variation swatches plugin in the WordPress plugin directory. The plugins is an awesome creation by GetWooPlugins team keeping in mind to create new experience for WooCommerce product variations.
Key Features of WooCommerce Variation Swatches
WooCommerce Variation Swatch is simple plugin, but does wonderful job. It turns product attribute select dropdown into beautiful swatches. It means you can turn product variation selection dropdown into color, button, radio, and image swatches.
Consequently, the plugin enhance the plugin experience extensively. users don’t need to reveal dropdown select field and see what variations are available for the variable product. Without pressing extra clicks and spending extra time, they can quickly select their desired variation.
Display Swatch in Catalog / Archive Page
To boost store conversion and engagement, Attribute variation swatches plugin enables swatch on the catalog page. It allows customers to check product variation from the archive page and add them to the cart.
Variation Image Tooltip in Catalog / Archive Page
To convert users into paying custom, It’s necessary to convince them first giving all important details about a product. So, we have packed image tooltip for archive pages swatches in this WooCommerce variation swatches and photos plugin.
Text Tooltip in Catalog / Archive Page
Tooltip acts like swatches description. It describes more about the swatches. Instead of image tooltip, you can enable text tooltip to maximize your site engagement.
Integrated With Quick View
Besides showing swatches on product details page and archive pages, it can enable swatches on quickview lighboxes to maximize store wide sales.
What to Display Single Selected Attribute on Shop page? This will help!
If your product has 5 attributes, generally, every Woocommerce variation swatches pro plugin shows all the 5 swatches attributes on the archive pages. First time, we brought an exclusive option besides the general feature. It allows you to show only a selected attribute on the shop page. So, from now you either you can show all selected attribute on the shop page, or entire attributes like in single product page.
Change Product Gallery Image Selecting Only Color Variation Like Amazon and Aliexpress (Or Selected Variation)
Generally, WooCommerce variable product changes variation image when all available attribute variations are selected. First time in the WooCommerce Variation Swatches plugin history, we brought this to change gallery image selecting single attribute variation. You don’t need to match entire attribute variation.
Generate Variation Link
WooCommerce don’t comes with this feature. We brought this feature first time in WooCommerce from this popular WooCommerce variation swatches and photos plugin.. With this feature you can forward your specific attribute link in your customer for quick purchase or share it the social media.
Product Based Swatch Customization
WooCommerce Variation Swatch plugin offers global swatches. If you need personalized variation per-product basis, you quickly achieve them from the site admin.
Color Variation Swatch For Product Page
The option turns product select options drop down into color swatches. It’s the best fit options for the variable products comes with multiple variations.
Image Variation Swatch For Product Page
Images variation does more than color swatches. When it comes to display images as product variation, this option comes handy and highly engaging for conversion.
Button / Label Variation Swatch For Product Page
When comes to show available product size, quantity and other variation related details, button/label swatch boost conversion extensively. It allows selecting customers to select their desired product variation quickly.
Radio Variation Swatch For Product Page
Radio select box is another variation type to show product variations beautifully. It acts like the variations list for WooCommerce variable products.
Highlight You Special Attribute
There are plenty of attributes in WooCommerce Variable Product, you many to keep a single attribute standout. To facilitate the opportunity, we added the option in the popular WooCommerce Variation Swatches plugin.
Product Page Variation Image Tooltip
Sometimes tooltip text is not enough to convince customers. In this case, Image tooltip do the rest.
Customizable Tooltip Text
Tooltip denotes the variation details to explain more. It can be disabled and customized the title text and tooltip background from the admin backend.
Blur/Hide Out of Variation
Showing out of stock variation seems unnecessary. So, the plugin offers option to blur or hide the out of stock variation to simplify in stock variation.
Rounded and Square Shape For Variation
The round and Square shape are one of the unique and helpful features of this plugin, when it comes to showing more than two or three characters in swatches, or want to add color and image swatch exclusively, you use Square shape instead of Round
The UX of this plugin is impressive, helps you understand each available feature quickly. It means you don’t need to read any manual comprehensively. In spite of that, we have added a details documentation to keep informed about all features and functions in this swatches plugin.
Friendly and Quickest Support In the Industry
Maximum users of this plugin are developers. We know how quickly a developer needs to finish their job and deliver it to their clients. To help you out quickly our team is there to assist you. As long as your theme is coded following the standard of WooCommerce, it should perfectly work. On top of that, if any issue arises, we are here to fix them out; Just open a ticket from here.
Compatible With Major Themes
The only variation Swatches in the market is running 10,000+ websites. It’s because it’s compatible with majors themes and plugins in the market. It’s tightly, compatible with Flatsome, OceanWP, Divi and many more.
WooCommerce Variation Swatches not only offers the color, radio, image and label attributes in the single WooCommerce product. It also enables them in product quick view. If you’re using WooCommerce themes like Flatsome that comes with default Quick View option, you don’t need to hassle to load color and image swatches for variable product attributes in quick view separately.
In this WooCommerce attribute variation plugin, besides creating size, brand, image, color, and label variation swatches, you can handle the swatches shape style Rounded and Circle. On top of that, it allows you beautiful tooltips on variation swatch hover. Based on your requirement you enable and disable hover from the settings. To maximize and personalize your development process, the product attributes swatches comes an option to disable default plugin stylesheet so that you can personally write your own CSS.
Furthermore, you would find an option to hide and blur out of stock variation, set product image variation swatch sizes based on product image settings in theme, change tooltip background and text color.
WooCommerce Variation Swatch also enables/disable swatches product archive pages. The powerful option for this swatch plugins is variation swatch customization option for each product. It means besides addition global attribute variation for each variable product, you can customize them on your need for your desired products.