I have a website on WooCommerce built with Elementor. What I would like to happen on the single product page is for the "add to cart" button to change its label to "pre-order" only when certain sizes (variants) are selected. It's a shoe website, and I would like a user, when selecting, for example, size 38, for the button label, which was previously "add to cart," to change to "pre-order." I'm not sure how to go about changing this, as I'm not very experienced with coding. I have already tried downloading plugins, but they don't allow me this flexibility to modify the text based on user action. Can anyone help me?
Below, I copy the code that I tried to use on my website but without success
document.addEventListener('DOMContentLoaded', function() { document.querySelector('form.variations_form').addEventListener('change', function() { var variation_id = document.querySelector('input[name=variation_id]').value; var variation_is_sold_out = document.querySelector('.single_variation_wrap .woocommerce-variation-availability .woocommerce-variation-availability').classList.contains('out-of-stock'); if (variation_id && variation_is_sold_out) { document.querySelector('.single_add_to_cart_button').innerText = 'Sold Out'; } else { document.querySelector('.single_add_to_cart_button').innerText = 'Aggiungi al carrello'; } }); });If it can be useful, below is the link to a product page, where I would like the button to change its wording from "Add to Cart" to "Sold Out" or "Pre-order" depending on the selected variant. If necessary, it's also fine to manually insert the IDs of individual variants within the created code, the important thing is that it works.
Additionally, I would very much like for all unavailable product variants to change the button label from "add to cart" to "sold out." Perhaps this procedure is simpler, but I haven't been able to do it either.
I've tried various codes found online, but none of them worked.
this is the product page website -> https://www.alessandramilano.com/product/mirto-black/