วิธีแก้ไขรายละเอียดรถเข็นในหน้าชำระเงินของ WooCommerce

พวกคุณส่วนใหญ่จะรู้ว่า WooCommerce ไม่อนุญาตให้ลูกค้าอัปเดตตะกร้าสินค้าจากหน้าชำระเงิน ซึ่งหมายความว่าคุณไม่สามารถเปลี่ยนจำนวนหรือลบสินค้าออกจากหน้าชำระเงินได้ ลูกค้าต้องกลับไปที่หน้าตะกร้าสินค้า อัปเดตตะกร้าสินค้า จากนั้นไปที่หน้าชำระเงินอีกครั้ง ส่งผลให้ลูกค้าต้องกรอกข้อมูลที่จำเป็นทั้งหมดอีกครั้ง สิ่งนี้ค่อนข้าง น่าผิดหวังสำหรับลูกค้า โดยเฉพาะอย่างยิ่งสำหรับผู้ใช้ทั่วไป (ซึ่งส่วนใหญ่แล้ว)

ในโพสต์นี้ เราจะพูดถึงวิธีอัปเดตรถเข็นในหน้าชำระเงินของ WooCommerce ฉันได้พัฒนาคุณลักษณะนี้ในกิจกรรม Fun Friday ที่สำนักงาน ใน Fun Fridays เราพยายามใช้เวลาทั้งวันในการทำสิ่งต่าง ๆ ที่ไม่เกี่ยวข้องกับกิจกรรมการทำงานหลักของบุคคล

ก่อนอื่น มาดูที่ตารางรายละเอียดรถเข็นในหน้าชำระเงินของ WooCommerce:

ที่นี่ลูกค้าไม่สามารถแก้ไขจำนวนสินค้าหรือลบออกได้ ดังนั้นเราจึงต้องการให้ฟังก์ชันในการเปลี่ยนปริมาณและลบผลิตภัณฑ์โดยที่ลูกค้าของคุณไม่ต้องออกจากหน้าการชำระเงิน

เอาล่ะ

หากคุณต้องการข้ามคำอธิบายนี้ และต้องการใช้ฟังก์ชันการทำงานกับร้านค้าของคุณแทน คุณสามารถดาวน์โหลดปลั๊กอินที่ฉันสร้างขึ้นได้

1. การเปลี่ยนแปลง UI ในส่วนของรถเข็นในหน้าชำระเงิน

เราจำเป็นต้องแก้ไขคอลัมน์ "ผลิตภัณฑ์" ในตาราง "คำสั่งซื้อของคุณ" เราจำเป็นต้องเพิ่มไอคอน "ลบ" และ "ตัวเลือกจำนวน" สำหรับแต่ละรายการในรถเข็น

เพื่อให้บรรลุสิ่งนี้ WooCommerce ได้ให้ตัวกรองที่ให้คุณแก้ไขแถวชื่อผลิตภัณฑ์ของแต่ละรายการในรถเข็น: woocommerce_cart_item_name

ปริมาณที่เลือกที่แสดงในตารางคำสั่งซื้อของคุณสามารถแก้ไขได้โดยใช้ตัวกรอง WooCommerce อื่น: woocommerce_checkout_cart_item_quantity

เราจะใช้ทั้งตัวกรองและอนุญาตให้ลูกค้าแก้ไขรายละเอียดรถเข็นในหน้าชำระเงิน คุณสามารถใช้การเปลี่ยนแปลงด้านล่างโดยการสร้างปลั๊กอินใหม่

ขั้นแรก เราไม่ต้องการปริมาณที่แสดงสำหรับแต่ละรายการในตารางคำสั่งซื้อของคุณ ดังนั้นเราจะใช้ตัวกรองและส่งคืนสตริงว่างเพื่อเขียนทับข้อมูล WooCommerce

หลังจากนี้ เราจะแก้ไขแถวชื่อผลิตภัณฑ์โดยใช้ตัวกรอง woocommerce_cart_item_name & เพิ่มช่องจำนวน & ไอคอนลบ

ที่นี่เราใช้ ฟังก์ชัน is_checkout() เพื่อให้แน่ใจว่าเราใช้การเปลี่ยนแปลงในหน้าชำระเงินเท่านั้น ฉันได้แบ่งออกเป็น 3 ขั้นตอนตามที่กล่าวไว้ในข้อมูลโค้ดด้านบน

ขั้นตอนที่ 1: เพิ่มไอคอนลบ
ในขั้นตอนนี้ เราจะเพิ่มไอคอนลบสำหรับแต่ละรายการในรถเข็น นี่คือไอคอนเดียวกับที่ใช้ในรถเข็น WooCommerce

