How to enable update cart button in woocommerce cart.php?

Hi I’ve been trying to get my “update cart” button to work on the cart page made by woocommerce. It is on my own theme and I have added the cart.php template to it. In the woocommerce template it had quantity but it didn’t have an easy to use add more or less buttons. So I edited the global/quantity-input.php to have this trait. I have tested the single-products pages to use my new quantity and adding to cart. This works great. But on the cart page the update cart button is disabled unless a change is made, and it doesn’t recognize my changes.

Things I’ve tried that worked:

When I manually go into the inspector and remove the “disable” attribute from the button
When I press “enter” on my keyboard in the quantity input after i press the “-” or “+” button.
Plus and minus do change the quantity in the input field
Typing in the quantity enables the update cart button

Things I’ve tried that did not work:

Using javascript to target the button and do ‘update_cart.disable = false;’
Tried calling a submit on change to automatically adjust the cart
Just simply hope that the form recognizes the quantity change via my buttons

My code for the Javascript

   function minus_quantity(e) {
        var this_input = this.parentNode.querySelector('input[type=number]');
        var current_val = this_input.value;
        var new_val = parseInt(current_val) - 1;
        this_input.value = new_val;
        document.getElementsByName('update_cart').disable = false;
        e.preventDefault();
    }
    function add_quantity(e) {
        var current_val = this.parentNode.querySelector('input[type=number]').value;
        var new_val = parseInt(current_val) + 1;
        this.parentNode.querySelector('input[type=number]').value = new_val;
        document.getElementsByName('update_cart').disable = false;
        e.preventDefault();
    }

My code inside cart.php

                            <button type="submit" class="button" name="update_cart" value="<?php esc_attr_e( 'Update cart', 'woocommerce' ); ?>"><?php esc_html_e( 'Update cart', 'woocommerce' ); ?></button>
                            <?php do_action( 'woocommerce_cart_actions' ); ?>
                            <?php wp_nonce_field( 'woocommerce-cart', 'woocommerce-cart-nonce' ); ?>

My HTML code inside the browser

<button type="submit" class="button" name="update_cart" value="Update cart" disabled="">Update cart</button>
<input type="hidden" id="woocommerce-cart-nonce" name="woocommerce-cart-nonce" value="6090857223">
<input type="hidden" name="_wp_http_referer" value="/cart/?purge_success=1&amp;cache_type=all"><!--                        </div>-->

I should mention that my selector on the button isn’t working and I don’t know why.

Also, I am very new to woocommerce and can’t find anything on this topic. Thank you for reading this.

UPDATE 1:

I found this ticket and tried it Woocommerce 2.6.2 adds disabled attribute to update cart button

I added this to the bottom of my javascript function ( I did make sure it’s in a Jquery wrapper btw) $('button[name="update_cart"]' ).removeProp( 'disabled'); However this did not work either. I used the inspector and it appears to not get anything back with the selector, but when I console log it, I get something back.

Answer

The reason why your javascript isn’t working is because of two reasons:

The attribute you need to change is not “disable”, it should be “disabled”.
You are selecting your button from the DOM using getElementsByName, which actually returns an array of all the elements with that name in your page. The way you would access it and change the disabled attribute (assuming you only have one element with that name) would be like this:

document.getElementsByName(‘update_cart’)[0].disabled = false;

However that is bad practice since you could have more than one element with that name and thus I would suggest giving your button an id and then using getElementById instead. You wouldn’t need to add the [0] in this case.

Advertisement

Answer