Disable Add To Cart on Variation Change Using contains() function in jQuery - php

Question

I need to Blur ( remove functionality ) of the Add to Cart button globally for product variations which are Out of stock so assume the jQuery contains() function is the best bet but can't get this code to work.
I've tried checking using the outOfStock but can't get it to work.
If the product contains the text Out of stock when the variation option is toggled, i need to prevent the add to cart button from working.
add_action('wp_footer', 'outofstock_product_variation_js');
function outofstock_product_variation_js() {
?>
<script type="text/javascript">
jQuery(function($) {
var addToCartButtonObj = $('.add-to-cart-button');
var outOfStock = $("p.stock.in-stock:contains('Out of stock')");
$('form.variations_form').on('show_variation', function(event, data) {
if ( ! data.is_in_stock ) {
addToCartButtonObj.hide();
} else if ( data.is_in_stock ) {
addToCartButtonObj.show();
}
})
});
</script>
<?php
}
Here's the HTML when the out of stock variation is selected
<div class="woocommerce-variation-availability"><p class="stock in-stock">Out of stock</p>
</div>

Answer 1

The behavior you explained is strange because WooCommerce by default assigns the disabled attribute to a add to cart button of a product that is out of stock.
It is also a bad practice to add <script> tags directly in a function passed to a hook in WordPress, as it can lead to various issues such as conflicts with other scripts, syntax errors, and security vulnerabilities.
That said, my advice is to add something like this vanilla JavaScript code using this plugin https://wordpress.org/plugins/insert-headers-and-footers/
<script>
window.onpageshow => {
const addToCart = document.querySelector('.outofstock button')
if (addToCart) {
addToCart.setAttribute('disabled', '')
}
}
</script>
WooCommerce provides the outofstock class which you can use to select the add to cart button. After that, you can simply use the setAttribute function to disable the button.