Cách để giỏ hàng tự động cập nhật khi thay đổi số lượng sản phẩm

Ẩn nút button Cập nhật giỏ hàng

Khi giỏ hàng được cập nhật tự động thì nút Cập nhật giỏ hàng lúc này sẽ bị thừa. Mình sẽ dùng CSS để xoá nút này đi. Các bạn coppy đoạn code vào CSS bổ sung hoặc custom CSS nhé.

.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
	display: none;
}

Các bạn coppy đoạn code trên vào CSS bổ sung hoặc custom CSS hoặc file style của theme nhé

Để giỏ hàng được tự động cập nhật số lượng, mời các bạn đến với bước tiếp theo nhé

Cập nhật giỏ hàng khi số lượng sản phẩm thay đổi

Phần này, mình sẽ phải bắt được sự kiện khi số lượng sản phẩm thay đổi --> giỏ hàng sẽ cập nhật. Mình sẽ sử dụng một đoạn jQuery ngắn ở dưới đây:

jQuery( function( $ ) {
	$('.woocommerce').on('change', 'input.qty', function(){
		$("[name='update_cart']").trigger("click");
	});
} );

Đoạn code ở trên rất cơ bản nhưng chưa thật sự hoàn hảo. Bởi vì nó sẽ gửi nhiều yêu cầu AJAX! Một yêu cầu trên mỗi lần thay đổi số lượng! Hãy tối ưu hóa nó một chút.

var timeout;

jQuery( function( $ ) {
	$('.woocommerce').on('change', 'input.qty', function(){

		if ( timeout !== undefined ) {
			clearTimeout( timeout );
		}

		timeout = setTimeout(function() {
			$("[name='update_cart']").trigger("click");
		}, 1200 );

	});
} );

Lúc này mình sẽ sử dụng biến timeout như là một khoản thời gian delay. Ở dòng thứ 12, bạn có thể thay đổi thời gian delay cho phù hợp với yêu cầu. Đơn vị ở đây là milliseconds (ms). Với 1200ms tương ứng với 1.2 giây.

Hãy thêm đoạn code trên vào file script của theme bạn nhé. Nếu không, bạn cũng có thể sử dụng hook wp_head để chèn code CSS, và hook wp_footer để chèn code JS.

Lời kết

Bài viết trên Congtyannhien đã hướng dẫn các bạn về cách làm cho giỏ hàng tự động cập nhật

Nếu các bạn thấy bài viết này hữu ích hay like và share nó nhé. Follow Congtyannhien để biết thêm nhiều điều về WordPress nhé.