proved1_banner WooCommerce Colors And Swatches for Variations - Display swatch on Shop, Archive and category pages - 1

WooCommerce Colors And Swatches for Variations - Display swatch on Shop, Archive and category pages - 2

SHOW WOOCOMMERCE PRODUCT VARIATION SWATCHES FOR ALL VARIABLE PRODUCT ATTRIBUTES AND PROVIDE AN OPTIMUM SHOPPING EXPERIENCE ON YOUR ONLINE STORE

WooCommerce Colors and Swatches for variations Plugin helps you display variations of variable products on your online store. It lets you easily set up and customize product variation swatches for attributes like color, size, variety, or quantity.

Also, multi-colored WooCommerce variation swatches allow the perfect display of products with different color combinations, ensuring user experience & higher sales. Its social sharing buttons are vital to boosting brand visibility.

Plus, it offers several custom design options to give WooCommerce swatches a more stylized & clean look. You can decide on variation, swatches placement, display shape & size.

You may also upload & create custom attributes specific to your business using the WooCommerce Colors and Swatches plugin. .

It works flawlessly with the HPOS feature. So, your online store will never hit a snag handling high order volume.

WooCommerce Colors and Swatches Plugin Works With Popular Themes

Our plugin is also compatible with the 5 major WordPress themes:

Avada

OceanWP

Flatsome

Divi

Betheme

Features of Colors and Swatches for Variations:

It provides three different types of display variations: Text, Image,Color and Multi-Color variations .You can display variation swatches on Shop, Product, Archive, and Category pages.

WooCommerce Colors And Swatches for Variations - Display swatch on Shop, Archive and category pages - 3

1. Display Price & Stock Preview

Merchants can display the price and stock for the mentioned variations. Customers see this by hovering just over the variations.

2. Multi-Colored Variation Swatches

You can create swatches to represent two colors at the same time. The dual-colored swatches feature can be implemented per-product-wise. It will help you sell variable products with multi-color variations.

WooCommerce Colors And Swatches for Variations - Display swatch on Shop, Archive and category pages - 4

3. Bestselling Badges on Attributes

With this feature, you can assign badges to any product attribute. For example, suppose your green, medium-sized T-shirt is a bestseller. In that case, you can easily configure the settings to display a “Bestseller” badge on both the Medium size and Green color options.

Plus, you have full control over the badge’s text and color, it doesn’t have to say “Bestseller”; you can customize it to display any message you like.

4. Compatible with Elementor Pro

WooCommerce Colors and Swatches plugin is compatible with Elementor Pro, which is a visual editor for building websites. So, the compatibility allows you to seamlessly create Shop and Product Pages with variation swatches using drag-and-drop functionality.

5. Customize Attribute Term Label

The tooltip attribute term label’s color is customizable. You can easily change the tooltip text and background color. Thus, making even the smallest element reflect your branding.

6. Attribute Name on the Shop Page

You have the option to show attributes’ names on the shop page for all WooCommerce variation products.

7. Highlight Selected WooCommerce Swatches

You can show a tick symbol on selected attribute swatches. Simultaneously, you can enable the border to highlight the selected WooCommerce variation swatches. Both features work in tandem and make selecting product variations easier. .

Allow the social share buttons for Facebook, Pinterest, Twitter, Gmail, and Whatsapp for customers to share variable product details on social sites.

WooCommerce Colors And Swatches for Variations - Display swatch on Shop, Archive and category pages - 5

9. Accurate Product Availability Information

WooCommerce colors and swatches plugin lets you display a cross on unavailable product variants and customize the color code of the cross. For examples, if you have size M t-shirt but not in the blue color, then it will display a cross on the blue color swatch.

10. Variation Swatches Limiter

Use the WooCommerce variation swatches limiter to reduce the number of displayable swatches of any attribute on the product page. You can choose the attribute and number of attribute swatches.

WooCommerce Colors And Swatches for Variations - Display swatch on Shop, Archive and category pages - 6

11. Configure Attribute Label

Set the attribute label as Tooltip, Above Swatches, or Over Swatches.

You can show images or names for the swatches’ tooltip labels . Using images as a tooltip label is a better option as it is more engaging than simple text. Also, you can show variation thumbnails in the tooltip view on the Catalog/Archive page. Also, you can change the tooltip position to show it on top or bottom of the swatches.

13. Variation Swatches Shapes

Using the WooCommerce variation plugin, you can select the shape for the attribute term thumbnail as Square, Circle, Or Rectangle. It will apply to all variation swatches globally.

14. Attributes Terms Thumbnails Display Size

You can configure the Display Size of Variation Swatches on the Product Detail Page and Shop/Archive/Category Page in the following sizes: 2020, 4040, 60*60 or any custom size. Sizes are applicable both globally and per-product-wise..

