วิธีตั้งค่าการเปลี่ยนเส้นทาง WooCommerce หลังจากชำระเงิน

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

อย่างไรก็ตาม หน้าไม่ได้ส่งจริงๆ คุณอาจต้องการเปลี่ยนเส้นทางไปยัง หน้าขอบคุณ ที่กำหนดเอง

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

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

นี่เป็นสิ่งสำคัญหากคุณต้องการให้ร้านค้าออนไลน์ของคุณสร้างยอดขายเพิ่มขึ้นและเพิ่มการเข้าชม!

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

จุดประสงค์หลักของบทช่วยสอนนี้คือเพื่อช่วยให้นักพัฒนาเข้าใจว่าการปรับแต่งหน้าต่างๆ โดยใช้ข้อมูลโค้ดหรือเขียนทับเทมเพลต WooCommerce นั้นง่ายมาก

คุณต้องการอะไรในการเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าขอบคุณแบบกำหนดเอง

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

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

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

มาดูกันว่าคุณจะบรรลุเป้าหมายนี้ได้อย่างไร

1. การเปลี่ยนเส้นทางลูกค้าไปยังหน้าขอบคุณแบบกำหนดเอง

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

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

a) ขั้นตอนในการเปลี่ยนเส้นทางลูกค้าหลังจากชำระเงินใน WooCommerce

นี่คือขั้นตอนที่คุณต้องปฏิบัติตามเพื่อเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าที่กำหนดเอง:

1. ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
2. จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > เมนูตัวแก้ไขธีม เมื่อเปิดหน้า Theme Editor ให้มองหาไฟล์ฟังก์ชันของธีมที่เราจะเพิ่มฟังก์ชันที่จะเปลี่ยนเส้นทางลูกค้าหลังจากชำระเงิน
3. เพิ่มรหัสต่อไปนี้ ในไฟล์ php :

add_action( 'woocommerce_thankyou', 'njengah_redirectcustom');

function njengah_redirectcustom( $order_id ){

 $order = wc_get_order( $order_id );

 $url = 'https://yoursite.com/custom-url';

if ( ! $order->has_status( 'failed' ) ) {

 wp_safe_redirect( $url );

exit;

 }

}

4. นี่คือผลลัพธ์:

รหัสทำงานอย่างไร

ข้อมูลโค้ดเปลี่ยนเส้นทางลูกค้าไปยังหน้าที่กำหนดเองหลังจากที่ผู้ใช้ทำการซื้อเสร็จสิ้น

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

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

b) การเขียนทับเทมเพลต WooCommerce เพื่อตั้งค่า WooCommerce ขอบคุณหน้า

คุณสามารถตั้งค่าหน้าขอบคุณแบบกำหนดเองได้อย่างง่ายดายโดยเขียนทับเทมเพลต WooCommerce คุณต้องใช้ hook redirect ของเทมเพลตและฟังก์ชัน callback ที่มี URL เปลี่ยนเส้นทาง

นี่คือขั้นตอนง่าย ๆ ที่คุณต้องปฏิบัติตาม:

1. สิ่งแรกคือการตรวจสอบว่าผู้ใช้อยู่ในหน้าชำระเงิน หน้าคำสั่งซื้อ หรือหน้าคำสั่งซื้อที่ได้รับ ก่อนที่เราจะสร้างหน้าเปลี่ยนเส้นทางที่กำหนดเอง เราจะใช้ฟังก์ชัน template_redirect() หลังจากนั้น เพิ่ม hook การดำเนินการ template_redirect ดังที่แสดงด้านล่าง:

 add_action('template_redirect', 'your_callback_function');

