How to change bundle widget variant programatically

Some bundle widgets include variant selectors—typically rendered as <select> HTML elements—which allow visitors to manually change the bundle product variant.

If you want to change the variant programmatically using JavaScript, we provide a simple API using the CustomEvent interface.

How to Use

You can trigger a variant change with the following code:

const changeVarEvent = new CustomEvent('variant:changed', { 
  detail: { 
    productId: 9505523597609,
    newVariant: 49355052843305
  }
});

window.dispatchEvent(changeVarEvent);

How It Works

• This event targets all bundles on the page that contain the specified productId .
• If the newVariant ID is available in those bundles, the variant will be updated automatically.

Note: This API currently supports Quantity (version 2) and Standard (version 2) bundle types. Support for additional bundle types is coming soon.

If you need help implementing this or have any questions, feel free to contact us at [email protected].