วิธีใช้ WooCommerce Checkout Hooks

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

WooCommerce hook คืออะไร?

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

ตะขอมีสองประเภท:

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

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

WooCommerce Checkout Hooks

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

WooCommerce hooks ทำงานเหมือนกับ WordPress native hooks ดังนั้น หากคุณคุ้นเคยกับ WordPress hooks การเรียนรู้ WooCommerce hooks จะเป็นเรื่องง่าย

ก่อนที่เราจะเริ่มต้น

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

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

จะใช้ WooCommerce Checkout Hooks ได้อย่างไร?

ดังที่เราเห็นก่อนหน้านี้ มี WooCommerce action hooks และ filter hooks และทั้งคู่มีไวยากรณ์ที่คล้ายกัน

นี่คือตัวอย่างของแอคชั่นฮุค:

 add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
ฟังก์ชัน QuadLayers_callback_function(){
    #เพิ่มรหัสของคุณที่นี่
}

โดยที่ woocommerce_after_checkout_billing_form คือ hook และ QuadLayers_callback_function คือฟังก์ชันที่เราสร้างขึ้นเพื่อเพิ่มสคริปต์ที่กำหนดเองของเรา

ในทางกลับกัน Filter hook ทำงานในลักษณะเดียวกัน แต่จำเป็นต้องรับและส่งคืนพารามิเตอร์ในฟังก์ชัน ตัวอย่างเช่น:

 add_filter('woocommerce_breadcrumb_defaults','quadlayers_change_breadcrumb');
ฟังก์ชัน quadlayers_change_breadcrumb (เนื้อหา $) {
$content .= "QuadLayers";
ส่งคืนเนื้อหา $;
}

รายการขอเช็คเอาต์สำหรับ WooCommerce

มี WooCommerce hooks มากมายที่คุณสามารถใช้ได้ในหน้าชำระเงิน บางส่วนหลักคือ:

• woocommerce_before_checkout_form
• woocommerce_checkout_before_customer_details
• woocommerce_checkout_billing
• woocommerce_before_checkout_billing_form
• woocommerce_checkout_shipping
• woocommerce_before_order_notes
• woocommerce_after_order_notes
• woocommerce_checkout_after_order_review
• woocommerce_checkout_after_customer_details
• woocommerce_review_order_before_cart_contents
• woocommerce_review_order_before_shipping
• woocommerce_review_order_after_order_total
• woocommerce_checkout_order_review
• woocommerce_review_order_before_submit
• woocommerce_review_order_before_payment
• woocommerce_review_order_after_submit
• woocommerce_review_order_after_payment
• woocommerce_after_checkout_form

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

ตัวอย่างเช่น สมมติว่าคุณต้องการเพิ่มเนื้อหาบางส่วนหลังแบบฟอร์มการเรียกเก็บเงินและก่อนชื่อส่วนการจัดส่ง คุณจะใช้สิ่งนี้:

 add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
ฟังก์ชัน QuadLayers_callback_function(){
echo 'ไปที่ข้อความเนื้อหาหรือ html';
}

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

วิธีปรับแต่งหน้าชำระเงินด้วย WooCommerce hooks

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

เพิ่มรูปภาพในการตรวจสอบคำสั่งซื้อ

คุณสามารถเพิ่มรูปภาพลงในหน้าตรวจสอบคำสั่งซื้อได้ ในกรณีนี้ เราได้เพิ่มรหัส QR แต่คุณสามารถใส่รูปภาพอื่นๆ, GIF แบบเคลื่อนไหว หรือรูปภาพพื้นหลังได้

 add_action('woocommerce_review_order_before_payment','example_callback');
ฟังก์ชัน example_callback ( ) {
    echo '<img src="https://quadlayers.com/wp-content/uploads/2020/06/frame.png" width="200px" height="200px">';  
} 

เปลี่ยนเบรดครัมบ์ในหน้าชำระเงิน

คุณสามารถป้องกันไม่ให้ผู้ใช้ย้อนกลับไปยังโฮมเพจโดยแก้ไขเบรดครัมบ์ ในตัวอย่างนี้ เราจะแสดงวิธีเปลี่ยนข้อความ หน้าแรก ในเบรดครัมบ์สำหรับ Store

 add_filter( 'woocommerce_breadcrumb_defaults', 'quadlayers_change_breadcrumb' );
