How do I add a color hex code field to a product attribute using drupal commerce 2?

Question

How to add a color hex code field to a product attribute using drupal commerce 2

I can add the form field but do not know how to create the field type: color or the corresponding hex code.

Thanks

Answer 1

For anyone else grappling with this issue in future here is what I did:

****How to add a color hex code field to a product attribute using drupal commerce 2****

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

Use the Color Field module to add a color field to your Color attribute. https://www.drupal.org/project/color_field

Install with Composer: $ composer require 'drupal/color_field:2.x-dev'

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Product Attributes >> Add Colour Attribute >> Manage Fields

Add:

Label: Color Hex Code

Machine Name: field_color_hex_code

Field type: color

DEFAULT VALUE The default value for this field, used when creating new content.

COLOR HEX CODE

Color #D3D3D3

Opacity 1

Record Opacity Ticked

FIELD SETTINGS TAB

Format storage #123ABC Choose how to store the color.

Allowed number of values: Limited 1

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Product Attributes >> Add Colour Attribute >> Manage form display

FIELD WIDGET

Name Textfield textfield size: 60

Color Hex Code Color default No placeholder

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Product Attributes >> Add Colour Attribute >> Manage display

FIELD LABEL FORMAT

Color Hex Code Hidden Color Swatch Square Width: 40 Height: 40

Note: Remember to change the attribute selection widget to use the rendered option for your attribute.