2. ขั้นตอนต่อไปคือการสร้างฟังก์ชันเรียกกลับที่คุณอ้างอิงในขอเปลี่ยนเส้นทางแม่แบบด้านบน อย่างไรก็ตาม สิ่งสำคัญที่ควรทราบคือชื่อในฟังก์ชันโทรกลับและ hook ควรตรงกัน
3. ในการเพิ่มหน้าที่คุณต้องการให้ผู้ใช้ถูกเปลี่ยนเส้นทางหลังจากชำระเงินสำเร็จ เราจำเป็นต้องใช้ฟังก์ชัน wp_redirect() ในฟังก์ชันเรียกกลับ เราแนะนำให้เพิ่มทางออกหลังจากฟังก์ชัน wp_redirect ซึ่งจะช่วยหลีกเลี่ยงปัญหาการเปลี่ยนเส้นทาง
4. ในการใส่โค้ด ให้คลิกที่ Appearance Menu > Theme Editor Menu เมื่อหน้า Theme Editor เปิดขึ้น ให้มองหาไฟล์ฟังก์ชันของธีมที่เราจะเพิ่มฟังก์ชันดังกล่าว
5. บันทึกการเปลี่ยนแปลงหรืออัปเดตธีมของคุณ functions.php หรือไฟล์ปลั๊กอิน

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

2. ปรับแต่งหน้าขอบคุณ WooCommerce ด้วยตัวกรอง

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

Action hooks ให้คุณแทรกโค้ดที่กำหนดเองตามจุดต่างๆ ในทางกลับกัน Filter hook ช่วยให้คุณสามารถจัดการและส่งคืนตัวแปรที่ส่งผ่าน

ในส่วนนี้ เราจะใช้ตัวกรองเพื่อเปลี่ยนชื่อ ปรับแต่งชื่อเรื่อง และเปลี่ยนข้อความก่อนข้อมูลการสั่งซื้อ

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

ก) เปลี่ยนชื่อเพจขอบคุณ

WooCommerce มีฟังก์ชัน is_order_received_page() ในไฟล์ include/wc-conditional-functions.php เราจะใช้ฟังก์ชันนี้เพื่อเปลี่ยนชื่อเพจ

นี่คือขั้นตอนที่คุณต้องปฏิบัติตาม:

1. ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
2. จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > เมนูตัวแก้ไขธีม เมื่อเปิดหน้า Theme Editor ให้มองหาไฟล์ฟังก์ชันของธีมที่เราจะเพิ่มฟังก์ชันที่จะเปลี่ยนชื่อของหน้าขอบคุณ
3. เพิ่มรหัสต่อไปนี้ ในไฟล์ php :

add_filter( 'woocommerce_endpoint_order-received_title', 'njengah_thank_you_title' );

function njengah_thank_you_title( $old_title ){

return 'You\'re awesome!';

}

4. นี่คือผลลัพธ์:

b) ปรับแต่งชื่อเรื่อง

คุณสามารถเพิ่มชื่อหน้า 'ขอบคุณ' ได้ คุณสามารถเพิ่มรายละเอียด เช่น ชื่อลูกค้าหรืออย่างอื่นได้

เพื่อให้บรรลุสิ่งนี้ นี่คือขั้นตอนที่คุณต้องปฏิบัติตาม:

1. ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
2. จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > เมนูตัวแก้ไขธีม เมื่อเปิดหน้าตัวแก้ไขธีม ให้มองหาไฟล์ฟังก์ชันของธีมที่เราจะเพิ่มฟังก์ชันที่จะปรับแต่งชื่อเรื่องของหน้าขอบคุณ
3. เพิ่มรหัสต่อไปนี้ ในไฟล์ php :

add_filter( 'woocommerce_endpoint_order-received_title', 'njengah_personalize_order_received_title', 10, 2 );

function njengah_personalize_order_received_title( $title, $id ) {

if ( is_order_received_page() && get_the_ID() === $id ) {

global $wp;

// Get the order. Line 9 to 17 are present in order_received() in includes/shortcodes/class-wc-shortcode-checkout.php file

$order_id  = apply_filters( 'woocommerce_thankyou_order_id', absint( $wp->query_vars['order-received'] ) );

$order_key = apply_filters( 'woocommerce_thankyou_order_key', empty( $_GET['key'] ) ? '' : wc_clean( $_GET['key'] ) );

if ( $order_id > 0 ) {

$order = wc_get_order( $order_id );

if ( $order->get_order_key() != $order_key ) {

$order = false;

}

}

if ( isset ( $order ) ) {

//$title = sprintf( "You are awesome, %s!", esc_html( $order->billing_first_name ) ); // use this for WooCommerce versions older then v2.7

$title = sprintf( "You are awesome, %s!", esc_html( $order->get_billing_first_name() ) );

}

}

return $title;

}

