Color Variation

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:

---