15. Hide Swatches in the Shop/Archive/Category

You can hide swatches in the Shop/Archive/Category Page and add the Show Variations button that displays all the attribute swatches when clicked. Essentially, the WooCommerce colors and swatches plugin will render an uncluttered or orderly look to your.

16. Choose Variation Form Position

You can You can enable this setting to move variation form position on the shop. You can align the form position according to your preferences. It can be Before The Add To Cart Button or After The Add To Cart Button However you like.

17. Setup Variation Swatches for WooCommerce

The user-friendly UI allows you to set up images and color swatches easily.

18. HPOS Compatibility

The WooCommerce variation swatches plugin works smoothly with the WooCommerce HPOS feature, improving your store’s capacity to handle high order volume during peak shopping periods.

Product variants typically lead to a substantial increase in order volume, and this amplifies during high-sales seasons, such as Christmas, BFCM, Labor Day, etc. To efficiently handle these orders, HPOS creates a dedicated custom table for orders, thereby accelerating the order processing.

19. Additional features for Variation Swatches and Photos

Add WooCommerce color swatches for global attributes.

Add color and image swatches combination for attributes.

Remove the Reset or Clear selected swatches button from the Shop and Archive Page

Benefits of WooCommerce Color and Swatches for Variations:

With Color and Swatches for variations, you can showcase all variations of your products and give a sorted look to your online store.
Maintain brand uniformity with the customization features for product variation swatches and thumbnails..
Show WooCommerce swatches on the shop page and attract customers instantly.
Increases your sales by making it easier for customers to find product variations.
Define every selected WooCommerce product with global attributes and swatch images
Cut the clutter on the product page using the WooCommerce Swatches limiter.
Expand the product’s reach by generating shareable links for your variation products.
WooCommerce Color Swatches come with different size variations for the product detail page and the shop/archive/category page.
Per-product attribute swatches provide an option to avoid using drop-down fields on your variable products.

WooCommerce Colors And Swatches for Variations - Display swatch on Shop, Archive and category pages - 8

Live Demo

Visit demos to experience the unmatched benefits of plugin and explore the settings.

Frontend demo of Color and Swatches: Click here
Backend demo of Colors and Swatches: Click here

What do Our Clients Say About Us?

Olkkis2021 ⭐⭐⭐⭐⭐

Great plugin with mani options to create points and reward system on WooCommerce. webmtp⭐⭐⭐⭐⭐

Although it is not possible to fix the error, you have very good support. This is a great technical team that I have ever supported.

Sign58⭐⭐⭐⭐⭐

Customer and technical support has solved all my pre sales requests and my configuration problems. I recommend it to everybody.

Oxygon⭐⭐⭐⭐⭐

Does what it says, easy to understand and good support that helped me with a minor conflict with my theme and the plugin.

Frequently Asked Questions

Q. Does the WooCommerce Color plugin show Images or Color swatches on the shop and category pages?

A. Yes, Color or Image swatches will show on shop and category pages. .

Q. How to enable swatches globally to all variable products?

A. Yes,It can be done by using global attributes so merchants just follow these simple steps. 1: WooCommerce-> product->attribute. 2: Click on attribute(color)-> then all variations are listed (black,blue,black-silver,black-green etc). 3: Click on configure terms->as you click on that, all variations will list. 4: Select any variation->click on edit(button)->there is an option “Display Type” from there you can select the thumbnail-image/color/text which you want to display on the front end. 5: Now this setting works globally for all global attributes and swatches will show on all products.

Q. How many Variations Can be made of each product?

A. Variation can be made according to the requirements.

Q. How would I remove the drop-down option and keep only variation (color/size)?

A. First ,you have to go to the wooCommerce product setting , select the product and then go to the variation swatches setting after that set the swatches value as per your Requirement .

Q. Will the WooCommerce colors and swatches plugin not show the out-of-stock product?

A. Color and Swatches plugin will show the cross sign for the product variation which are out of stock.

Q. Does the WooCommerce color swatches plugin show variations of the product as tooltips?

A. Yes, WooCommerce Color and Swatches plugin shows the product variation on selecting the variation of the product.

WooCommerce Colors And Swatches for Variations - Display swatch on Shop, Archive and category pages - 10

This plugin is not subjected to GDPR compliance as it does not store a user’s sensitive data. It only holds information related to software that is run by WordPress & WooCommerce holders.

Thank you for your interest in WooCommerce Colors And Swatches For Variations, WP Swings.

If our documentation doesn’t contain the solution to your problem, you can visit the WP Swings Forums Community

Create and Revamp your eCommerce store with WooCommerce Services

