Is there a way to display the product image as a radio button instead of a select box when selecting a product in a product display?

Question

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

My end goal is this:

Answer 1

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.

Answer 2

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

https://drupal.org/node/171213

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_label.addClass("button1_off");
myImageButton1.attr({'checked' : false});

myImageButton1_label.click(function(event){

if (myImageButton1.attr({'checked' : true})) {
myImageButton1_label.removeClass("button1_on").addClass("button1_off");
myImageButton1.attr({'checked' : false});
}

else {
myImageButton1_label.removeClass("button1_off").addClass("button1_on");
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/