WooCommerce Colors And Swatches for Variations - Display swatch on Shop, Archive and category pages
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:
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.
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.
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. .
8. Social Sharing of Variation Products
Allow the social share buttons for Facebook, Pinterest, Twitter, Gmail, and Whatsapp for customers to share variable product details on social sites.
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.
11. Configure Attribute Label
Set the attribute label as Tooltip, Above Swatches, or Over Swatches.
12. Show Tooltip for WooCommerce Color and Image 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
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.
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.
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