1

As seen in the image below, how can I turn the product dropdown options into selectable images instead? Is there a module for this or does this have to be done via js/css?

enter image description here

1
  • I haven't tried this with Commerce, but some modules will allow you to write HTML directly into the select options. This will break the translation system, but it's worth a shot if your site has only one language. May 29, 2013 at 16:33

2 Answers 2

1

If you need images (not just colored blocks) as commerce product options take a look at commerce_options_as_images

I've created this module and use in on my projects.

2

ok seems that this module does the trick:

https://drupal.org/project/commerce_fancy_attributes

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.

Example usage: 0) Enable this module. 1) Create a Color vocabulary, add a text field called "Color" that will hold hex values. 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). 2) Create several terms with matching hex colors (Black: #000000, White: #ffffff, etc). 3) Add a Color taxonomy_term_reference field to a product type. 4) When you 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".

The Add To Cart form will now show the colors. Of course, imagefields can be used instead of "textfields holding hex values" rendered as images.

1
  • That's the module I'd recommend. Check out commerce kickstart to see an example of configuration
    – pcambra
    Jul 10, 2014 at 16:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.