Disable Add to Cart button when the Price is zero with jquery by adding class-CodePudding

I have already search through stackoverflow from top to bottom no answer was found.

Note: its add to cart button but i changed the text to "place order" I am trying to disable to add to cart button like adding a class to it to disable the button because if i hide the button it will also hide the checkboxes above which are attached with add to cart button.screenshot but its not working for me, its not disabling the button when price gets $0 maybe its the code or any other conflict. here is the jquery code i am adding to wordpress head in theme editor and calling through

 <body onload="hideCart()">

and the jquery code is

<script>
function hideCart() {
    var value = jQuery('.price').text();
    if(value === '$0') {
        jQuery('.single_add_to_cart_button').addClass("disable");
    } else { 
        jQuery('.single_add_to_cart_button').removeClass("disable");
    }
}
</script>

screenshot2

CodePudding user response：

First off, the correct class is disabled. After changing that, it works on my machine.

If that doesn't work, have you debugged it yet? Go to a product page, open your developer console (F12 on Chrome, go to Console tab), type the following, and press Enter:

var value = jQuery('.price').text();
console.log(value);

You should see the price text. From there you can test it further.

But, like Martin says, the proper way is to enqueue your JavaScript file, and, for variations, add an eventListener on the show_variation event. For simple files you current code should do the job, after fixing the class name.