เวลาลูกค้าเข้ามาช้อปปิ้งในเว็บไซต์ E-commerce ของคุณ แล้วพอเข้าไปที่หน้าตะกร้าสินค้า (Cart Page) เพื่อจะปรับจำนวนสินค้าที่ต้องการสั่งซื้อ กลับต้องเจอกับขั้นตอนที่น่ารำคาญใจ? หลังจากเปลี่ยนตัวเลขจำนวนสินค้าแล้ว ก็ยังต้องมองหาปุ่ม “อัปเดตตะกร้าสินค้า” (Update Cart) แล้วกด… จากนั้นก็ต้องรอให้หน้าเว็บรีเฟรชทั้งหมดอีกครั้ง
ประสบการณ์แบบนี้อาจสร้างความหงุดหงิดเล็กๆ น้อยๆ และอาจเป็นหนึ่งในสาเหตุที่ทำให้ลูกค้าเปลี่ยนใจออกจากเว็บของคุณไปเลยก็ได้ (Cart Abandonment)
ในบทความนี้ เราจะมาเปลี่ยนประสบการณ์การใช้งานตะกร้าสินค้าของ WooCommerce ให้ลื่นไหลและทันสมัยยิ่งขึ้น ด้วยการทำให้ราคาสินค้า อัปเดตอัตโนมัติ ทันทีที่ลูกค้ากดเพิ่มหรือลดจำนวนสินค้า โดยไม่ต้องกดปุ่มอัปเดตและรอโหลดหน้าใหม่ให้เสียเวลาครับ 🚀
ทำไมการอัปเดตตะกร้าสินค้าอัตโนมัติจึงสำคัญ?
โดยพื้นฐานแล้ว WooCommerce ถูกออกแบบมาให้มีการยืนยันการเปลี่ยนแปลงในตะกร้าผ่านการกดปุ่ม “Update Cart” ซึ่งก็เป็นวิธีที่ใช้งานได้ แต่ในยุคที่ทุกอย่างต้องการความเร็วและความสะดวกสบาย การปรับปรุงเล็กๆ น้อยๆ แบบนี้สามารถสร้างความแตกต่างได้อย่างมหาศาล
มอบประสบการณ์ผู้ใช้ที่ดีขึ้น (Better User Experience – UX): ลูกค้าจะเห็นยอดรวมที่ต้องชำระเปลี่ยนแปลงทันทีตามจำนวนสินค้าที่เลือก ทำให้การตัดสินใจซื้อง่ายและรวดเร็วขึ้น
ลดขั้นตอนที่ไม่จำเป็น: การตัดขั้นตอนการคลิกปุ่มและรอรีเฟรชออกไป ช่วยให้กระบวนการสั่งซื้อสั้นลงและราบรื่นขึ้น
เพิ่มความทันสมัยให้ร้านค้า: ทำให้เว็บไซต์ของคุณดูเป็นมืออาชีพและใส่ใจในรายละเอียดเล็กๆ น้อยๆ ซึ่งช่วยสร้างความน่าเชื่อถือ
อาจช่วยลดอัตราการละทิ้งตะกร้าสินค้า (Reduce Cart Abandonment): เมื่อไม่มีอุปสรรคหรือความติดขัดในขั้นตอนการชำระเงิน โอกาสที่ลูกค้าจะสั่งซื้อจนสำเร็จก็มีมากขึ้น
เพิ่มโค้ด PHP นี้ลงในไฟล์ functions.php ของ Child Theme ของคุณ หรือเพิ่มผ่านปลั๊กอิน Code Snippets
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if ( is_cart() ) {
?>
<script type="text/javascript">
jQuery(function($) {
let timeout;
$('.woocommerce').on('change', 'input.qty', function() {
if (timeout !== undefined) {
clearTimeout(timeout);
}
timeout = setTimeout(function() {
$("[name='update_cart']").trigger("click");
}, 500); // ตั้งค่าดีเลย์ 0.5 วินาที เพื่อไม่ให้ยิง request ถี่เกินไป
});
});
</script>
<?php
}
}
