Unselect variant radio buttons on product to prevent ordering mistakes

Highlighted
Tourist
8 0 2

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.

1 Like
Highlighted
Shopify Partner
828 170 191

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
 

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Tourist
8 0 2

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?

0 Likes
Highlighted
Shopify Partner
828 170 191

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.



Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Tourist
8 0 2

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

0 Likes
Highlighted
Shopify Partner
828 170 191

Yes,I also know its possible but need customization.


Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes