I have a product with three radio button options, and I want to replace those radio buttons with clickable images. This is how those radio buttons appear in the code:
<div class="form-radios" id="edit-attributes-51">
<div class="form-type-radio form-item-attributes-51 form-item">
<label for="edit-attributes-51-136" class="option radio"> <input type="radio" class="form-radio" value="136" name="attributes[51]" id="edit-attributes-51-136">Red, +$3.00 </label>
</div>
<div class="form-type-radio form-item-attributes-51 form-item">
<label for="edit-attributes-51-135" class="option radio"> <input type="radio" class="form-radio" value="135" name="attributes[51]" id="edit-attributes-51-135">Green, +$5.00 </label>
</div>
<div class="form-type-radio form-item-attributes-51 form-item">
<label for="edit-attributes-51-137" class="option radio"> <input type="radio" class="form-radio" value="137" name="attributes[51]" id="edit-attributes-51-137">Blue, +$10.00 </label>
</div>
</div>
Instead of the radio button and label, I'd like to simply display a image color swatch. How can I accomplish this? I assume I'd need to somehow reference the "for" value in the "label", but I'm not sure how to do so. I'd prefer not to go the "nth child" route, but I can if I need to.
Thanks!