Support InnovativeWP Support InnovativeWP
  • Home 
  • Forum 
    • Forums 
    • Ask Question 
  • Blog 
  • Important 
    • About Us 
    • Contact 
    • Sign in 
    • Sign up 
Pricing
Support InnovativeWP Support InnovativeWP
Pricing
Support InnovativeWP
  • Home 
  • Forum 
    • Forums 
    • Ask Question 
  • Blog 
  • Important 
    • About Us 
    • Contact 
    • Sign in 
    • Sign up 

Swatches & Images

  • rc6About Plugin
  • rc16Demo
    • Product Demo
    • Video Demo
    • Additional Gallery Images
    • Variation Swatches
    • Gallery Settings
  • rc9Installation
    • WordPress Manual Installation
    • FTP Installation
  • rc12Setup
    • Basic Settings
    • More Basic Settings
    • Designs
  • rc10Gallery Images
  • rc13Global Setup
    • Attribute Setup
    • Image Variation
    • Color Variation
    • Label / Button Variation
    • Dual Color Variation
    • Radio Button Variation
  • rc14Custom Setup
    • Attribute Setup
    • Image Variation
    • Color Variation
    • Label / Button Variation
    • Dual Color Variation
    • Radio Button Variation
  • rc5SEO setup
    • Site Speed Settings
    • Sharable Links
  • rc15Additional Features
    • Enlarging Variations
    • Tooltips
    • Stock Notice
    • Limiter
    • Filter
    • Variation Names
    • Shop / Archives Page
  • cloud1Common Mistakes
    • Not setting up images
    • Infinite Scroll & AJAX
    • Caching
  • SupportFAQs
  • fun fact 5CodeCanyon
    • Button Swatches
    • Color Swatches
    • Dual Color Swatches
    • Image Swatches
    • Quick View Support
    • Dropdown Swatches
    • Vertical Product Gallery
    • Horizontal Gallery
    • Gallery Size
    • Gallery Sizes based on Devices
    • Thumbnail Image Numbers
    • Animated Preloaders
    • Auto-Playing Gallery
    • Arrows On Gallery
    • Zoom Images
    • Zoom Button
    • Product Type Disabler
    • Images on Archives
    • Swatches Shape
    • Automatic Dropdowns
    • AJAX Variation Loader
    • Out of stock disabler
    • Stock Info
    • Stock Info on Archives
    • Attribute Name
    • Animations For Not Available
    • Swatches Dimensions
    • Swatches Colors
    • Transient Caching Control
    • Swatches on Archives Page
    • Add to Cart Button Customizers
    • Swatches Alignment
    • Swatches Sizes
    • Single Variation Visibility
    • Single Variation Images
    • Dropdowns Mixing
    • Dropdowns on Archives
    • Text Tooltips
    • Image Tooltip
    • Sharable Links
    • Archives Pages
    • Filters
    • Caching
    • Migration From Other Plugins
    • Global Settings VS Custom Settings
    • Compatibility
    • Change Prize Range On Variation Selection
    • Tooltip Text Customizing
    • Image Flip Archives
    • Import / Export Variation Swatches
    • Hidden Clear Variations Button
    • Gallery Slider
    • Product Video (Youtube, Vimeo, Self Hosted)
    • Limiter

