Streaming live at 10am (PST)

Trick: setting default option for e-commerce variant

Hello,

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 :slight_smile:

Here is the codepen

HTML

<select id="yourWebflowSelectId">
  <option selected value>Select</option>
  <option value>S</option>
  <option value>M</option>
  <option value>L</option>
  <option value>XL</option>
</select>

JavaScript

(function select() {
  // 🐞 translate the select value
  const selectButton = document.getElementById("yourWebflowSelectId");
  const stringToTranslate = selectButton.options[0];
  stringToTranslate.innerHTML = "Sélectionner";

  // 🐋 set the default select option
  const defaultSelectedOption = selectButton.options[2];
  defaultSelectedOption.selected = "selected";
})();

Maybe that helps someone too :slight_smile:
A.

4 Likes

Hey buddy!
That sounds like exactly what I need actually thank you for this! That said I’m not a dev so I’m unsure on how to implement this. :frowning:

Thank you for your help!

Hello @John_T,

The only thing you need is to add a spcific id to your webflow dropdown menu. For that example, I chose the idyourWebflowSelectId”.

Then, on the page custom code setting, before the end of the body tag, simply copy paste this code:

<script>
(function select() {
  // 🐞 translate the select value
  const selectButton = document.getElementById("yourWebflowSelectId");
  const stringToTranslate = selectButton.options[0];
  stringToTranslate.innerHTML = "Sélectionner";

  // 🐋 set the default select option here: [2] or [3] or ...
  const defaultSelectedOption = selectButton.options[2];
  defaultSelectedOption.selected = "selected";
})();
</script>

Hope that helps !

1 Like

Definitely helps!
thank you @anthonysalamin!!

1 Like

@anthonysalamin sorry to bother you again!
I’m pretty sure I’ve set this up correctly but it doesn’t work so I’m pretty sure I didn’t :joy:.

This is the page custom code:

This is the ID set:
image

But yet on the web it seems like it overwrites the ID?

Not sure why.

put it into the “before the end of the body tag” not the "inside tag … but i tried it, and did not work for me …

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.

works!!! :slight_smile: thx mate

1 Like

mmm I had tried both, but let me try again with this new tips! :slight_smile:
I’ll keep you posted, thank you!

It’s working!! You’re amazing thank you so much!

1 Like

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>

Any ideas as to why this is happening? Thanks!

Link to published page with the issue:
https://www.jessicajory.com/product/diamond-snake-huggies-rg-white-diamonds-ruby-eyes

Read Only link to Webflow project:
https://preview.webflow.com/preview/jessica-jory-jewelry?utm_medium=preview_link&utm_source=designer&utm_content=jessica-jory-jewelry&preview=aeafb1cd214c3fd8e51beda4ee94d187&pageId=5fb9d0e58ab28618f9254b93&itemId=6000ffb32e19202e5d9f305e&mode=preview

Hello @jakelael ,

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>

Hope that helps,
Anthony

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.

Interesting indeed. It must have something to do with the cart. I’ll play around and see if i can figure it out. Thanks for your help.

I wrote a similar code with the same intentions but the same thing happened it selected and moved back to default.

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:

<script>
  var Webflow = Webflow || [];
  Webflow.push(function () {
    // DOMready has fired
    (function select() {
      const selectButton = document.getElementById(
        "option-set-eb14dc41c6d3cb589c79c65b713b3a39"
      );
      selectButton.style.opacity = 0;
      const defaultSelectedOption = selectButton.options[1];
      defaultSelectedOption.selected = "selected";
      selectButton.style.opacity = 1;
    })();
  });
</script>

Haven’t tested it, hope that helps.

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:

<script>
window.addEventListener('DOMContentLoaded', (event) => {
    // DOMready has fired
		 (function select() {
      const selectButton = document.getElementsByClassName("select-field")[0];
      const defaultSelectedOption = selectButton.options[1];
      defaultSelectedOption.selected = "selected";
    })();
  });
</script>

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.

Any ideas why this is happening?

You can check a live product page here: Free To Be Me
Read only link is here: Webflow - Bambini Collections

Thanks in advance for your help!

1 Like