I just wanted to share basic JavaScript lines I wrote to help set a default option for the select dropdown button of the webflow e-commerce. At the moment, if I’m not mistaken, the only default Webflow selected value is the “Select” button… The only thing you need is the id of your select button and you’re good to go
Thank you for your response Wilbourge. Yea I had tried both actually, but good to know that I’m not the only one. There must be a trick. Did you find another way maybe?
@John_T, from what I see on your screenshot, you placed the script in the head tag. You should place the script in the body tag like @wilbourge suggested.
Ho, and my bad… you are right the id is being overwritten by webflow for some reason. Simply go in the code (like on your screenshot) copy the long webflow attributed id and paste it instead of “yourWebflowSelectId” in my script snipet.
Good work. Its a shame this isn’t standard already, nobody wants an extra step to checkout. It also does something weird with the pricing, web flows default shows the price and currency but options only show the price with no currency symbol. Or maybe I’m missing something.
Thanks for posting this solution as I was looking for a way around this issue. However, i’ve followed the steps (and double checked everything) but in my published page, it very briefly shows the selected variant in the drop-down menu but then quickly changes to showing the word “Sélectionner” instead.
I have two drop-down menus for two variant options. I’ve included two instances of the code in the body tag but this is happening even when I only use one instance of the code:
<script>
(function select() {
// 🐞 translate the select value
const selectButton = document.getElementById("option-set-eb14dc41c6d3cb589c79c65b713b3a39");
const stringToTranslate = selectButton.options[0];
stringToTranslate.innerHTML = "Sélectionner";
// 🐋 set the default select option here: [2] or [3] or ...
const defaultSelectedOption = selectButton.options[1];
defaultSelectedOption.selected = "selected";
})();
</script>
<script>
(function select() {
// 🐞 translate the select value
const selectButton = document.getElementById("option-set-b95a10b920dee0417f9385825f4f9b37");
const stringToTranslate = selectButton.options[0];
stringToTranslate.innerHTML = "Sélectionner";
// 🐋 set the default select option here: [2] or [3] or ...
const defaultSelectedOption = selectButton.options[1];
defaultSelectedOption.selected = "selected";
})();
</script>
You could try this code where I explicitly tell option [0] (which is the default “please select an option”) to have its selected attribute value set to none and the option [1] (which is the “rose” option) to have its selected attribute value set to “selected”.
<script>
(function select() {
// 🐞 translate the select value
const selectButton = document.getElementById(
"option-set-eb14dc41c6d3cb589c79c65b713b3a39"
);
/*
const stringToTranslate = selectButton.options[0];
stringToTranslate.innerHTML = "Sélectionner";
*/
// 🐋 set the default select option here: [2] or [3] or ...
const defaultSelectedOption = selectButton.options[1];
selectButton.options[0].selected = "";
defaultSelectedOption.selected = "selected";
})();
</script>
Thanks, Anthony. It’s better because it no longer shows “Sélectionner” but it is still only briefly showing my chosen options (rose, rubies) when the page first loads, but almost immediately it changes to showing the “select” button (in my case, “Gold Color” and “Eye Color”). It’s almost like it does the script, and then reverts to not using the script. I very much appreciate your help in this. Any other ideas?
Interesting, I’ve copy pasted from your site the select code exactly as it is on your published page and combined it with the javascript on Codepen, it seems to work there.
Alternatively, you could try the following:
Add the javscript code in the header custom code section instead of the footer custom code section and wrapp it within the Webflow wrapper like so:
Hey everyone - this thread was quite useful though am still experiencing issues. I ran into the issue that each individual product page has its own <select> element ID, so I had to use the getElementsByClassName method as shown below:
I can see it runs when the page loads, and then it seems that Webflow finishes loading and the ‘selected’ state reverts back to the Webflow default selected state.
.
