Xin chào các bạn, vừa qua mình có fix cho khách hàng của mình một trường hợp. Đó là trên trang sản phẩm có nhiều biến thể khi lựa chọn các tùy chọn trên giao diện web nó sẽ load khá lâu. Bài viết này mình sẽ chia sẻ tới các bạn cách fix đó là sửa đổi ngưỡng biến thể ajax trong woocommerce
Tại sao biến thể nhiều lại load chậm khi chọn trên web ?
Lúc đầu mình cũng không rõ lí do vì sao lại như vậy, nhưng nhớ đến câu nói ” Cái gì không biết thì tra google ” . Thế là mình đã lục tung google với các từ khóa mà mình search, tuy nhiên chưa có bài viết tiếng việt nào chia sẻ.
Mình tiếp tục search tiếng anh và cuối cùng nó cũng ra được kết quả như ý muốn và hiểu được tại sao trang sản phẩm lại load chậm khi lựa chọn các biến thể của sản phẩm có nhiều biến thể. Woocommerce document có giải thích rằng:
” Theo mặc định, nếu một sản phẩm biến thể có ít hơn 30 biến thể, danh sách thả xuống để chọn các biến thể trên giao diện người dùng sẽ động.
Ví dụ: với áo phông có thuộc tính “Kích thước” và “Màu sắc”, sau khi khách hàng chọn Kích thước, menu thả xuống Màu sắc sẽ được cập nhật qua AJAX để chỉ hiển thị các tùy chọn có sẵn với Kích thước đã chọn.
Tuy nhiên, nếu có hơn 30 biến thể, danh sách thả xuống sẽ ở trạng thái tĩnh và hiển thị tất cả các thuộc tính.”
Nếu các bạn vẫn chưa hiểu thì mình sẽ giải thích ngắn gọn hơn như này: Nếu sản phẩm của bạn có ít hơn 30 biến thể thì woocommerce sẽ xử lí bằng cách gọi ajax để xử lí , còn nếu nhiều hơn 30 biến thể nó sẽ ” xử lí nội tuyến ” . Và khi xử lí nội tuyến nó sẽ bị delay một chút.
Bạn có thể test cái này bằng cách tạo ra sản phẩm có nhiều hơn 30 biến thể. Sau đó ra trang sản phẩm và chọn biến thể để mua hàng thì sau khi chọn xong bạn sẽ thấy một tượng xoay tròn một lúc mới hiển thị lại. Điều này khiến cảm giác của người dùng khá khó chịu .
Tại sao woocommerce lại làm như vậy
Theo giải thích của woocommerce thì sẽ như thế này: ” Điều này được thực hiện để cải thiện hiệu suất trên trang web. Đối với số lượng lớn các biến thể, nếu nó phải tính toán các kết hợp có sẵn sau mỗi lần lựa chọn. Nó có thể làm mọi thứ chậm lại một chút. ”
Rõ ràng là nó có lí do chính đáng mới làm như vậy, tuy nhiên người dùng lại không cần sự giải thích đó mà muốn làm khác đi thì có thể làm như thế nào.
Tăng giới hạn đó lên thì phải làm như thế nào ?
Rất đơn giản woocommerce cũng đã cung cấp cho người dùng cách để tăng giới hạn đó lên bằng cách sử dụng đoạn code bên dưới đây. Các bạn coppy đoạn code và dán nó vào file function.php của theme mà bạn đang sử dụng nhé.
function custom_wc_ajax_variation_threshold( $qty, $product ) {
return 1000;
}
add_filter( 'woocommerce_ajax_variation_threshold', 'custom_wc_ajax_variation_threshold', 10, 2 );Bạn chú ý thay đổi lại số lượng bằng cách thay 1000 sang số mà bạn thấy hợp lí đối với các sản phẩm trên website của bạn nhé.
Có cách nào khác không ?
Hiện nay mình thấy ae trong cộng đồng bán hàng nước ngoài rất hay sử dụng cái gọi là biến thể ảo, bằng cách sử dụng plugin woo custom product addons. các bạn có thể tham khảo bài viết về woo custom product addons của mình ở đây nhé
Lời kết
Như vậy trong bài viết này mình đã hướng dẫn các bạn cách sửa đổi ngưỡng biến thể ajax trong woocommerce. Hi vọng nó sẽ giúp ích cho các bạn trong việc phát triển website bán hàng của bản thân nhé. Chúc các bạn thành công.
