Changing Webflow's E-commerce variant select style to radio buttons

Design help Custom code
1

Hi there,

I’m trying to swap the default variant selector, and use radio buttons instead (since it’s easier to see which product options available).

I used some custom jquery code from here: Edit fiddle - JSFiddle - Code Playground

and I was able to pull the options from the selection, and turn it into radio buttons.

Here’s a link to the product page: https://funksjonsutstyr.webflow.io/product/dania

Read only link: https://preview.webflow.com/preview/funksjonsutstyr?utm_medium=preview_link&utm_source=designer&utm_content=funksjonsutstyr&preview=fc6d34d6e459d81065dd6e2faa8ebeea&pageId=5dcbf4a8cb881d7a11eeabe2&itemId=5dd405eefa230970ca480453&mode=preview

It’s working, however, when I select an option, the selector changes, but the product variant doesn’t get updated.

I guess I just have to add a click trigger somewhere, but I got really stuck here.

I’m still a newbie when it comes to jquery and js in general.

Please help if you can :slight_smile:

1 Like
2

Hi,
I managed to implement this on a client project,
I also came across the same problem when updating the select field,
Basically we need to trigger change event of the select field right after updating it, you need to do this with vanilla JS,
jQuery’s trigger(“change”) can’t do it.

selectElement.value = "new value" // update select field's value
setTimeout((el)=>{  // trigger change event of the select field.
  e=document.createEvent('HTMLEvents');
  e.initEvent('change',false,true);
  el.dispatchEvent(e)
},0, selectElement)
1 Like
3

Hi Kaleem,

I’m currently trying to set this up on our site but I’m having some difficuly going through the code.
Can you expand a bit on how you were able to get this to work?

Any help you can offer is much appreciated! :slight_smile:

4

Hi,
Have you setup code to update the products select fields (variant options)?
Where exactly you need help?

5

Thanks for getting back!

No I haven’t got any code set up.
Instead of radio buttons I’ve got three link blocks that I would like to use to control the variation that is selected and was hoping the above would do the job but I’m a bit lost with it.

I’ve also been trying to use the code here to change the variation but haven’t had any luck.

Here’s the page I’m working on at the minute >> Webflow - STAND

6

Radio buttons or links are not necessary you can do it even with a div element, but you need JS to link the click event of the source element (link block in your case) to the select element.

7

Yes this is where I am struggling as I’m not very experienced with JS.
I can assign an id to the link blocks but that I don’t know how to take the click event and make it change the selected variant. :confused: