Unselect variant radio buttons on product to prevent ordering mistakes

[snowboardernh]

We are using radio buttons and want to keep radio buttons for product variants IE 1. for Size and 2. for color.

The issue is, we don't want to use drop downs for visual reasons, We also don't want the variant to autoselect the first size and color on page load.   When the first size and color are autoselected, customers don't fully read and order the wrong item.

I know there are fixes for this by adding dropdowns instead of radio buttons - but not interested in dropdowns.

We would like code that would report back "Please select Size" or "Please select Color" when a customer doesn't make a choice.   I see another shopify site that has this and do like how it operates, so I see that it can be done.   Any suggestions or help would be most appreciated.

[Guleria]

Hello,

Yes its possible but little hard to explain how.
You can simply use JS to un-select radio onload

$('.classname').prop('checked', false);

Rest about adding text over radio  and make default price blank unitll variant selected.  
You can use existing logic which is used for select-box.
If you still not sure how, you can contact me through email and we'll discuss further.
Thanks
 

[snowboardernh]

Guleria;

Yes I tried this, however this just visually un-selects the buttons, and you can still add to cart without making a choice.  Correct?

[Guleria]

May be  but if this is issue you can change or disable add to cart button onload.
As I know when we implement same thing with selectbox this add to cart button behave same, I mean add to cart disable and show Make selection first.

[snowboardernh]

Thanks for the quick replies, but not the fix we are looking for.    We know it is possible loot at firstlite dot com site.

[Guleria]

Yes,I also know its possible but need customization.