Scenario:
The pre-order product has multiple variants, and the default first variant is not set to pre-order.
For example, the Product T-shirt has the following variants: S, M, L, XL, XXL, and pre-order is enabled only in L and XL. After checking on the live product page, selecting the L and XL variants didn't change the "Add To Cart" button to the "Pre-Order" button.
Solution:
The system requires the default product (first variant) to have the pre-order settings enabled. You just need to turn on the pre-order on the first variant but don't need to enable overselling if the variant does not need to display as a pre-order if you are using Method 2 for pre-order. Once you enable the pre-order with overselling disabled, it will not show the Pre-order button in the first variant, and it will fix the issue.
Reason:
Upon initial load, the app checks the active product/variant to see if it has been enabled for preorder; if not, then it does not load other functions. If yes, then it loads other functions necessary for our app feature. Technically, our app gets loaded/called once every page loads. So usually, the theme reloads the page after switching to a variant.
For a specific theme, it gets loaded via some AJAX way (not reloading the page), which means our app script is not loaded again (which happens after the page loads only). Now, our app can listen to these changes in an AJAX way, but it has to load its full script, which does not happen if the first/default variant is not “preorder enabled".
This is because, as mentioned, our app script does not fully load all scripts if the product or variant is not enabled for preorder to avoid clutter in the code by loading unnecessary codes. The first/default variant can still not be in full preorder mode (oversell is not enabled), but it has to be enabled for preorder for our script to be loaded.