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? 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:
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/