Currently im setting up my Commerce and I want to be able to replace the default select box on the product display. This select box only comes up when there are multiple products referenced. I want each option in that select box as the Product's Image Field. Yes I can use the radio button, but you can only output the title of the product in the radio selection box.

Currently I'm only getting this when i select radio button as the formatter

enter image description here

My end goal is this: enter image description here

2 Answers 2


If you use a taxonomy term reference field as your product attribute field to define the various options there, you could add an image field to the terms where you could upload the related image. Then using the Commerce Fancy Attributes module, you could choose to display those images instead of a radio button list. It requires some additional configuration, but you can see a quick example of this in action inside Commerce Kickstart 2.x.

  • yes i did that, but the images associated with the taxonomy term is stuck on that image only. Say I have a iPhone and a 3DS system, the 2 screens look totally different and I cant use a cracked screen iphone image on the 3DS product. Yes technically each device shares the same repair issue "cracked screen", but they cannot share the same taxonomy image. how would you go about that? Jun 4, 2013 at 19:50
  • Oh, for that I'd just say good luck. ; ) Nah, I'd just go with the manual suggestion above and put the images on the product entity. Jun 4, 2013 at 19:56
  • yea i have the images on the product entity, but there's no way to use that image instead of the taxonomy image thats associated with it. thanks for the help so far! Goooo Ryan! Jun 4, 2013 at 20:19
  • seems like i have to modify the add to cart form on the product display to have it show an image instead of the product title in the select box. what hook would that be!? or is there a module for that already. Jun 4, 2013 at 21:28
  • since i can't use fancy attributes. I went the route of doing it via views. view results here: drupal.stackexchange.com/questions/75548/… Jun 7, 2013 at 23:42

You could do this through jQuery easily. All you do is add your own jQuery file through your theme info file:


Then write some jQuery that adds a css class to the label when the page loads up and handles the clicking of the checkboxes/radios like:

(window).load(function() {
var myImageButton1_label = $('#some_drupal_label_ID');
var myImageButton1 = $('#some_drupal_checkbox_ID');
myImageButton1.attr({'checked' : false});


if (myImageButton1.attr({'checked' : true})) {
myImageButton1.attr({'checked' : false});

else {
myImageButton1.attr({'checked' : true});


Then hide the actual radio button with CSS and style your label to be an image. Then jQuery will handle the switching of classes and checking those radio buttons for you. Note this is a simplified example so you'll need to expand upon this for your needs. This an older article, but appears to be relevant: http://tutorialzine.com/2011/03/better-check-boxes-jquery-css/

Your Answer

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

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