0

I am trying to disable the 'Proceed to Checkout' button when the cart quantities are changed. To do this, Im using jQuery to inject some CSS to the proceed button (see below).

The code I am currently using works but it only works for the first time the cart is updated. If the user then edits their cart for a seconds time, the priced to checkout button stays active.

The tricky part to this was targeting the correct elements as is seems as though the IDs are dynamically created by WooCommerce so they change each time the page is loaded.

// Disable proceed button
 $( ".product-quantity > .quantity > input" ).change( function() {
  $( 'a.checkout-button' ).css({
   'pointer-events': 'none',
   'opacity': '0.25'
  });
 });

 $( '.actions > input[type="submit"]' ).click( function() {
  $( 'a.checkout-button' ).css({
   'pointer-events': 'auto',
   'opacity': '1'
  });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0">
  <thead>
    <tr>
      <th class="product-remove">&nbsp;</th>
      <th class="product-thumbnail">&nbsp;</th>
      <th class="product-name">Product</th>
      <th class="product-price">Price</th>
      <th class="product-quantity">Quantity</th>
      <th class="product-subtotal">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr class="woocommerce-cart-form__cart-item cart_item">
      <td class="product-remove">
        <a href="http://mowgli.dev/basket/?remove_item=0039818e7547d3314205171d9ec650da&amp;_wpnonce=09541aba5e" class="remove" aria-label="Remove this item" data-product_id="166" data-product_sku="">×</a>
      </td>
      <td class="product-thumbnail">
        <a href="http://mowgli.dev/product/gift-cards/?attribute_choose-value=%C2%A3100.00">
          <img src="//mowgli.dev/wp-content/uploads/2017/09/PR-Gift-Card-180x180.png" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" srcset="//mowgli.dev/wp-content/uploads/2017/09/PR-Gift-Card-180x180.png 180w, //mowgli.dev/wp-content/uploads/2017/09/PR-Gift-Card-150x150.png 150w, //mowgli.dev/wp-content/uploads/2017/09/PR-Gift-Card-300x300.png 300w" sizes="(max-width: 180px) 100vw, 180px" width="180" height="180">
        </a>
      </td>
      <td class="product-name" data-title="Product">
        <a href="http://mowgli.dev/product/gift-cards/?attribute_choose-value=%C2%A3100.00">Gift Cards - £100.00</a>     </td>
      <td class="product-price" data-title="Price">
        <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>100.00</span>    </td>
      <td class="product-quantity" data-title="Quantity">
        <div class="quantity">
          <label class="screen-reader-text" for="quantity_59f058ed51782">Quantity</label>
          <input id="quantity_59f058ed51782" class="input-text qty text" step="1" min="0" max="" name="cart[0039818e7547d3314205171d9ec650da][qty]" value="21" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
        </div>
      </td>
      <td class="product-subtotal" data-title="Total">
        <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>2,100.00</span>   </td>
    </tr>
    <tr>
    <td colspan="6" class="actions">
      <input class="button" name="update_cart" value="Update basket" disabled="" type="submit">
      <input id="_wpnonce" name="_wpnonce" value="09541aba5e" type="hidden"><input name="_wp_http_referer" value="/basket/" type="hidden">
      </td>
    </tr>
  </tbody>
</table>

<div class="wc-proceed-to-checkout">
  <a href="http://mowgli.dev/checkout/" class="checkout-button button alt wc-forward">
Proceed to checkout</a>
</div>

I have already checked the following posts on SO which haven't really helped me:

E.Owen
  • 753
  • 1
  • 10
  • 25

3 Answers3

1

I see when you update cart new inputs come via AJAX, so if you want get click event fires you have to use on() when the element you going to click it there wasnt initally in the document. Like dynamically generated content or new elements wich come in AJAX. Also play with prop disabled each time the input changes.

// Disable proceed button
$(document).on("change", '.product-quantity > .quantity > input', function() {
    $('a.checkout-button').css({
        'pointer-events': 'none',
        'opacity': '0.25'
    });
});

$(document).on("click", '.actions > input[type="submit"]', function() {
    $('a.checkout-button').css({
        'pointer-events': 'auto',
        'opacity': '1'
    });
    $(this).prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0">
    <thead>
        <tr>
            <th class="product-remove">&nbsp;</th>
            <th class="product-thumbnail">&nbsp;</th>
            <th class="product-name">Product</th>
            <th class="product-price">Price</th>
            <th class="product-quantity">Quantity</th>
            <th class="product-subtotal">Total</th>
        </tr>
    </thead>
    <tbody>

        <tr class="woocommerce-cart-form__cart-item cart_item">

            <td class="product-remove">
                <a href="http://mowgli.dev/basket/?remove_item=0039818e7547d3314205171d9ec650da&amp;_wpnonce=09541aba5e" class="remove" aria-label="Remove this item" data-product_id="166" data-product_sku="">×</a> </td>

            <td class="product-thumbnail">
                <a href="http://mowgli.dev/product/gift-cards/?attribute_choose-value=%C2%A3100.00"><img src="//mowgli.dev/wp-content/uploads/2017/09/PR-Gift-Card-180x180.png" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" srcset="//mowgli.dev/wp-content/uploads/2017/09/PR-Gift-Card-180x180.png 180w, //mowgli.dev/wp-content/uploads/2017/09/PR-Gift-Card-150x150.png 150w, //mowgli.dev/wp-content/uploads/2017/09/PR-Gift-Card-300x300.png 300w" sizes="(max-width: 180px) 100vw, 180px" width="180" height="180">
                </a>
            </td>

            <td class="product-name" data-title="Product">
                <a href="http://mowgli.dev/product/gift-cards/?attribute_choose-value=%C2%A3100.00">Gift Cards - £100.00</a> </td>

            <td class="product-price" data-title="Price">
                <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>100.00</span>
            </td>

            <td class="product-quantity" data-title="Quantity">
                <div class="quantity">
                    <label class="screen-reader-text" for="quantity_59f058ed51782">Quantity</label>
                    <input id="quantity_59f058ed51782" class="input-text qty text" step="1" min="0" max="" name="cart[0039818e7547d3314205171d9ec650da][qty]" value="21" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
                </div>
            </td>

            <td class="product-subtotal" data-title="Total">
                <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>2,100.00</span>
            </td>
        </tr>


        <tr>
            <td colspan="6" class="actions">


                <input class="button" name="update_cart" value="Update basket" disabled="" type="submit">


                <input id="_wpnonce" name="_wpnonce" value="09541aba5e" type="hidden">
                <input name="_wp_http_referer" value="/basket/" type="hidden"> </td>
        </tr>

    </tbody>
</table>

<div class="wc-proceed-to-checkout">

    <a href="http://mowgli.dev/checkout/" class="checkout-button button alt wc-forward">
 Proceed to checkout</a>
</div>
SilverSurfer
  • 4,281
  • 6
  • 24
  • 50
  • The input needs to be disabled by default as it cannot be used until the cart quantities are changed. This would not fix my issue, sorry! – E.Owen Oct 25 '17 at 09:38
  • The update button is now disabled by default, but stays enabled after the first change! What's more, I'm not able to easily edit the HTML as it is generated by the WooCommerce plugin. – E.Owen Oct 25 '17 at 09:42
  • I didnt change anything in the html, only jquery, and it works as you described – SilverSurfer Oct 25 '17 at 09:43
  • When I run your code snippet, it leaves the Update basket input enabled. I'll add your code into my site and see what happens there... – E.Owen Oct 25 '17 at 09:45
  • You want disable "Update basket" each time is clicked, and enable it each time quantity is changed? – SilverSurfer Oct 25 '17 at 09:48
  • When the user lands on the car page, 'Update basket' should be disabled. When the user changes the quantity of items, the 'Update basket' button should become enabled AND the 'Proceed to checkout' button should be disabled. On my development I currently have it working so that the above happens but it only happens for the first time the event is triggered. – E.Owen Oct 25 '17 at 09:52
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/157452/discussion-between-silversurfer-and-e-owen). – SilverSurfer Oct 25 '17 at 09:53
0

hi change and click() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on().like below code

`$("button").click(function(){ $("h2").html("click me

") });

$(".test").live('click', function(){ alert('you clicked me!'); });`

abhinavsinghvirsen
  • 1,853
  • 16
  • 25
0

Attach an event handler for all elements which match the current selector but

.live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

This method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is dynamically added to a page. See the discussion of direct versus delegated events in the .on() method for more information.

Rewriting the .live() method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:

$( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+
abhinavsinghvirsen
  • 1,853
  • 16
  • 25