ฟังก์ชัน 'quadlayers_change_breadcrumb' ( $default ) {
    $default['home'] = 'ร้านค้า';
    คืนค่า $ เริ่มต้น;
}

แสดงป้ายความน่าเชื่อถือถัดจากปุ่มสั่งซื้อ

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

 add_action( 'woocommerce_review_order_after_submit', 'quadlayers_trust_badges' );
ฟังก์ชั่น quadlayers_trust_badges () {
    echo '<div class="trust-badges">
    <img src="https://www.pngitem.com/pimgs/m/19-197703_transparent-secure-checkout-png-best-trust-badges-for.png">
    </div><div class="trust-badge-message"><i>ฉันเพิ่มป้ายความน่าเชื่อถือด้านบนด้วย WooCommerce hook</i></div>';
} 

แก้ไขช่องการชำระเงินที่มีอยู่

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

 add_filter( 'woocommerce_checkout_fields', 'quadlayers_labels_placeholders', 9999 ); 
ฟังก์ชั่น quadlayers_labels_placeholders ($f) { 	
	$f['billing']['billing_first_name']['label'] = 'คุณชื่ออะไร';
	$f['order']['order_comments']['placeholder'] = 'คุณคิดอะไรอยู่'; 
	ส่งคืน $f; 
} 

เพิ่มช่องการชำระเงินแบบกำหนดเอง

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

 add_action( 'woocommerce_after_order_notes', 'quadlayers_subscribe_checkout' );
add_action( 'woocommerce_checkout_update_order_meta', 'quadlayers_save_function' );

// แทรกช่องทำเครื่องหมายในการชำระเงิน woocommerce 
ฟังก์ชั่น quadlayers_subscribe_checkout ($checkout) { 
	woocommerce_form_field ( 'สมัครแล้ว', อาร์เรย์ (
		'type' => 'ช่องทำเครื่องหมาย',
		'class' => array('misha-field form-row-wide'),
		'label' => ' สมัครรับจดหมายข่าวของเรา',
		), $checkout->get_value( 'สมัครแล้ว' ) ); 
}
// บันทึกค่าฟิลด์
ฟังก์ชัน quadlayers_save_function ($order_id ){ 
	if( !empty( $_POST['contactmethod'] ) )
		update_post_meta( $order_id, 'ติดต่อวิธี', sanitize_text_field( $_POST['contactmethod'] ) ); 
	if( !empty( $_POST['subscribed'] ) && $_POST['subscribed'] == 1 )
		update_post_meta( $order_id, 'สมัครแล้ว', 1 ); 
}

ปรับแต่งหน้าชำระเงินด้วยปลั๊กอิน

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

• Checkout Manager สำหรับ WooCommerce : ด้วยการติดตั้งที่ใช้งานมากกว่า 70,000 รายการ นี่เป็นหนึ่งในปลั๊กอินการชำระเงินที่ได้รับความนิยมมากที่สุดสำหรับ WooCommerce Checkout Manager ให้คุณปรับแต่ง เพิ่ม แก้ไข และลบฟิลด์ในหน้าชำระเงิน มีเวอร์ชันฟรีและแผนพรีเมียม 3 แผนซึ่งเริ่มต้นที่ 20 USD
• การชำระเงินโดยตรงสำหรับ WooCommerce : ด้วยเครื่องมือ freemium นี้ คุณสามารถทำให้กระบวนการเช็คเอาต์ง่ายขึ้นและเพิ่มอัตราการแปลงของคุณ คุณสามารถย่นขั้นตอนการซื้อโดยเปลี่ยนเส้นทางลูกค้าของคุณจากหน้าผลิตภัณฑ์ไปยังจุดชำระเงินได้โดยตรง Direct Checkout มีเวอร์ชันฟรีและแผนพรีเมียมที่เริ่มต้นที่ 20 USD (ชำระครั้งเดียว)

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้ปลั๊กอินเหล่านี้และปรับปรุงหน้าการชำระเงิน โปรดดูคำแนะนำโดยละเอียดของเรา

บทสรุป

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

สำหรับตัวอย่างและข้อมูลเพิ่มเติมเกี่ยวกับวิธีการปรับแต่งหน้าการชำระเงิน WooCommerce โปรดดูคำแนะนำทีละขั้นตอนนี้

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