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.

2 Likes