I have a button in Woocommerce, which is to add to the cart. It will sensibly only add to the cart if the relevant options have already been chosen. Until then, the button is disabled:

<button class="single_add_to_cart_button button alt" type="submit"
    title="Select product options before adding this product to your cart."
    >Add to cart</button>

By default - nothing happens when one clicks on the button, because it's disabled, but it might be confusing to a user seen as there is no feedback.

What I want to do, is have the title popup as an alert when this happens.

I have tried the following jQuery function, added in on the custom script option of the theme:

(function($) {
  "use strict";
    var isDisabled = jQuery(this).is(':disabled');
    if (isDisabled){

But nothing is triggered and there is no alert. I have also tried replacing the jQuery with $, but that doesn't work.

UPDATE also tried this:

  jQuery(".variations_button").on("button.single_add_to_cart_button[type=submit]","click", function(){
        var isDisabled = jQuery(this).is(':disabled');
    if (isDisabled){

closed as off-topic by Mark Kaplun, Dave Romsey, cjbj, birgire, Howdy_McGee Sep 27 '16 at 14:27

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.


Disabled elements don't fire mouse events, so you have to wrap a div around the button and catch the event.

  • Thanks, interesting. But even if I use the div around it, the event is on the [disabled] button itself - so how do I track the event? – kneidels Mar 22 '16 at 17:01
  • Added another attempt in the question. – kneidels Mar 22 '16 at 17:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.