ที่นี่เราใช้ฟังก์ชัน WooCommerce get_remove_url() เราจำเป็นต้องส่ง $cart_key สำหรับรายการรถเข็นแต่ละรายการ ดังนั้นฟังก์ชัน get_remove_url() จะส่งคืน URL ที่ไม่ซ้ำเพื่อลบแต่ละรายการในรถเข็น

ขั้นตอนที่ 2: เพิ่มชื่อผลิตภัณฑ์
ขณะที่เรากำลังแก้ไขแถวชื่อผลิตภัณฑ์ เรายังต้องเพิ่มชื่อผลิตภัณฑ์ในแถวพร้อมกับฟิลด์ใหม่ เราจะได้ชื่อผลิตภัณฑ์จากตัวกรองเอง ซึ่งส่งผ่านเป็นอาร์กิวเมนต์แรก มันคือ $product_title ในกรณีของเรา

เพิ่มยอดขายร้านค้า WooCommerce

"เป็นเรื่องที่น่าสนใจที่จะเห็นว่า WooCommerce Abandoned Cart Pro เพิ่มยอดขายสำหรับผลิตภัณฑ์ที่มีมูลค่าสูงได้มากน้อยเพียงใด ฉันคาดว่าปลั๊กอินจะเพิ่มยอดขายสำหรับสินค้ามูลค่าต่ำที่ลูกค้าไม่ว่าพวกเขาจะซื้อหรือไม่ก็ตาม (เช่น อาหาร) แต่ฉัน รู้สึกประหลาดใจมากขึ้นที่เห็นความแตกต่างที่สามารถทำได้สำหรับผลิตภัณฑ์ที่ต้องการการตัดสินใจซื้อครั้งใหญ่" - Katie Keith ผู้อำนวยการฝ่ายปฏิบัติการของ Barn2 Media

ขั้นตอนที่ 3: เพิ่มตัวเลือกปริมาณ
สุดท้าย เราจะเพิ่มตัวเลือกปริมาณ เราจะใช้ฟังก์ชัน WooCommerce woocommerce_quantity_input()

เราจำเป็นต้องระบุพารามิเตอร์สี่ตัวสำหรับฟังก์ชัน "input_name", "input_value", "max_value", "min_value"

• input_name: จะมีอาร์เรย์ชื่อ 'cart' ซึ่งคุณจะต้องส่งคีย์รายการรถเข็นและจำนวน
• input_value: มันจะมีปริมาณที่เลือกของผลิตภัณฑ์
• max_value: จะเป็นจำนวนสต็อคสูงสุดของผลิตภัณฑ์
• min_value: มันจะเป็นค่าต่ำสุดของตัวเลือกปริมาณ

เมื่อทำตามขั้นตอนข้างต้นทั้งหมดแล้ว ระบบจะแสดงปุ่มลบและตัวเลือกปริมาณในตารางคำสั่งซื้อของคุณในหน้าชำระเงิน

