Exclusive Coupon — Use Code SAVE10 for Instant Savings! Apply at checkout for your special discount. Limited uses — grab it while you can.
WooCommerce Color or Image Variation Swatches replaces conventional WooCommerce variation dropdowns with a more visual selection interface using color swatches, image swatches, and text labels. The plugin is particularly useful for stores selling products with multiple options such as clothing, footwear, accessories, electronics, furniture, cosmetics, and other variable products. Customers can identify available choices more easily and select variations directly from the product page. Store owners can customize the appearance of swatches, configure attribute representations, and use supported tooltip information to create a variation-selection experience that fits their website design.
WooCommerce Color or Image Variation Swatches
WooCommerce Color or Image Variation Swatches replaces conventional WooCommerce variation dropdowns with a more visual selection interface using color swatches, image swatches, and text labels.
The plugin is particularly useful for stores selling products with multiple options such as clothing, footwear, accessories, electronics, furniture, cosmetics, and other variable products. Customers can identify available choices more easily and select variations directly from the product page.
Store owners can customize the appearance of swatches, configure attribute representations, and use supported tooltip information to create a variation-selection experience that fits their website design.
The plugin is available from 5ivecode.com under a GPL license, with lifetime free updates and limited email support included with the supplied package.
Color Variation Swatches – Replace text-based variation dropdowns with clickable color options.
Image Swatches – Represent product variations using images for a more visual selection experience.
Text & Label Swatches – Display options such as sizes, materials, styles, or other attributes using customizable labels.
Visual Variation Selection – Give customers a clearer way to identify and select product attributes.
Tooltip Support – Display additional information when customers interact with supported swatches.
WooCommerce Variable Product Support – Designed for products that use WooCommerce variations and attributes.
Responsive Layout – Swatches are designed to adapt to different screen sizes.
Appearance Customization – Configure available swatch dimensions, shapes, borders, and interaction effects.
Simple Administration – Manage variation swatches through the WordPress/WooCommerce interface without requiring custom coding for basic configurations.
GPL Package – The package supplied through 5ivecode.com is distributed under GPL terms and includes lifetime free updates as supplied.
WooCommerce's standard variation selector commonly presents product options through dropdown menus. While functional, dropdowns can make visual attributes such as colors, patterns, or product finishes less intuitive to browse.
WooCommerce Color or Image Variation Swatches provides an alternative by presenting variation attributes as interactive visual elements.
For example, a clothing store can display available colors as colored circles and sizes as text labels. An accessories store could use product images to represent different designs, while an electronics store could use labels for storage capacity or finish options.
This approach allows customers to see available choices directly on the product page instead of opening a dropdown for every attribute.
Color-based attributes can be represented using visual color selectors.
Instead of displaying:
Black
White
Blue
Red
as a conventional dropdown, the store can present corresponding color choices as clickable swatches.
This is particularly useful when the visual difference between product options is important to the purchasing decision.
Image swatches allow product attributes to be represented with images.
Potential applications include:
Clothing patterns
Shoe designs
Furniture finishes
Fabric options
Product styles
Cosmetic shades
Electronic finishes
Using images can provide customers with a more direct visual reference when choosing a variation.
Not every attribute needs an image or color.
Text-based swatches can be useful for:
Sizes
Materials
Capacity
Width
Product grades
Styles
Other text-based attributes
For example, a clothing product could display S, M, L, XL as individual selectable labels.
Supported tooltip functionality can provide additional information when a customer interacts with a swatch.
Depending on the configuration, tooltips can be used to provide supplementary information about an option. Store owners should keep tooltip content concise so that it remains useful on both desktop and touch devices.
The appearance of variation selectors can be adjusted to fit the store's visual design.
Depending on the available settings, administrators can configure aspects such as:
Swatch size
Shape
Borders
Spacing
Hover behavior
Other visual styling options
This helps integrate the variation selector more naturally with the existing product-page design.
Get Support
Please Sign In to contact our support.
