Product Availability not updating when changing variant

Technical Q&A

Topic summary

Main issue: Product availability text does not update when changing product variants unless the page is refreshed. Store uses a custom “backorder” availability option to avoid confusion with “out of stock.” SKU (Stock Keeping Unit) and price update correctly.

Evidence: A screen-cast video and a code screenshot are provided; these attachments are central to understanding the behavior. No browser console errors were observed.

Analysis: The provided code appears to render availability only on initial page load and lacks JavaScript (JS) interactivity to react to variant changes. The theme’s variant selection likely triggers an event that updates price/SKU, but availability is not hooked into that event.

Recommended actions:

  • If the theme advertises variant-aware availability updates, report a potential bug to the theme developer.
  • If this is a customization, add JS that listens to the theme’s variant change event and updates the availability text accordingly, similar to how price/SKU are updated.

Current status: Unresolved. Another user with the Simple White theme reports the same issue and asks for a resolution or code snippet.

Summarized with AI on January 22. AI used: gpt-5.
1

Hi everyone!

I am having an issue where the product availability text does not update when changing variants. It only updates if you select a different variant, and then refresh the page. My store allows customers to order products when they are out of stock, and with that, I had to add a new “availability” option, called “backorder” so customers won’t be confused seeing out of stock.

Here is a video showing what I am referring to: again, the availability does not update unless the page is refreshed.

https://www.screencast.com/t/KgqPTBee

Here is the code that controls that block on the product page:

Code.png
Code.png1892×395 89.9 KB

The SKU and the Price both update perfectly without having to refresh the page.

I feel as though I am missing something small, that will fix this issue.

Thanks!

2

Please don’t paste screenshots of code, paste relevant text snippets into the code format button, thank you.

If your theme explicitly states it has this feature and it explicitly says it works with variant selection, or the demo stores work with variants ,then you need to contact the theme developers to report a bug.

If this is a customization the code provided seems to only render that exact logic on page load there is no interactivity(javascript code) shown.

Looking at the website shows no obvious console errors so I assume no javascript was customized so far.

To also update the quantity in addition to the price and sku when changing variants; you will likely need to either update the variant selection logic , or make a function that triggers on a specific javascript event that wildly varies between theme.

If you need this customization contact me info in signature. Please include store name ,theme name, and problem description(or this post link).

FYI: the website has ALOT of popups and nags for new visitors make a habit of regularly using incognito browsing to keep aware of apps accruing in the new customer experience.

3

Hello,

I am having the exact same issue as you show in your video. Was there a resolution to this issue or code you’d be willing to share to help?

We are using Simple White theme.

Jason