วิธีปรับแต่งหน้าขอบคุณ WooCommerce ด้วยรหัส
เผยแพร่แล้ว: 2022-09-15สิ่งสำคัญที่สุดของหน้าขอบคุณที่ประสบความสำเร็จคือการทำให้แน่ใจว่าคนอื่นเห็น คุณไม่ต้องการอะไรที่หรูหราหรือซับซ้อน เพียงแค่ต้องสร้างความประทับใจแรกที่ดีด้วยการโดดเด่นจากส่วนอื่นๆ ของไซต์
วัตถุประสงค์ของบทความนี้คือการจัดเตรียมบทช่วยสอนทั่วไปเกี่ยวกับวิธีการปรับแต่งหน้าขอบคุณ WooCommerce หรือหน้าสั่งซื้อที่ได้รับโดยใช้รหัส
ทำไมต้องปรับแต่งหน้าขอบคุณ WooCommerce?
หน้าขอบคุณช่วยให้คุณติดต่อกับลูกค้าได้หลังจากการซื้อ
คุณอาจมองข้ามความสำคัญของการยืนยันคำสั่งซื้อหรือหน้าขอบคุณในร้านค้าออนไลน์ของคุณ แต่จริงๆ แล้วนี่เป็นส่วนสำคัญของกระบวนการขาย
หน้าขอบคุณเริ่มต้นของ WooCommerce นั้นน่าเบื่อและเป็นทางตันสำหรับลูกค้า ลูกค้าสับสนว่าจะเป็นอย่างไรต่อไป
แต่หากคุณปรับแต่งเอง คุณสามารถ:
- เพิ่มคำแนะนำในการเริ่มต้นใช้งาน ขั้นตอนต่อไป...
- ส่งเสริมผลิตภัณฑ์ที่เกี่ยวข้องผ่านการขายต่อเนื่องและการขายต่อยอด
- ใช้คูปองเพื่อกระตุ้นให้เกิดการซื้อซ้ำ
- มอบทรัพยากรอันมีค่าให้กับลูกค้า
- ดึงดูดลูกค้าด้วยหลักฐานทางสังคม วิดีโอ ฯลฯ
ด้วยเหตุนี้ เรามาดูกันว่าเราสามารถสร้างและปรับแต่งหน้าขอบคุณที่กำหนดเองได้อย่างง่ายดายโดยใช้โค้ดได้อย่างไร นักพัฒนาที่รักทุกสายตาที่นี่!
ปรับแต่งหน้าขอบคุณ WooCommerce ด้วยรหัส
มีสามวิธีในการปรับแต่งหน้าขอบคุณหรือหน้าคำสั่งซื้อโดยใช้รหัส:
- การสร้างการเปลี่ยนเส้นทาง
- การใช้ฟิลเตอร์
- การเขียนทับไฟล์เทมเพลต
นอกจากนี้ ให้โพสต์นี้ในการเพิ่มโค้ดอย่างปลอดภัยในไฟล์ที่เปิดในแท็บอื่นเพื่อใช้อ้างอิง
มาดูแต่ละวิธีอย่างละเอียดกันสามวิธี
การปรับแต่งหน้าขอบคุณโดยการสร้างการเปลี่ยนเส้นทาง
การเปลี่ยนเส้นทางทำได้ง่ายโดยการสร้างปลั๊กอินใหม่หรือเปิดไฟล์ functions.php และป้อนรหัสต่อไปนี้ที่ส่วนท้ายของไฟล์
add_action( 'template_redirect', 'sa_custom_redirect_after_purchase' );
ฟังก์ชัน sa_custom_redirect_after_purchase() {
ทั่วโลก $wp;
if ( is_checkout() && !empty( $wp->query_vars['order-received'] ) ) {
wp_redirect( 'https://demo.storeapps.org/woocommerce/thank-you/' );
ทางออก;
}
}
นี่คือหน้าขอบคุณที่กำหนดเองหลังจากวางคำสั่งซื้อ
การเปลี่ยนเส้นทางดูเหมือนจะดี แต่สิ่งนี้ขาดสิ่งสำคัญ เช่น ตารางสรุปคำสั่งซื้อ รายละเอียดการเรียกเก็บเงินและการจัดส่ง และข้อมูลสำคัญอื่นๆ ที่ WooCommerce ให้ไว้ในปัจจุบัน
ปรับแต่งหน้าขอบคุณโดยใช้ตัวกรอง
แทนที่จะสร้างหน้าขอบคุณ คุณอาจต้องการเปลี่ยนชื่อหน้าหรือเปลี่ยนข้อความก่อนข้อมูลการสั่งซื้อ ในกรณีเช่นนี้ คุณสามารถใช้ตัวกรองได้
เปลี่ยนชื่อเพจขอบคุณ
add_filter( 'the_title', 'sa_title_order_received', 10, 2 );
ฟังก์ชั่น sa_title_order_received( $ชื่อ, $id ) {
if ( function_exists( 'is_order_received_page' ) && is_order_received_page() && get_the_ID() === $id ) {
$title = "ขอบคุณสำหรับการสั่งซื้อ :)";
}
ส่งคืนชื่อ $;
}
WooCommerce มีฟังก์ชัน is_order_received_page() ในไฟล์ include/wc-conditional-functions.php นี่คือลักษณะที่ชื่อที่เปลี่ยนแปลงจะปรากฏขึ้น:
การปรับแต่งชื่อหน้าขอบคุณ
คุณสามารถทำเช่นนี้เพื่อรวมชื่อของลูกค้าในชื่อหรืออย่างอื่น
add_filter( 'the_title', 'sa_personalize_order_received_title', 10, 2 );
ฟังก์ชั่น sa_personalize_order_received_title( $ชื่อ, $id ) {
ถ้า ( is_order_received_page () && get_the_ID () === $id ) {
ทั่วโลก $wp;
//รับออเดอร์. บรรทัดต่อไปนี้มีอยู่ใน order_received() ในไฟล์ include/shortcodes/class-wc-shortcode-checkout.php
$order_id = Apply_filters( 'woocommerce_thankyou_order_id', absint( $wp->query_vars['order-received'] ) );
$order_key = apply_filters( 'woocommerce_thankyou_order_key', ว่าง( $_GET['key'] ) ? '' : wc_clean( $_GET['key'] ) );
ถ้า ( $order_id > 0) {
$order = wc_get_order( $order_id );
if ( ! $order || ! hash_equals( $order->get_order_key(), $order_key ) ) {
$order = เท็จ;
}
}
if ( $order อินสแตนซ์ของ WC_Order ) {
$title = sprintf( "คุณเจ๋งมาก %s!", esc_html( $order->get_billing_first_name() ) );
}
}
ส่งคืนชื่อ $;
}
ซึ่งจะมีลักษณะดังนี้:
ปรับแต่งข้อความก่อนสั่งซื้อข้อมูล
ข้อความเริ่มต้นที่แสดงก่อนข้อมูลการสั่งซื้อคือ “ขอบคุณ การสั่งซื้อของคุณได้รับการตอบรับ.".
ข้อความนี้มาจากไฟล์ templates/checkout/thankyou.php คุณสามารถเปลี่ยนข้อความนี้โดยใช้ตัวกรองที่มีอยู่ใน WooCommerce ซึ่งก็คือ woocommerce_thankyou_order_received_text
add_filter( 'woocommerce_thankyou_order_received_text', 'sa_update_order_received_text', 10, 2 );
ฟังก์ชั่น sa_update_order_received_text( $text, $order ) {
$text .= 'เราได้ส่งอีเมลใบเสร็จการสั่งซื้อถึงคุณ';
ส่งคืนข้อความ $;
}
รหัสนี้จะต่อท้ายข้อความ "เราได้ส่งอีเมลใบเสร็จการสั่งซื้อถึงคุณแล้ว" ไปยังข้อความที่มีอยู่
หากคุณต้องการเขียนทับข้อความทั้งหมด คุณต้องหลีกเลี่ยงการเชื่อมตัวแปร $text
$text = 'เราได้ส่งอีเมลใบเสร็จการซื้อถึงคุณ';
หากคุณต้องการเพิ่มคำแนะนำที่นี่ซึ่งต้องการให้ลูกค้าดาวน์โหลดแบบฟอร์ม คุณก็สามารถทำได้เช่นกัน
add_filter( 'woocommerce_thankyou_order_received_text', 'sa_change_order_received_text', 10, 2 );
ฟังก์ชั่น sa_change_order_received_text( $text, $order ) {
$text = 'เราได้ส่งใบเสร็จการซื้อไปให้คุณแล้ว โปรดตรวจสอบให้แน่ใจว่าได้กรอก <a href="https://demo.storeapps.org/form.pdf">แบบฟอร์มนี้ก่อนเข้าร่วมกิจกรรม';
ส่งคืนข้อความ $;
}
ซึ่งจะมีลักษณะดังนี้:
ปรับแต่งหน้าขอบคุณโดยเขียนทับไฟล์เทมเพลต WooCommerce
WooCommerce แสดงเนื้อหาของหน้าขอบคุณจากไฟล์เทมเพลต thankyou.php ที่สามารถพบได้ในโฟลเดอร์ woocommerce/templates/checkout/
คุณจะต้องมีความรู้เกี่ยวกับ PHP หากคุณต้องการเลือกวิธีนี้เพื่อปรับแต่งหน้าขอบคุณ WooCommerce
คุณสามารถใช้เทมเพลตของคุณเองได้โดยการคัดลอกไฟล์ thankyou.php ไปยังโฟลเดอร์ธีมของคุณในโครงสร้างโฟลเดอร์ที่คล้ายกัน
ตัวอย่างเช่น หากคุณใช้ธีมหน้าร้าน ควรคัดลอก thankyou.php ไปที่:
wp-content/themes/storefront/woocommerce/checkout/ โฟลเดอร์ คุณจะต้องสร้างสองโฟลเดอร์คือ 'woocommerce' & 'checkout'
เมื่อ WooCommerce พบเทมเพลตเดียวกันในธีมของคุณเอง ลำดับความสำคัญจะถูกกำหนดให้กับเทมเพลตที่อยู่ในธีมของคุณ
ลองมาดูตัวอย่างกัน ในหน้าขอบคุณเริ่มต้น วิธีการชำระเงินจะแสดงที่จุดเริ่มต้นและในรายละเอียดคำสั่งซื้อ
เราต้องการมอบรหัสคูปองให้กับลูกค้าสำหรับการซื้อครั้งต่อไปและลบวิธีการชำระเงินออกจากส่วนด้านบน
ด้านล่างนี้คือเทมเพลต Thankyou.php:
<?php
ถ้า ( ! กำหนด ( 'ABSPATH' ) ) {
ทางออก;
}
?>
<div class="woocommerce-order">
<?php if ( $order ) : ?>
<?php if ( $order->has_status( 'failed' ) ): ?>
<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php _e( 'ขออภัยที่คำสั่งซื้อของคุณไม่สามารถดำเนินการได้เนื่องจากธนาคารต้นทาง/ผู้ขายปฏิเสธการทำธุรกรรมของคุณ โปรดลองซื้อ อีกครั้ง.', 'woocommerce' ); ?></p>
<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed-actions">
<a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php _e( 'Pay', 'woocommerce' ) ?>
<?php if ( is_user_logged_in() ) : ?>
<a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php _e( 'บัญชีของฉัน', 'woocommerce' ); ?>
<?php endif; ?>
</p>
<?php else : ?>
<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'ขอบคุณค่ะ ได้รับคำสั่งซื้อของคุณแล้ว เราได้ส่งอีเมลถึงคุณแล้ว ใบเสร็จการสั่งซื้อสำหรับธุรกรรมนี้', 'woocommerce' ), $order ); ?></p>
<ul class="woocommerce-order-overview woocommerce-thankyou-order-details order_details">
<li class="woocommerce-order-overview__order order">
<?php _e( 'รหัสธุรกรรม:', 'woocommerce' ); ?>
<strong><?php echo $order->get_order_number(); ?></strong>
</li>
<li class="woocommerce-order-overview__date date">
<?php _e( 'วันที่:', 'woocommerce' ); ?>
<strong><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></strong>
</li>
<li class="woocommerce-order-overview__total total">
<?php _e( 'ยอดรวม:', 'woocommerce' ); ?>
<strong><?php echo $order->get_formatted_order_total(); ?></strong>
</li>
</ul>
<?php endif; ?>
<p>ขอแสดงความยินดีกับการสั่งซื้อครั้งแรกของคุณ นี่คือส่วนลด 15% สำหรับการสั่งซื้อครั้งต่อไปของคุณ ใช้รหัสคูปอง <strong>WELCOME15</strong> เพื่อรับส่วนลด</p>
<?php do_action( 'woocommerce_thankyou_' . $order->get_payment_method(), $order->get_id() ); ?>
<?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?>
<?php else : ?>
<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'ขอบคุณค่ะ ได้รับคำสั่งซื้อของคุณแล้ว', 'woocommerce' ), โมฆะ ); ?></p>
<?php endif; ?>
</div>
คุณอาจต้องการเปลี่ยนข้อมูลที่แสดงในตารางรายละเอียดคำสั่งซื้อและรายละเอียดลูกค้า (เมื่อเข้าสู่ระบบ)
สิ่งเหล่านี้มาจากไฟล์อื่น WooCommerce ใช้ฟังก์ชัน woocommerce_order_details_table() ที่แนบมากับ woocommerce_thankyou hook
ฟังก์ชัน woocommerce_order_details_table() ถูกกำหนดไว้ในไฟล์ include/wc-template-functions.php
หน้าขอบคุณคือชุดของไฟล์เทมเพลตที่แตกต่างกันสี่ไฟล์:
- templates/checkout/thankyou.php
- templates/order/order-details.php
- templates/order/order-details-item.php
- templates/order/order-details-customer.php
เมื่อคุณทราบแล้วว่าข้อมูลใดมาจากเทมเพลตใด คุณเพียงแค่คัดลอกเทมเพลตที่ถูกต้องไปยังโฟลเดอร์ของธีม และนั่นคือทั้งหมด
ตอนนี้ มาดูวิธีปรับแต่งหน้าขอบคุณ WooCommerce สำหรับรูปแบบผลิตภัณฑ์
จะเปลี่ยนเส้นทางไปยังหน้าขอบคุณที่กำหนดเองตาม ID รูปแบบโดยใช้ hook ได้อย่างไร
add_action( 'woocommerce_thankyou', 'sa_redirect_product_attribute_based', 10, 1 );
ฟังก์ชั่น sa_redirect_product_attribute_based ($order_id) {
$order = wc_get_order( $order_id );
if ( $order อินสแตนซ์ของ WC_Order ) {
foreach( $order->get_items() เป็น $item ) {
// เพิ่มรหัสรูปแบบที่คุณต้องการด้านล่างที่นี่
if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
// เปลี่ยนด้านล่างเป็น URL ที่คุณต้องการส่งลูกค้าของคุณไปที่
wp_redirect( 'https://demo.storeapps.org/custom-thank-you/' );
}
}
}
}
พิมพ์ข้อความบนหน้าขอบคุณตามคุณลักษณะของผลิตภัณฑ์
การขยายตัวอย่างข้างต้น คุณยังสามารถแสดงข้อความที่กำหนดเองบนหน้าขอบคุณ WooCommerce ตามรหัสรูปแบบ นี่คือรหัสสำหรับมัน:
add_action( 'woocommerce_thankyou', 'sa_show_custom_text_by_variation_id', 10, 1 );
ฟังก์ชั่น sa_show_custom_text_by_variation_id ($order_id) {
$order = wc_get_order( $order_id );
if ( $order อินสแตนซ์ของ WC_Order ) {
foreach( $order->get_items() เป็น $item ) {
// เพิ่มรหัสรูปแบบที่คุณต้องการด้านล่างที่นี่ คุณลักษณะของฉันคือ สี ขนาด
if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
echo '<p>อย่าลังเลที่จะติดต่อเราในกรณีที่คุณต้องการเปลี่ยนเสื้อยืดเป็นขนาดอื่น</p>';
}
}
}
}
เมื่อคุณเพิ่มโค้ด หน้าขอบคุณจะมีลักษณะดังนี้:
นั่นเป็นข้อมูลโค้ดจำนวนมากที่นี่ หากคุณไม่ชอบเขียนโค้ดและต้องการวิธีแก้ปัญหาง่ายๆ โปรดอ่านด้านล่างเพื่อค้นหาปลั๊กอินที่มีประสิทธิภาพ
วิธีตั้งค่าหน้าขอบคุณแบบกำหนดเองสำหรับแต่ละผลิตภัณฑ์และทั่วทั้งไซต์โดยใช้ปลั๊กอิน
การปรับแต่งหน้าขอบคุณเกี่ยวข้องกับองค์ประกอบมากมาย มันไม่ง่ายอย่างที่คิด ข้อผิดพลาดเล็กน้อยที่คุณทำขณะเพิ่มข้อมูลโค้ดและทุกอย่างก็ยุ่งเหยิง
ดังนั้น หากคุณต้องการมุ่งเน้นที่การขายและการตลาดมากขึ้น และช่วยตัวเองให้พ้นจากความยุ่งยากในการเขียนโค้ด เราขอแนะนำให้ใช้ปลั๊กอิน Custom Thank You Page สำหรับ WooCommerce
ช่วยให้คุณตั้งค่าหน้าขอบคุณแบบกำหนดเองสำหรับแต่ละผลิตภัณฑ์ตลอดจนทั่วทั้งไซต์ เราจะเพิ่มการสนับสนุนสำหรับรูปแบบผลิตภัณฑ์ในเร็วๆ นี้
หน้าขอบคุณที่เพิ่มประสิทธิภาพด้วยปลั๊กอินนี้ทำให้คุณสามารถ เพิ่มยอดขาย (โดยใช้ข้อเสนออัจฉริยะ) สร้างรายชื่ออีเมล โปรโมตข้อเสนอของคุณ รวบรวมคำติชม แสดงข้อความวิดีโอ คูปอง และทำสิ่งอื่น ๆ
หน้าขอบคุณ WooCommerce เริ่มต้นของคุณจะแปลงเป็นเครื่องมือทางการตลาดที่ทรงพลังเช่นนี้:
คุณสมบัติปลั๊กอินเพิ่มเติม :
- เทมเพลตหน้าขอบคุณที่สร้าง Conversion สูงสี่แบบเพื่อช่วยให้คุณเริ่มต้นได้อย่างมีประสิทธิภาพ
- เปลี่ยนเส้นทางผู้ใช้หลังจากซื้อ/ชำระเงินไปยังลิงค์พันธมิตร ลิงค์บุคคลที่สาม หรือทรัพยากร
- ให้โอกาสคุณสร้างหน้าขอบคุณตามธีม ปลั๊กอิน และตัวแก้ไขหน้าที่คุณชื่นชอบ และออกแบบหน้าตามที่คุณต้องการ
ลองการสาธิตสด
คำพูดสุดท้าย
หวังว่าบทความนี้จะช่วยให้คุณเข้าใจถึงความสำคัญของการปรับแต่งหน้าขอบคุณที่กำหนดเองพร้อมกับความเข้าใจที่ดีเกี่ยวกับวิธีการทำผ่านโค้ดและปลั๊กอิน
การใช้เพจเล็กๆ นี้อาจเป็นโอกาสที่ดีในการเพิ่มยอดขาย ไม่ว่าเราจะดูปกติแค่ไหนก็ตาม