The javascript for this is really simple:
radiobtn = document.getElementById("theid");
radiobtn.checked = true;
The difficulty will lie in the fact that the id of the element is changing depending on the product. Indeed the product id is used in the radio id.
A convenient option is to use CSS selectors in javascript:
radiobtn =document.querySelector(CSS selectors) .
We want to select the first radio input where the parent is div.controls
radiobtn =document.querySelector(" div.controls> label > input");
radiobtn.checked = true;
For good measure we should check that div.controls exists on the page and that we are on a product page.
if(document.querySelector(" div.controls > label > input")){
radiobtn = document.querySelector(" div.controls > label > input");
radiobtn.checked = true;
}
This query only catch the first radio button custom field. In case we have a second custom field options for our product we need to catch that too. We will use jquery for that purpose to catch the radio button id whatever product page it is set on (remember that the product id is part of the radio button id and that’s the only changing part).
jQuery.noConflict();
jQuery(document).ready(function(){
if (jQuery(“[id$=_885843]”)){
jQuery(“[id$=_885843]”).prop(“checked”,true);
}
});
Repeat the operation for any additional custom fields needed a default check.