Custom Fields - Utilizing Images (CSS?)

To whom it may concern,

I've been making a custom T-shirt website.
The clients are already able to pick out what size they want by a custom field drop down.
Now I wanted to make it so they can also pick what type of shirt they want the branding on.
For example collar shirt, v-neck, tank top or sweater.

I've made this with the custom fields using the image mode, however it comes with these ugly radio buttons that I need to get rid off.
I just want the client to be able to click in the picture of which type of shirt they want and once they click on this picture it highlights it. I don't want to use those radio buttons.

Here's a link to what it looks like atm:

http://horuscamisetas.com.br/index.php/ ... ism-detail

As you can see the radio buttons really mess up the design. I want them to disappear! lol...

I'm sure it's not that hard to make this change, probably just a CSS change?

While we are here I wanted to ask for help with another thing, if you see the custom field "Tamanho" which means size.
I wanted it so that when there's no additional charges instead of saying +R$0,00 I don't want it to say anything.

Thank you so much for your time!

Hi

There is some kind of error in code which makes Your request impossible.

Code: Select all

<input id="301" type="radio" name="customPrice[1][30]" value="936" checked="checked">
<label class="other-customfield" for="301">
<input id="301" type="radio" name="customPrice[1][30]" value="937">
<label class="other-customfield" for="301">
<input id="301" type="radio" name="customPrice[1][30]" value="938">
<label class="other-customfield" for="301">
<input id="301" type="radio" name="customPrice[1][30]" value="939">
<label class="other-customfield" for="301">


As You can see all labels and buttons has the same ID and FOR attributes, so clicking any image will sellect first button. You need to contact VM support to fix this first than removing radio buttons will be possible with code like:

Code: Select all

.product-field-type-M input[type="radio"] {
position: absolute;
top: -999em;
}


I read that the ID is supposed to be the same. They`re all under the same ID from the custom field but with different values.
If you purchase the product you will see that they differ and the picture you chose is the one in the confirmation.

I'm just trying to change the style so when you click on the type of shirt you want it highlights the picture. Or if that's too complicated just create a red border around the picture that is supposedly chosen.

Hi

To select a value You just need to have same name="", but id="" cannot be same even for 2 elements. It's against HTML rules and will give a validation error. Also label for ratio button is described by id="" and for="". for="" have to be same as the id="". When it works well than clicking label (image of shirt in Your case) selects a ratio button. If You have multiple labels linking with same id="" than licking any image will select same ratio every time. This have to be fixed before hiding ratio buttons.

Luckly I have some time today, so please send me an access to ftp so I'll fix it instead of VM developers.