Changelog


08.10.2025 Ver: 1.4.8
New : Price & Stock Preview on Hover
New : Compatible with latest WP(6.8.3) & WC(10.2.2)

13.08.2025 Ver: 1.4.7 
New : Display a 'Bestseller' tag for product variations based on their assigned term.
New : Dynamically set the Bestseller name, background color, and font color.
New : Compatible with latest WP(6.8.2) & WC(10.1.0)

05.05.2025  Ver: 1.4.6
New : Compatible with latest WP (6.8.1) & WC (9.8.3)

17.02.2025  Ver: 1.4.5
New : Compatible with latest WP (6.7.1) & WC (9.6.1)

05.09.2024 - Ver: 1.4.4
New : Compatible with latest WP (6.6.1) & WC (9.2.3)
Fix : WooCommerce Compatibility issues

28.05.2024 - Ver: 1.4.3
New : Option to move tooltip position.
New : Compatibility with latest WP(6.5.3) & WC(8.9.1)

08.03.2024 - Ver: 1.4.2
New : Compatible with latest WP( 6.4.3 ) & WC( 8.6.1 )
Fix : CSV uploading issues

28.11.2023 - Ver 1.4.1
New: Compatible with latest WP( 6.4.1 ) & WC( 8.3.1 )
Fix: Single page layout issues

10.11.2023 - Ver 1.4.0
New: Option to move variation form position
New: Compatible with latest WP( 6.3.2 ) & WC( 8.2.1)

07.09.2023 - Ver 1.3.0
New: Compatible with HPOS
New: Compatible with latest WP( 6.3.1 ) & WC( 8.0.3 )
Fix: Layout issues fixes

04.05.2023 - Ver: 1.2.0 
New: Multi-color Swatches Variations
New: Compatible with Betheme
New: Compatible with latest WP( 6.2 ) & WC( 7.6.1 )
Fix: Translation Issues

30.03.2023 - Ver: 1.1.0
New: Compatible with Elementor
New: Compatible with themes like ( Avada, Divi, Flatsome, WP Ocean )
New: Compatible with latest WP( 6.2 ) & WC( 7.5.1 )
Fix: Minor Issues (related to phpcs)

24.02.2023- Ver: 1.0.12
New: Show attribute name on Shop Page
New: Tooltip Styling
New: Compatible with latest WP & WC
Fix: Minor Issues

27.01.2023- Ver: 1.0.11
New: Share product details on Pinterest
New: Ticked selected attributes terms
New: Compatible with latest WC & WP
Enhance: Variations display in Shop Page

23.12.2022- Ver: 1.0.10
New: Option to remove clear link on shop and archieve page
New: Dynamic color for cross symbol on out of stock product
Fix: Display type field is shown on Attribute Page. If you disable plugin setting, it still exists.
Fix: Only color is shown when we enable "Use Attributes Terms Thumbnails" setting and set display type from attribute page.
New: Compatible with latest WP & WC

22.09.2022- Ver: 1.0.9
New: Share Variable Product using Social Share Button
New: Limit Displayable Product Variation Swatches 
New: Minor Bug fixes
New: Compatible with latest WP and WC   

11.07.2022- Ver: 1.0.8
New: Variation Image Tooltip in Catalog / Archive Page feature Added
New: Show Cross Sign For Out of Stock Variation Swatches feature Added
New: Minor Bug fixes
New: Compatible with latest WP and WC   

14.02.2022- Ver: 1.0.7
New: Change author from MakeWebBetter to WP Swings
New: Notice display of current version for WP Swings
New: Minor Bug fixes
New: Compatible with latest WP and WC 

10.12.2021- Ver: 1.0.6
New: Compatibility with WooCommerce 4.6.1 and WordPress 5.5.1
New: Compatibility with WPML
New: Compatibility with Multisite

18.10.2021- Ver: 1.0.5
Fixed: phpcs/QA/security issues
Fixed: License notification issue
Fixed: License URI
New: Tested up to WC 5.7.1
New: Tested up to WP  5.8.1

29.10.2020- Ver: 1.0.4
Fixed: Swatches selection issue on Safari  browser
Fixed: Compatibility with WooCommerce 4.6.1 and WordPress 5.5.1

02.03.2020- Ver: 1.0.3
Fixed: Update license functionality
Fixed: Compatibility with WooCommerce 3.9.0

15.05.2019- Ver: 1.0.2
New: Text swatch feature Added
Fixed: Compatibility with WooCommerce 3.6.0

13.03.2018- Ver: 1.0.1
Fix: Global swatch issue fixed 

13.12.2017- Ver 1.0.0
Initial Release

Woocommerce Colors & Swatches for Variations WordPress Plugin