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

Dual Color Variation

Estimated reading: 4 minutes

How To Create Multi / Dual Color Variation?


Define Attribute Type

To create multi/dual color variation swatches globally, navigate to Products > Attributes. Fill  Name field with your desired product attribute name. example: DualColor.

Leave the Slug field empty. The system will create attribute slug on its own. Select Color attribute type from the type dropdown. Press Add Attribute button to continue the process.

After pressing Add Attribute button, you will notice a list on the right side. In the list, you can find DualColor attribute there.

Create Variation for DualColor Attribute


From the attribute list table, you have to press Configure terms link to create variations from DualColor attribute row.

In this list table, you will find all your product attributes. All attributes come with Configure terms link. So, whenever you need to add new or edit existing variations you, you have to go in this way.

Now, we’ll create Red&Blue and Green&Black variations for DualColor attribute.

Creating Attribute Variation is the same as creating Attribute itself. Fill the Name field with desired variation name, keep empty Slug field empty. Pick your desired Primary color and select Yes from is Dual Color option. Afterward, Secondary Color option comes up. pick the secondary color from color-picker. Press Add new button to save the changes.

For demonstration purposes, I’ve filled Name field with Red&Blue title. Added Red color for primary and Blue color for secondary color options.

I’ll do the same for the Green&Black variation. After creating all your attribute variations, you can a variation list on the right side of the product variation creating form. So, you can see my created variable product variations.

Step 03: Enable WooCommerce Dual Color Swatches On Variable Products

To link variations with variable products,
Create a variable product and then head to the Products > Add new. Give a name to your variable product and add some product description. Make sure you have variable product select from Product Data option.

Next, from the Attribute tab, press on Custom product attribute dropdown. This dropdown list will reveal with all available product attributes created globally.

Select your desired Attribute from this list. In my turn, it’s DualColor attribute. Select DualColor attribute, press Add button.

After Adding Dual Swatches, you can see the following screen. From here, you add all your attribute variations at once, pressing Select All button.

You can see in the following screenshot, I’ve my two variations: Green&Black and Red&Blue for DualColor attribute are there. Check Used for variations and press the Save attributes button

Get inside the next section called Variations. Click Add Variation dropdown. You can see Create variations from all attributes option comes up. Select the option and press the Go button.

After pressing the Go button, you can attribute variations are list one after another in accordion style. You can notice, my two attributes Green&Black and Read&Blue variation are there in the screenshot.

Now, these variable product variations will not appear in the product frontend without defining prices. For demonstration purpose, I’ll add price and feature image for Green&Black variation.

I’ve done the same for the Red&Blue variation. Click on the Save Changes button to update the changes. Now publish the product and get the product frontend

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