ที่นี่ เรามีเงื่อนไขหนึ่งข้อ if ( is_checkout() ) { condition. จำเป็นด้วยเหตุผลที่ระบุไว้ด้านล่าง

ตัวกรองที่เราใช้สำหรับแก้ไขค่าคอลัมน์ชื่อผลิตภัณฑ์ (woocommerce_cart_item_name) จะถูกเรียกในหน้า รถเข็น ของร้านค้าของคุณด้วย ดังนั้น เพื่อให้แน่ใจว่าโค้ดที่เราเขียนไม่ทำลายฟังก์ชันการทำงานของหน้ารถเข็น เราจึงมั่นใจได้ว่าการเปลี่ยนแปลงจะมีผลเฉพาะในหน้าชำระเงินเท่านั้น

2. การอัปเดตรถเข็นผ่าน Ajax call

การเพิ่มจำนวนมากนี้ใช้ไม่ได้ผล เราต้องตรวจสอบให้แน่ใจเมื่อลูกค้าเปลี่ยนปริมาณที่จะแสดงบนยอดรวมรถเข็น

เปลี่ยนปริมาณ

เราต้องการการเรียก Ajax เพื่อเปลี่ยนยอดรวมรถเข็น ดังนั้นเมื่อลูกค้าเปลี่ยนปริมาณ เราจำเป็นต้องดำเนินการและเปลี่ยนยอดรวมตะกร้าสินค้า

ตอนนี้ เราจะจัดคิวไฟล์ “add_quantity.js” ที่ส่วนท้ายของเว็บไซต์ และเราจะตรวจสอบให้แน่ใจว่าไฟล์นั้นถูกรวมไว้เมื่อเราอยู่ในหน้าชำระเงิน

ตอนนี้เราต้องเพิ่มฟังก์ชันในไฟล์ Javascript ซึ่งจะเรียก ajax เพื่อเปลี่ยนยอดรวมตะกร้าสินค้า

จาวาสคริปต์ด้านบนจะเรียก ajax ซึ่งเราจะส่งข้อมูลของแบบฟอร์มการชำระเงินที่แก้ไขแล้ว แต่จะโทรเมื่อเราคลิกที่ไอคอนปริมาณ ดังนั้นจะมีการปรับเปลี่ยนมูลค่าของปริมาณ

ตอนนี้ เราต้องเพิ่มฟังก์ชันสำหรับ ajax ซึ่งจะเปลี่ยนยอดรวมรถเข็นตามปริมาณที่แก้ไข

เมื่อเราแก้ไขปริมาณในหน้าชำระเงิน ฟังก์ชันด้านบนจะถูกเรียกและจะเปลี่ยนยอดรวมรถเข็น เราใช้ฟังก์ชัน WooCommerce ในฟังก์ชันของเรา

เราใช้ฟังก์ชัน “set_quantity()”, “calculate_totals()”, “woocommerce_cart_totals()” เพื่อแก้ไขยอดรวมของรถเข็นและแสดงบนตารางคำสั่งซื้อของคุณในหน้าชำระเงิน

set_quantity() : ฟังก์ชันนี้จะกำหนดปริมาณที่แก้ไขไปยังรถเข็น

เราได้ส่งข้อมูลจากฟังก์ชัน javascript ซึ่งจะมีค่าปริมาณที่แก้ไข ดังนั้นเราจะใช้ค่าที่แก้ไขแล้วตั้งค่าไปที่รถเข็น

Calculator_totals() : การใช้ฟังก์ชันนี้ เราแนะนำให้คำนวณผลรวมของรถเข็นอีกครั้ง

woocommerce_cart_totals() : ฟังก์ชันนี้ใช้เพื่อแสดงรถเข็นที่แก้ไข

เมื่อการคำนวณทั้งหมดข้างต้นเสร็จสิ้น มันจะกลับสู่จาวาสคริปต์ที่เราเรียกฟังก์ชันอาแจ็กซ์ ในการตอบสนองต่อฟังก์ชันนั้น เราจะ 'เรียก' ฟังก์ชัน 'update_checkout' ซึ่งจะปรับเปลี่ยนรถเข็นและแสดงให้ผู้ใช้เห็น

เราต้องการ CSS สำหรับปุ่ม "ลบ" ของตารางคำสั่งซื้อของคุณ ดังนั้นควรมีลักษณะเหมือนปุ่มลบรถเข็น WooCommerce ดังนั้นเราต้องเพิ่ม CSS สำหรับมัน คุณสามารถเพิ่ม CSS ในส่วนท้ายของเว็บไซต์ของคุณ

เมื่อเพิ่มเข้าไปแล้ว เราต้องให้ CSS กับปุ่มลบในไฟล์ CSS CSS ได้แสดงไว้ด้านล่าง

ดังนั้นเราจึงพร้อมแล้วกับฟังก์ชันการทำงานที่เราสามารถปรับเปลี่ยนปริมาณได้ในหน้าชำระเงินของ WooCommerce

หลังจากดำเนินการตามข้างต้นแล้ว นี่คือลักษณะที่ตารางคำสั่งซื้อของคุณในหน้าชำระเงินจะมีลักษณะดังนี้:

จะเพิ่มตัวเลือกปริมาณและไอคอนลบสำหรับแต่ละรายการในตารางคำสั่งซื้อของคุณในหน้าชำระเงิน

ฉันได้สร้างสิ่งนี้เป็นปลั๊กอิน ตั้งชื่อว่า Change Quantity on Checkout for WooCommerce ซึ่งเปิดตัวในเดือนกันยายน 2559 มันถูกใช้ในร้านค้า WooCommerce กว่า 400 แห่ง หากคุณใช้ปลั๊กอินนี้ในร้านค้า WooCommerce อยู่แล้ว ฉันจะขอบคุณมากหากคุณสามารถสละเวลาเพื่อตรวจสอบปลั๊กอิน

หากคุณมีข้อเสนอแนะใดๆ คุณสามารถแจ้งให้เราทราบในความคิดเห็นด้านล่าง หรือโพสต์บนฟอรัมการสนับสนุนของปลั๊กอิน