This will select the first option for all field types except inputs
NOTE: If the first option has conditional logic, the logic will NOT fire until a new option is selected.
If the first option uses the Image Customizer, the image will NOT change until a new option is selected.
Add class w3-default to fields this will effect
To add the class to a field, select the field and click the blue gear icon, then select Settings:
Add the class w3-default to the CSS Classes field and Save:
Add the following to theme.liquid before closing </head>
<script type="text/javascript">
function fieldAddedCallback(field, element) {
//Image Picker
if(field.type == "imagepicker"){
if(element.hasClass("w3-default")){
var img = $(element).find(".image-picker-item").first();
var value = $(img).attr("data-name");
$(img).addClass("imagepicker-selected");
$(element).find('input[name="properties[Images]"]').attr("value", value);
}
}
//Radio button
if(field.type == "radiobutton"){
if(element.hasClass("w3-default")){
$(element).find(".product-options-radiobutton").first().click();
}
}
//Checkbox
if(field.type == "checkbox"){
if(element.hasClass("w3-default")){
$(element).find(".product-options-checkbox").first().click();
}
}
//Dropdown List & Area Field
if(field.type == "dropdown" || field.type == "area"){
if(element.hasClass("w3-default")){
element.find("option[value='']").remove();
element.find('.product-options-dropdown').change();
}
}
//Color picker
if(field.type == "colorpicker"){
if(element.hasClass("w3-default")){
var img = $(element).find(".product-options-colorpicker").first();
var value = $(img).attr("data-value");
$(img).addClass("colorpicker-selected");
$(element).find('input[name="properties[Colors]"]').attr("value", value);
}
}
}
</script>