27+ WooCommerce Checkout Hooks Ilustrated

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

WooCommerce Hooks

Hooks เป็นฟังก์ชันที่ทรงพลังที่ให้คุณแก้ไขหรือเพิ่มโค้ดโดยไม่ต้องแก้ไขไฟล์หลัก พวกเขาให้ความยืดหยุ่นมากมาย และนักพัฒนาใช้เพื่อเปลี่ยนฟังก์ชันเริ่มต้นของ WooCommerce

คุณควรสังเกตว่ามีตะขอที่แตกต่างกันสองประเภท:

• Action hooks – อนุญาตให้คุณเพิ่มโค้ดที่กำหนดเองเพื่อดำเนินการบางอย่างเมื่อเกิดเหตุการณ์ขึ้น
• ตะขอกรอง – เปลี่ยนพฤติกรรมของตัวแปรหรือฟังก์ชันที่มีอยู่

WooCommerce Checkout Hooks

Hooks ช่วยนักพัฒนาในการสร้างโซลูชันที่ปรับแต่งได้จริงและยืดหยุ่น Checkout hooks เป็น hooks ชนิดหนึ่งที่สนับสนุนโดย WooCommerce สามารถใช้ Checkout hook เพื่อเพิ่มเนื้อหาก่อนฟิลด์การเรียกเก็บเงิน ใช้ตรรกะบางอย่างเพื่อเพิ่มราคาหรือจำกัดผู้ใช้ตามบทบาท ก่อนการตรวจสอบคำสั่งซื้อหรือหลังแบบฟอร์มการชำระเงิน และอื่นๆ อีกมากมาย

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

หน้าชำระเงินของ WooCommerce มีตะขอต่อไปนี้:

1. woocommerce_before_checkout_form

woocommerce_before_checkout_form hook ถูกกำหนดไว้ก่อนแบบฟอร์มการชำระเงิน โดยจะวางไว้เหนือช่องคูปองในหน้าชำระเงิน

 add_action( 'woocommerce_before_checkout_form', 'njengah_before_checkout_form', 10 );
		


ฟังก์ชัน njengah_before_checkout_form(){

            echo '<h2>woocommerce_before_checkout_form</h2>';

} 

2. woocommerce_checkout_before_customer_details

woocommerce_checkout_before_customer_details hook ถูกกำหนดในแบบฟอร์มการชำระเงินก่อนรายละเอียดลูกค้า

 add_action( 'woocommerce_checkout_before_customer_details', 'njengah_checkout_before_customer_details', 10 );
		


ฟังก์ชัน njengah_checkout_before_customer_details(){

echo '<h2>woocommerce_checkout_before_customer_details</h2>';

} 

3. woocommerce_checkout_billing

woocommerce_checkout_billing เป็นเบ็ดใหม่ที่เพิ่มในหน้าชำระเงิน เทมเพลตฟอร์มการเรียกเก็บเงินบนหน้าการชำระเงินจะรวมไว้โดยใช้เบ็ดนี้

 add_action('woocommerce_checkout_billing', 'njengah_checkout_billing');
		


ฟังก์ชัน njengah_checkout_billing () {

echo '<h2>woocommerce_checkout_billing</h2>';

} 

4. woocommerce_before_checkout_billing_form

woocommerce_before_checkout_billing_form hook ถูกกำหนดก่อนเริ่มแบบฟอร์มการเรียกเก็บเงิน

 add_action( 'woocommerce_before_checkout_billing_form', 'njengah_before_checkout_billing_form', 10 );
		


ฟังก์ชัน njengah_before_checkout_billing_form(){

echo '<h2>woocommerce_before_checkout_billing_form</h2>';

} 

5. woocommerce_after_checkout_billing_form

woocommerce_after_checkout_billing_form hook ถูกกำหนดหลังจากกรอกแบบฟอร์มการเรียกเก็บเงินเสร็จแล้ว

 add_action( 'woocommerce_after_checkout_billing_form', 'njengah_after_checkout_billing_form', 10 );
		


ฟังก์ชัน njengah_after_checkout_billing_form(){

echo '<h2>woocommerce_after_checkout_billing_form</h2>';

} 

6. woocommerce_before_checkout_registration_form

