Use the module "Commerce Fancy Attributes" to add a color and/or size selector to the cart form

This module provides a "Rendered term" attribute mode, that shows the rendered term instead of a radio button (degrades to a normal radio button when JS is off) on the add to cart form.

How to use the module to add a color selector:

  1. Install and enable this module.
  2. Create a Color taxonomy, add a text field called "Color" that will hold hex values.
  3. Go to the "Manage Display" screen of that vocabulary, click the tab called "Add to Cart form - Attribute", enable only the color field (with the label hidden, and using the "Color" formatter).
  4. Create several terms with matching hex colors (Black: #000000, White: #ffffff, etc).
  5. Add a Color taxonomy_term_reference field to a product type (product type, not node type!). Doing so add the color field on the product type, tick the checkbox "Enable this field to function as an attribute field on Add to Cart forms." and select "rendered term" as option of the "Attribute selection widget".
Drupal module "Commerce Fancy Attributes"

Drupal themes to be compared