Enabling Fancy Attributes in Drupal Commerce 2.x

In Drupal Commerce 1.x, we used the Commerce Fancy Attributes and Field Extractor modules to render attributes more dynamically than just using simple select lists. This let you do things like show a color swatch instead of just a color name for a customer to select.

In Commerce 2.0-alpha4, we introduced specific product attribute related entity types. Building on top of them and other contributed modules, we can now provide fancy attributes out of the box! When presenting the attribute dropdown, we show the labels of attribute values. But since attribute values are fieldable, we can just as easily use a different field to represent it, such as an image or a color field. To accomplish this, we provide a new element type that renders the attribute value entities as a radio button option. This feature is currently available on the development branch and will be in our next release.

In Commerce 2.0-alpha4, we introduced specific product attribute related entity types. Building on top of them and other contributed modules, we can now provide fancy attributes out of the box! When presenting the attribute dropdown, we show the labels of attribute values. But since attribute values are fieldable, we can just as easily use a different field to represent it, such as an image or a color field. To accomplish this, we provide a new element type that renders the attribute value entities as a radio button option. This feature is currently available on the development branch and will be in our next release.

An example would be to use the Color Field module to add a color field to your Color attribute. Note: use the development version of the module, 8.x-2.x-dev.

Adding a Color field to the product attribute.

Then, manage the view display mode for Add to Cart Form and set the color field to the "Color swatch" field formatter.

Finally, you just need to configure the attribute. Change the attribute selection widget to use the rendered option for your attribute.

Editing the product attribute to use the rendered attribute value instead of a select widget.

Now you have an add to cart form that supports color swatches!

Selecting the color using the rendered attribute. Cyan is in this season.

Source: https://drupalcommerce.org/blog/44310/enabling-fancy-attributes-commerce-2x