woocommerce_before_checkout_registration_form hook ถูกกำหนดในเทมเพลตแบบฟอร์มการเรียกเก็บเงินหลังจากแบบฟอร์มการสร้างบัญชี การดำเนินการนี้จะดำเนินการสำหรับผู้ใช้ทั่วไป

 add_action('woocommerce_before_checkout_registration_form', 'njengah_checkout_billing');
		


ฟังก์ชัน njengah_checkout_billing () {

echo '<h2>woocommerce_before_checkout_registration_form</h2>';

} 

7. woocommerce_after_checkout_registration_form

woocommerce_after_checkout_registration_form hook ถูกกำหนดในเทมเพลตฟอร์มการเรียกเก็บเงิน การดำเนินการนี้จะดำเนินการสำหรับผู้ใช้ทั่วไป

 add_action('woocommerce_after_checkout_registration_form', 'njengah_after_checkout_registration_form');
		


ฟังก์ชัน njengah_after_checkout_registration_form () {

echo '<h2>woocommerce_after_checkout_registration_form</h2>';

} 

8. woocommerce_checkout_shipping

hook woocommerce_checkout_shipping ถูกกำหนดในเทมเพลตฟอร์มการจัดส่งก่อนแบบฟอร์มการจัดส่ง

 add_action('woocommerce_checkout_shipping', 'njengah_checkout_shipping');
		


ฟังก์ชัน njengah_checkout_shipping () {

echo '<h2>woocommerce_checkout_shipping</h2>';

} 

9. woocommerce_before_checkout_shipping_form

woocommerce_before_checkout_shipping_form hook ถูกกำหนดก่อนเริ่มแบบฟอร์มการจัดส่ง

 add_action( 'woocommerce_before_checkout_shipping_form', 'njengah_before_checkout_shipping_form', 10 );
		


ฟังก์ชัน njengah_before_checkout_shipping_form(){

echo '<h2>woocommerce_before_checkout_shipping_form</h2>';

} 

10. woocommerce_after_checkout_shipping_form

woocommerce_after_checkout_shipping_form hook ถูกกำหนดหลังจากกรอกแบบฟอร์มการจัดส่งเสร็จสิ้น

 add_action( 'woocommerce_after_checkout_shipping_form', 'njengah_after_checkout_shipping_form', 10 );
		


ฟังก์ชัน njengah_after_checkout_shipping_form(){

echo '<h2>woocommerce_after_checkout_shipping_form</h2>';

} 

11. woocommerce_before_order_notes

woocommerce_before_order_notes hook ถูกกำหนดก่อนฟิลด์บันทึกคำสั่งซื้อในหน้าชำระเงิน

 add_action( 'woocommerce_before_order_notes', 'njengah_before_order_notes', 10 );

ฟังก์ชัน njengah_before_order_notes(){

echo '<h2>woocommerce_before_order_notes</h2>';

} 

12. woocommerce_after_order_notes

woocommerce_after_order_notes hook ถูกกำหนดหลังจากฟิลด์บันทึกคำสั่งซื้อในหน้าชำระเงิน

 add_action( 'woocommerce_after_order_notes', 'njengah_after_order_notes', 10 );

ฟังก์ชัน njengah_after_order_notes(){

echo '<h2>woocommerce_after_order_notes</h2>';

} 

13. woocommerce_checkout_after_customer_details

woocommerce_checkout_after_customer_details hook ถูกวางไว้หลังจากเสร็จสิ้นรายละเอียดของลูกค้าที่อยู่หลังฟิลด์การเรียกเก็บเงินและการจัดส่ง

 add_action( 'woocommerce_checkout_after_customer_details', 'njengah_checkout_after_customer_details', 10 );

ฟังก์ชัน njengah_checkout_after_customer_details(){

echo '<h2>woocommerce_checkout_after_customer_details</h2>';

} 

14. woocommerce_checkout_before_order_review_heading

woocommerce_checkout_before_order_review_heading hook ถูกกำหนดในเทมเพลตการชำระเงินก่อนหัวข้อการตรวจสอบคำสั่งซื้อที่เป็น "คำสั่งซื้อของคุณ" เบ็ดนี้ถูกเพิ่มใน WooCommerce v3.6.0

 add_action('woocommerce_checkout_before_order_review_heading', 'njengah_checkout_before_order_review_heading');

ฟังก์ชั่น njengah_checkout_before_order_review_heading () {

echo '<h2>woocommerce_checkout_before_order_review_heading</h2>';

} 