4. นี่คือผลลัพธ์:

ค) การเปลี่ยนแปลงข้อความก่อนสั่งซื้อข้อมูล

โดยค่าเริ่มต้น ข้อความก่อนข้อมูลการสั่งซื้อคือ “ขอบคุณ การสั่งซื้อของคุณได้รับการตอบรับ." ข้อความจะแสดงบนหน้าขอบคุณ มันมาจากไฟล์ templates/checkout/thankyou.php

มีตัวกรองใน WooCommerce ที่ให้คุณเปลี่ยนข้อความนี้: woocommerce_thankyou_order_received_text

หากต้องการเปลี่ยน นี่คือขั้นตอนที่คุณต้องปฏิบัติตาม:

1. ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
2. จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > เมนูตัวแก้ไขธีม เมื่อเปิดหน้าตัวแก้ไขธีม ให้มองหาไฟล์ฟังก์ชันของธีมที่เราจะเพิ่มฟังก์ชันที่จะปรับแต่งชื่อเรื่องของหน้าขอบคุณ
3. เพิ่มรหัสต่อไปนี้ ในไฟล์ php :

add_filter('woocommerce_thankyou_order_received_text', 'njengah_change_order_received_text', 10, 2 );

function njengah_change_order_received_text( $str, $order ) {

$new_str = $str . ' We have emailed the purchase receipt to you.';

return $new_str;

}

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

add_filter('woocommerce_thankyou_order_received_text', 'njengah_change_order_received_text', 10, 2 );

function njengah_change_order_received_text( $str, $order ) {

$new_str = 'We have emailed the purchase receipt to you. Please make sure to fill <a href="http://example.com/some-form.pdf">this form</a> before attending the event';

return $new_str;

}

6. นี่คือผลลัพธ์:

3. รวบรวมรายละเอียดเพิ่มเติม

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

หากคุณต้องการบรรลุสิ่งนี้ คุณต้องสร้างแบบฟอร์ม คุณต้องส่งและประมวลผลคำขอ AJAX เพื่อลงทะเบียนในส่วนหลัง

ให้เราดูขั้นตอนที่คุณต้องปฏิบัติตาม:

1. ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
2. จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > เมนูตัวแก้ไขธีม เมื่อเปิดหน้า Theme Editor ให้มองหาไฟล์ฟังก์ชั่นธีม/

3. ก่อนอื่นเราต้องเพิ่มแบบฟอร์ม หากคุณต้องการให้ปรากฏหลังชื่อ คุณต้องใช้ woocommerce_thankyou_order_received_text hook

4. เพิ่มข้อมูลโค้ดต่อไปนี้เพื่อเพิ่มแบบฟอร์มสำรวจ:

add_action( 'woocommerce_thankyou', 'njengah_poll_form', 4 );

function njengah_poll_form( $order_id ) {

echo '<h2>What do you think about my shop?</h2>;

<form id="thankyou_form"&gt;

<label><input type="radio" name="like" value="superb"&gt; Superb</label>

<label><input type="radio" name="like" value="good enough"&gt; Good enough</label>

<label><input type="radio" name="like" value="could be better"&gt; Could be better</label>;

<input type="hidden" name="action" value="collect_feedback" />

<input type="hidden" name="order_id" value="' . $order_id . '" />

' . wp_nonce_field( 'thankyou'.$order_id, 'thankyou_nonce', true, false ) . '

</form>';

}

5. ขั้นตอนต่อไปคือการส่งคำขอ AJAX เมื่อต้องการทำสิ่งนี้ ให้เพิ่มรหัสต่อไปนี้ในไฟล์เดียวกัน:

add_action( 'wp_footer', 'njengah_send_thankyou_ajax' );

