Attributes (colors e.g.) as images in product display ?

For my Drupal 7 and Commerce project : http://makeupcosmeticsdiscount1euro.eu I needed to find a way to replace the radio-buttons by color-images.

This is the result :

Erwin Derksen for http://www.burorader.com helped me to build a module for that function.

First of all. The product gets an Image, representing the color of the product. (field_image_color) and a Term reference to be able to link the color-image to the product in the Product Display (field_product_color) .

The attribute selection widget in the Term reference setting must be set to Radio buttons.

This is a part of the product creation page where I add the color-image and the color-name.

That's it for the settings.

The module.

You can find the files on http://drupal.org/node/1180016#comment-4952374

Implements hook_form_FORM_ID_alter(). See http://api.drupal.org/api/drupal/modules--system--system.api.php/function/hook_form_FORM_ID_alter/7 .

This hook alters the add-to-cart forms on product display pages by adding javascript to a set of radio buttons that define the possible colors on a product display. This can be used to alter the display of the set of radio buttons.

The steps:

• Retrieve the product-id's.
• Load all the active products intended for sale on this form.
• Load all the terms.
• The radio buttons are displayed based on the term-id's, so we have to couple the images (in the product) to the term-id's.
• Add class and javascript to radios.

The attached files are custom made for http://makeupcosmeticsdiscount1euro.eu so maybe needs some adjustments to be used on other Commerce sites.

CSS

Last step is to use css to put the images the way they need to be placed on the page.