15. woocommerce_checkout_order_review

woocommerce_checkout_order_review hook ถูกกำหนดไว้ในเทมเพลตการชำระเงินหลัก เทมเพลตตารางตรวจสอบคำสั่งซื้อรวมอยู่ด้วยโดยใช้เบ็ดนี้

 add_action('woocommerce_checkout_order_review', 'njengah_checkout_order_review');

ฟังก์ชัน njengah_checkout_order_review () {

echo '<h2>woocommerce_checkout_order_review</h2>';

} 

16. woocommerce_checkout_before_order_review

woocommerce_checkout_before_order_review hook ถูกกำหนดก่อนรายละเอียดการสั่งซื้อในหน้าชำระเงิน

 add_action( 'woocommerce_checkout_before_order_review', 'njengah_checkout_before_order_review', 10 );

ฟังก์ชัน njengah_checkout_before_order_review(){

echo '<h2>woocommerce_checkout_before_order_review</h2>';

} 

17. woocommerce_review_order_before_cart_contents

woocommerce_review_order_before_cart_contents hook ถูกกำหนดไว้ภายในตัวตารางคำสั่งก่อนเนื้อหา

 add_action( 'woocommerce_review_order_before_cart_contents', 'njengah_review_order_before_cart_contents', 10 );

ฟังก์ชัน njengah_review_order_before_cart_contents (){

echo '<h2>woocommerce_review_order_before_cart_contents</h2>';

} 

18. woocommerce_review_order_after_cart_contents

woocommerce_review_order_after_cart_contents hook ถูกกำหนดไว้ภายในตัวตารางคำสั่งหลังจากเนื้อหาทั้งหมด

 add_action( 'woocommerce_review_order_after_cart_contents', 'njengah_review_order_after_cart_contents', 10 );

ฟังก์ชัน njengah_review_order_after_cart_contents (){

echo '<h2>woocommerce_review_order_after_cart_contents</h2>';

} 

19. woocommerce_review_order_before_shipping

woocommerce_review_order_before_shipping hook ถูกกำหนดไว้ก่อนส่วนการจัดส่งในตารางการสั่งซื้อ

 add_action( 'woocommerce_review_order_before_shipping', 'njengah_review_order_before_shipping', 10 );

ฟังก์ชัน njengah_review_order_before_shipping(){

echo '<h2>woocommerce_review_order_before_shipping</h2>';

} 

20. woocommerce_review_order_after_shipping

hook woocommerce_review_order_after_shipping ถูกกำหนดหลังจากส่วนการจัดส่งในตารางรายละเอียดคำสั่งซื้อ

 add_action( 'woocommerce_review_order_after_shipping', 'njengah_review_order_after_shipping', 10 );

ฟังก์ชัน njengah_review_order_after_shipping(){

echo '<h2>woocommerce_review_order_after_shipping</h2>';

} 

21. woocommerce_review_order_before_order_total

woocommerce_review_order_before_order_total hook ถูกกำหนดก่อนส่วนรวม & หลังส่วนการจัดส่งในตารางรายละเอียดคำสั่งซื้อ

 add_action( 'woocommerce_review_order_before_order_total', 'njengah_review_order_before_order_total', 10 );

ฟังก์ชัน njengah_review_order_before_order_total(){

echo '<h2>woocommerce_review_order_before_order_total</h2>';

} 

22. woocommerce_review_order_after_order_total

woocommerce_review_order_after_order_total hook ถูกกำหนดหลังจากส่วนรวม & ในตารางรายละเอียดคำสั่งซื้อ

 add_action( 'woocommerce_review_order_after_order_total', 'njengah_review_order_after_order_total', 10 );

ฟังก์ชัน njengah_review_order_after_order_total(){

echo '<h2>woocommerce_review_order_after_order_total</h2>';

} 

23. woocommerce_review_order_before_payment

woocommerce_review_order_before_payment hook ถูกกำหนดไว้ก่อนส่วนวิธีการชำระเงินในหน้าชำระเงิน

 add_action( 'woocommerce_review_order_before_payment', 'njengah_review_order_before_payment', 10 );

ฟังก์ชัน njengah_review_order_before_payment(){

echo '<h2>woocommerce_review_order_before_payment</h2>';

} 

24. woocommerce_review_order_before_submit

