How do I make a product page with image radio buttons?

I’m using the Hestia theme on a local site that I’m working on. I’m trying to build a product page with woo commerce. All seems well, drop down menus work just fine. However, I’d like one of my custom variations to be a menu where you can make options by clicking on one of 3 pictures, which should not change the price. I’m using the Product Options for WooCommerce plugin to make my custom selections.

For example, in HTML, the code would be:

<style>
input[type=radio] {
  display: none;
}
</style>
<input type="radio" name="radio_pic_menu" id="option-1" value="Option1selected"/>
<label for="option-1">
    <img src="/pic1.png" />
</label>

<input type="radio" name="radio_pic_menu" id="option-2" value="Option2selected"/>
<label for="option-2">
    <img src="/pic2.png" />
</label>

<input type="radio" name="radio_pic_menu" id="option-3" value="Option3selected"/>
<label for="option-3">
    <img src="/pic3.png" />
</label>

I have made attempts at just putting the HTML in the label field, although that doesn’t work. It results in there being a radio button with no label with it.

It appears that the “Variation Swatches and Photos” plugin would do what I’m trying to do, however, I’m looking for a free option. That plugin alone seems to be 100 bucks.

That said, do I need another plugin for this? If so, what plugin? If I can do it with what I already have, how can I go about doing this? Thank you.

• This topic was modified 5 years, 2 months ago by jwestinghouse.
• This topic was modified 5 years, 2 months ago by jwestinghouse.
• This topic was modified 5 years, 2 months ago by James Huff.