WooCommerce: Tự động cập nhật giỏ hàng khi thay đổi số lượng

Tự động cập nhật giỏ hàng trong WooCommerce khi thay đổi số lượng. Có rất nhiều tài liệu trực tuyến giải quyết vấn đề UX này – vì vậy, trong bài viết này, hãy xem liệu tôi có thể cung cấp cho bạn phiên bản cập nhật, đơn giản hơn hay không.

Theo bạn có cần đến nút “Update Cart” (Cập nhật giỏ hàng) không? Dĩ nhiên là có, cái bạn phải nhấp sau khi cập nhật số lượng sản phẩm trong giỏ hàng…

Một hàm PHP đơn giản, hai dòng JQuery, một dòng CSS và kết quả là bạn sẽ làm được những điều đó!

Tự động cập nhật Giỏ hàng WooCommerce khi số lượng thay đổi. Như hình ảnh trên là kết quả sau khi bạn nhấn vào nút “Update Cart”.

Và trình tự để làm được điều đó là gì, ta sẽ có 2 bước như sau:

Thứ nhất: Đoạn mã CSS: Ẩn nút “Update Cart” của WooCommerce.

Trước hết, chúng ta cần ẩn nút “Update Cart”, vì chúng ta sẽ không sử dụng nó. Để PHP và JQuery làm điều này. Thêm đoạn mã bên dưới vào style.css
[code]
input[name=’update_cart’] {
display: none !important;
}

/* OR TRY THIS */

button[name=’update_cart’] {
display: none !important;
}
[/code]

Thứ hai: Đoạn mã PHP: Tự động cập nhật Giỏ hàng trong WooCommerce khi Số lượng Thay đổi.

Bây giờ nút đã bị ẩn, tất cả những gì chúng ta cần làm là “click” vào nút thông qua JQuery và để WooCommerce thực hiện công việc tương tự (cập nhật tổng số giỏ hàng, thuế, v.v.).

Cụ thể, khi chúng tôi “click” vào bất kỳ đầu vào số lượng nào, chúng tôi sẽ kích hoạt một “click” vào nút Update Cart button ẩn.

Dễ dàng, phải không?
[code]
add_action( ‘wp_footer’, ‘bbloomer_cart_refresh_update_qty’ );

function bbloomer_cart_refresh_update_qty() {
if (is_cart()) {
?>
<script type=”text/javascript”>
jQuery(‘div.woocommerce’).on(‘click’, ‘input.qty’, function(){
jQuery(“[name=’update_cart’]”).trigger(“click”);
});
</script>
<?php
}
}
[/code]

Thêm đoạn mã này vào đâu?

Bạn có thể đặt các đoạn mã PHP ở cuối tệp functions.php chủ đề con của mình (trước “?>” Nếu bạn có). Mặt khác, CSS có trong tệp style.css chủ đề con của bạn.

Đoạn mã này (vẫn) hoạt động chứ?

Vui lòng cho tôi biết trong phần bình luận nếu mọi thứ hoạt động như mong đợi. Tôi rất sẵn lòng sửa đổi đoạn mã nếu bạn có góp ý phù hợp (vui lòng cung cấp ảnh chụp màn hình).