woocommerce_review_order_before_submit hook ถูกกำหนดไว้ก่อนปุ่ม 'Place Order' ในหน้าชำระเงิน

 add_action( 'woocommerce_review_order_before_submit', 'njengah_review_order_before_submit', 10 );

ฟังก์ชัน njengah_review_order_before_submit(){

echo '<h2>woocommerce_review_order_before_submit</h2>';

} 

25. woocommerce_review_order_after_submit

woocommerce_review_order_after_submit hook ถูกกำหนดหลังจากปุ่ม 'สั่งซื้อ' ในหน้าชำระเงิน

 add_action( 'woocommerce_review_order_after_submit', 'njengah_review_order_after_submit', 10 );

ฟังก์ชัน njengah_review_order_after_submit(){

echo '<h2>woocommerce_review_order_after_submit</h2>';

} 

26. woocommerce_review_order_after_payment

woocommerce_review_order_after_payment hook ถูกกำหนดหลังจากส่วนการชำระเงินทั้งหมด รวมถึงปุ่ม 'Place Order'

 add_action( 'woocommerce_review_order_after_payment', 'njengah_review_order_after_payment', 10 );

ฟังก์ชัน njengah_review_order_after_payment(){

echo '<h2>woocommerce_review_order_after_payment</h2>';

} 

27. woocommerce_checkout_after_order_review

hook woocommerce_checkout_after_order_review ถูกกำหนดหลังจากส่วนการตรวจสอบคำสั่งซื้อในหน้าชำระเงิน ซึ่งรวมถึงตารางรายละเอียดคำสั่งซื้อและส่วนการชำระเงิน

 add_action( 'woocommerce_checkout_after_order_review', 'njengah_checkout_after_order_review', 10 );

ฟังก์ชัน njengah_checkout_after_order_review(){

echo '<h2>woocommerce_checkout_after_order_review</h2>';

} 

28. woocommerce_after_checkout_form

woocommerce_after_checkout_form hook ถูกกำหนดไว้ที่ส่วนท้ายหลังแบบฟอร์มการชำระเงิน

 add_action( 'woocommerce_after_checkout_form', 'njengah_after_checkout_form', 10 );

ฟังก์ชัน njengah_after_checkout_form(){

echo '<h2>woocommerce_after_checkout_form</h2>';

} 

บทสรุป

โพสต์นี้แสดงให้เห็นถึง WooCommerce hooks ทั้งหมดที่มีอยู่ในหน้าชำระเงิน hooks เหล่านี้ช่วยให้คุณปรับแต่งหน้าการชำระเงินตามความต้องการของคุณ

หากนี่เป็นครั้งแรกที่คุณใช้งาน hooks คุณสามารถคัดลอกสคริปต์เหล่านี้และวางลงในไฟล์ functions.php ของ Child Theme ของคุณได้โดยตรง ตอนนี้คุณสามารถสร้างสรรค์และปรับแต่งหน้าชำระเงินเพื่อเพิ่มอัตราการแปลงได้

หรือคุณสามารถใช้ปลั๊กอินเพื่อปรับแต่งส่วนนี้หากคุณไม่คุ้นเคยกับรหัส หากคุณต้องการปรับแต่งเพิ่มเติม โปรดพิจารณาจ้างนักพัฒนา WordPress ที่มีคุณสมบัติเหมาะสม

บทความที่คล้ายกัน

1. ธีมหน้าร้าน WooCommerce คืออะไร? [ตอบ]
2. วิธีใส่ตะกร้าสินค้า WooCommerce และชำระเงินในหนึ่งหน้า
3. วิธีเพิ่มฟิลด์พิเศษในแบบฟอร์มการชำระเงิน WooCommerce
4. วิธีปรับแต่งหน้าชำระเงินหน้าร้าน
5. วิธีลบหน้ารถเข็น WooCommerce Storefront Theme
6. วิธีซ่อนภาษีในการชำระเงินหากมีค่าฟิลด์ WooCommerce
7. วิธีซ่อนฟิลด์ชื่อบริษัท WooCommerce หน้าชำระเงิน
8. วิธีลบปุ่มชำระเงิน WooCommerce
9. วิธีเปลี่ยนปริมาณในการชำระเงิน WooCommerce
10. วิธีลบข้อมูลเพิ่มเติมหน้าชำระเงิน WooCommerce