CODEWITHSUNDEEP
jquerywordpresswoocommercecartproduct-quantity
Juraj
Juraj

Reputation: 518

Enable "Update cart" button on quantity change with custom quantity buttons in WooCommerce cart

I have purchased and implemented HTML template into custom Woocommerce theme. Number inputs have two buttons (btn-product-up, btn-product-down) that change numeric value.

From /woocommerce/cart/cart.php:

<?php
if ( $_product->is_sold_individually() ) {
    $product_quantity = sprintf( '1 <input type="hidden" name="cart[%s][qty]" value="1" />', $cart_item_key );
} else {
    $product_quantity = woocommerce_quantity_input(
        array(
            'input_name'   => "cart[{$cart_item_key}][qty]",
            'input_value'  => $cart_item['quantity'],
            'max_value'    => $_product->get_max_purchase_quantity(),
            'min_value'    => '0',
            'product_name' => $_product->get_name(),
            'classes'      => array( 'form-product', 'input-text', 'qty', 'text' ), // added some class
        ),
        $_product,
        false
    );
}

echo '<div class="d-flex justify-content-center align-items-center">'; // added wrapper element
echo '<button class="btn-product btn-product-up"> <i class="las la-minus"></i></button>'; // minus button

echo apply_filters( 'woocommerce_cart_item_quantity', $product_quantity, $cart_item_key, $cart_item ); // PHPCS: XSS ok.

echo '<button class="btn-product btn-product-down"> <i class="las la-plus"></i></button>'; // plus button
echo '</div>'; // wrapper end
?>

Default input "arrows" are hidden by CSS:

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

In cart page clicking on + and - buttons doesn't appears on update cart button, is still disabled. This JS included in HTML changes input's numeric value but not enabling update button:

function btnproduct() {
  $('.btn-product-up').on('click', function (e) {
    e.preventDefault();
    var numProduct = Number($(this).next().val());
    if (numProduct > 1) $(this).next().val(numProduct - 1);
  });
  $('.btn-product-down').on('click', function (e) {
    e.preventDefault();
    var numProduct = Number($(this).prev().val());
    $(this).prev().val(numProduct + 1);
  }); 
};

Update button only enables on clicking on default input arrows, after removing CSS.

enter image description here

Upvotes: 1

Views: 2557

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253921

In your code, you need to remove disabled and aria-disabled properties from the "Update" cart button using this code line:

$('[name=update_cart]').prop({'disabled': false, 'aria-disabled': false });

So in your code, when quantity change with your custom "minus" and "plus" buttons:

function btnproduct() {
    $('.btn-product-up').on('click', function (e) {
        e.preventDefault();
        var numProduct = Number($(this).next().val());
        if (numProduct > 1) {
            $(this).next().val(numProduct - 1);
            $('[name=update_cart]').prop({'disabled': false, 'aria-disabled': false });
        }
    });
    $('.btn-product-down').on('click', function (e) {
        e.preventDefault();
        var numProduct = Number($(this).prev().val());
            $(this).prev().val(numProduct + 1);
            $('[name=update_cart]').prop({'disabled': false, 'aria-disabled': false });
        }
    }); 
};

Tested and works.

Upvotes: 1

Related Questions