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

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

Cart 289 sales
Recently Updated


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 latest versions of WP and WC. So, you will never hit a snag. .

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.
  • 1. 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.

    2. 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.

    3. 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.

    4. Attribute Name on the Shop Page

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

    5. 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. .

    6. 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.

    7. 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.

    8. 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.

    9. Configure Attribute Label

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

    10. 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. .

    11. 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.

    12. 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..

    13. 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.

    14. Setup Variation Swatches for WooCommerce

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

    15. 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 Shop and Archive Page.
  • Benefits of WooCommerce Color and Swatches for Variations:

    1. With Color and Swatches for variations, you can showcase all variations of your products and give a sorted look to your online store.
    2. Maintain brand uniformity with the customization features for product variation swatches and thumbnails..
    3. Show WooCommerce swatches on the shop page and attract customers instantly.
    4. Increases your sales by making it easier for customers to find product variations.
    5. Define every selected WooCommerce product with global attributes and swatch images
    6. Cut the clutter on the product page using the WooCommerce Swatches limiter.
    7. Expand the product’s reach by generating shareable links for your variation products.
    8. WooCommerce Color Swatches come with different size variations for the product detail page and the shop/archive/category page.
    9. 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.

    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.


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


    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


    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

    Tell us what you think!

    We'd like to ask you a few questions to help improve CodeCanyon.

    Sure, take me to the survey