我已购买HTML模板并将其实施到自定义Woocommerce主题中。数字输入有两个按钮（btn-product-up，btn-product-down），用于更改数值。

从/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
?>

默认输入“箭头”被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;
}

在购物车页面中，单击“ +”和“-”按钮不会出现在“更新购物车”按钮上，但仍处于禁用状态。HTML中包含的此JS会更改输入的数值，但不会启用更新按钮：

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);
  }); 
};

删除CSS后，“更新”按钮仅允许单击默认输入箭头。