Swatches & Images

  • rc6About Plugin
  • rc16Demo
    • Product Demo
    • Video Demo
    • Additional Gallery Images
    • Variation Swatches
    • Gallery Settings
  • rc9Installation
    • WordPress Manual Installation
    • FTP Installation
  • rc12Setup
    • Basic Settings
    • More Basic Settings
    • Designs
  • rc10Gallery Images
  • rc13Global Setup
    • Attribute Setup
    • Image Variation
    • Color Variation
    • Label / Button Variation
    • Dual Color Variation
    • Radio Button Variation
  • rc14Custom Setup
    • Attribute Setup
    • Image Variation
    • Color Variation
    • Label / Button Variation
    • Dual Color Variation
    • Radio Button Variation
  • rc5SEO setup
    • Site Speed Settings
    • Sharable Links
  • rc15Additional Features
    • Enlarging Variations
    • Tooltips
    • Stock Notice
    • Limiter
    • Filter
    • Variation Names
    • Shop / Archives Page
  • cloud1Common Mistakes
    • Not setting up images
    • Infinite Scroll & AJAX
    • Caching
  • SupportFAQs
  • fun fact 5CodeCanyon
    • Button Swatches
    • Color Swatches
    • Dual Color Swatches
    • Image Swatches
    • Quick View Support
    • Dropdown Swatches
    • Vertical Product Gallery
    • Horizontal Gallery
    • Gallery Size
    • Gallery Sizes based on Devices
    • Thumbnail Image Numbers
    • Animated Preloaders
    • Auto-Playing Gallery
    • Arrows On Gallery
    • Zoom Images
    • Zoom Button
    • Product Type Disabler
    • Images on Archives
    • Swatches Shape
    • Automatic Dropdowns
    • AJAX Variation Loader
    • Out of stock disabler
    • Stock Info
    • Stock Info on Archives
    • Attribute Name
    • Animations For Not Available
    • Swatches Dimensions
    • Swatches Colors
    • Transient Caching Control
    • Swatches on Archives Page
    • Add to Cart Button Customizers
    • Swatches Alignment
    • Swatches Sizes
    • Single Variation Visibility
    • Single Variation Images
    • Dropdowns Mixing
    • Dropdowns on Archives
    • Text Tooltips
    • Image Tooltip
    • Sharable Links
    • Archives Pages
    • Filters
    • Caching
    • Migration From Other Plugins
    • Global Settings VS Custom Settings
    • Compatibility
    • Change Prize Range On Variation Selection
    • Tooltip Text Customizing
    • Image Flip Archives
    • Import / Export Variation Swatches
    • Hidden Clear Variations Button
    • Gallery Slider
    • Product Video (Youtube, Vimeo, Self Hosted)
    • Limiter

Color Variation

Estimated reading: 2 minutes

How To Create Color Variation Swatches For Globally Created Attributes?


If you have variable product in your store and have attribute variation created globally in attributes >> products page. This tutorial is for you.

Step 01: Editing Attribute

Access Products > Attributes. All existing global attributes are listed in the attribute list page section. After installing our plugin, it adds Type field. By default it would show Select under Type title.

As our plugin comes with 4 attribute types: Color, Image, Button and Radio. You can set any of attribute type for your desired attribute.

For demonstration purpose, Pattern attribute has been created. We’ll add Color attribute type for Pattern attribute.

To set color attribute type to Pattern attribute, click on Edit.

After selecting button, it will open attribute editing panel. Select Color Type from the type dropdown.

When attribute type selection is completed, get back to the attribute list page. The Attribute list would look like the following image. Now Pattern Attribute is showing Color type instead of default Select type.

After selecting attribute type,  the frontend of the product would look as per customizations.

To define colors as variations inside the Pattern attribute. Head over to Products >> Attributes. Select Configure terms from Patterns attribute.

After selecting Configure terms, a list of attribute variations comes up. For Pattern attribute, three variations: Blue, Green, and Red variations are listed for me. As those variation have no color defined, they look like the following screenshot.

Edit each variation one by one to add variation color. For demonstration, I am going to select Edit link for Red variation.

From variation edit panel. Select desired color from Color-picker and the update the changes pressing the Update button. For my red variation, I’ve selected red color.

After adding color for entire variations, my variation list page looks like the following screenshot.

And the frontend of my variable product that is connected with global attribute would look like following image.

Video Guide:


How can we help?

A premium WordPress theme with integrated Knowledge Base,
providing 24/7 community based support.

  • Documentations
  • Support Forum
  • Contact Us

© 2022 All Rights Reserved by InnovativeWP