function njengah_send_thankyou_ajax(){

// exit if we are not on the Thank You page

if( !is_wc_endpoint_url( 'order-received' ) ) return;

echo "<script>

jQuery( function( $ ) {

$('input[type=radio][name=like]').change(function() {

$.ajax({

url: '" . admin_url('admin-ajax.php') . "',

type: 'POST',

data: $('#thankyou_form').serialize(),

beforeSend : function( xhr ){

$('#thankyou_form').html('Thank you! You feedback has been send!');

},

success : function( data ){

console.log( data );

}

});

});

});

</script>";

}

6. นี่คือผลลัพธ์:
7. หลังจากนั้น เราต้องประมวลผลคำขอ AJAX โดยเพิ่มรหัสต่อไปนี้ในไฟล์เดียวกัน:

add_action( 'wp_ajax_collect_feedback', 'njengah_thankyou_ajax' ); // wp_ajax_{ACTION}

add_action( 'wp_ajax_nopriv_collect_feedback', 'njengah_thankyou_ajax' );

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

// ด่านตรวจสอบความปลอดภัย

check_ajax_referer( 'ขอบคุณ'.$_POST['order_id'], 'thankyou_nonce' );

ถ้า( $order = wc_get_order( $_POST['order_id'] ) ) {

$note = $order->get_formatted_billing_full_name() . 'นึกว่าร้าน' . $_POST['ถูกใจ'] '.';

$order->add_order_note( $note, 0, true );

}

ตาย();

}

8. นี่คือผลลัพธ์ในแบ็กเอนด์:

บทสรุป

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

คุณต้องมีความคิดสร้างสรรค์มากเมื่อแก้ไขหน้านี้เพื่อเพิ่มอัตราการคงอยู่ของคุณ

อย่างไรก็ตาม คุณควรระมัดระวังในการแก้ไขไฟล์ functions.php อยู่เสมอ หากคุณทำผิดพลาด ข้อผิดพลาดจะปรากฏขึ้น

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

สิ่งนี้จะดึงดูดลูกค้าของคุณและพวกเขาจะมีแรงจูงใจที่จะซื้อผลิตภัณฑ์เพิ่มเติมจากร้านค้าของคุณ

เราหวังว่าบทช่วยสอนนี้จะช่วยแก้ปัญหาของคุณได้

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

1. การเปลี่ยนเส้นทาง WooCommerce หลังจากชำระเงิน : เปลี่ยนเส้นทางไปยังหน้าขอบคุณแบบกำหนดเอง
2. 100+ Tips, Tricks & Snippets Ultimate WooCommerce ซ่อนคู่มือ
3. วิธีเพิ่มรูปสินค้าหน้าชำระเงิน WooCommerce
4. คู่มือตัวยึดตำแหน่งภาพ WooCommerce
5. วิธีซ่อนน้ำหนักของผลิตภัณฑ์ใน WooCommerce
6. วิธีซ่อนแท็กในธีมหน้าร้าน WooCommerce
7. วิธีการเปลี่ยนรหัสคูปอง WooCommerce
8. วิธีลบ เปลี่ยนชื่อ และเพิ่มตัวเลือกการจัดเรียงหน้าร้าน
9. วิธีซ่อน SKU ของผลิตภัณฑ์ใน WooCommerce
10. วิธีซ่อนหมวดหมู่จากหน้าร้านค้า WooCommerce
11. วิธีซ่อนราคาถ้าเป็นศูนย์ใน WooCommerce
12. วิธีซ่อนศูนย์ต่อท้าย WooCommerce
13. วิธีซ่อนและเปลี่ยนชื่อที่อยู่แท็บหน้าบัญชีของฉัน WooCommerce
14. วิธีซ่อนจำนวนผลิตภัณฑ์ WooCommerce
15. วิธีเพิ่มข้อความการชำระเงินที่กำหนดเองของ WooCommerce
16. วิธีการส่งออกสินค้าใน WooCommerce
17. วิธีการตั้งค่า WooCommerce ปริมาณการสั่งซื้อสูงสุดหรือขั้นต่ำ
18. วิธีซ่อน SKU, หมวดหมู่, แท็ก Meta Product Page WooCommerce
19. วิธีเลือกทั้งหมดยกเว้นลูกสุดท้ายใน CSS » CSS ไม่ใช่ตัวอย่างลูกสุดท้าย
20. วิธีปรับแต่งหน้าชำระเงินหน้าร้าน