วิธีเปลี่ยนข้อความแสดงข้อผิดพลาดของ WooCommerce Checkout

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

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

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

เหตุใดจึงเปลี่ยนข้อความแสดงข้อผิดพลาดในการชำระเงิน

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

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

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

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

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

วิธีเปลี่ยนข้อความแสดงข้อผิดพลาดของ WooCommerce Checkout

มีสองวิธีในการ แก้ไขข้อความแสดงข้อผิดพลาดในการชำระเงินของ WooCommerce :

1. ด้วยปลั๊กอิน
2. โดยทางโปรแกรม

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

1) ปรับแต่งข้อความแสดงข้อผิดพลาดในการชำระเงินด้วยปลั๊กอิน

หากคุณไม่มีทักษะในการเขียนโค้ดหรือต้องการใช้ปลั๊กอินเพื่อแก้ไขข้อความแสดงข้อผิดพลาดของ WooCommerce คุณสามารถใช้ปลั๊กอิน Say What เครื่องมือนี้ช่วยคุณแก้ไขสตริงเว็บไซต์ของคุณโดยไม่ต้องเขียนโค้ดบรรทัดเดียวหรือแก้ไขไฟล์เทมเพลต

รุ่นฟรีมาพร้อมกับคุณสมบัติพื้นฐาน ในขณะที่รุ่นพรีเมี่ยมเริ่มต้นที่ 39 USD ต่อปี และปลดล็อคโอกาสในการปรับแต่งขั้นสูงเพิ่มเติม

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

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

2) แก้ไขข้อความแสดงข้อผิดพลาดในการชำระเงินโดยทางโปรแกรม

หากคุณไม่ต้องการใช้ปลั๊กอินและมีทักษะการเขียนโปรแกรม คุณสามารถแก้ไขข้อความแสดงข้อผิดพลาดด้วยโค้ดเล็กน้อย ในส่วนนี้ เราจะแสดงวิธีใช้ PHP เพื่อเปลี่ยนข้อความแสดงข้อผิดพลาดใน WooCommerce

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

ในการดำเนินการนี้ เราจะแก้ไขไฟล์ functions.php ของธีม ดังนั้นก่อนเริ่มต้น เราขอแนะนำให้คุณสำรองข้อมูลไซต์ของคุณ และสร้างธีมย่อย หากคุณยังไม่มี

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

 add_action( 'woocommerce_after_checkout_validation', 'quadlayers', 9999, 2);
 ฟังก์ชัน quadlayers (ฟิลด์ $, $errors ){
 // ในกรณีที่มีข้อผิดพลาดในการตรวจสอบความถูกต้อง
 if( !empty( $errors->get_error_codes() ) ) {

 // ละเว้นข้อความแสดงข้อผิดพลาดที่มีอยู่ทั้งหมด
 foreach( $errors->get_error_codes() เป็น $code ) {
 $errors->remove( รหัส $ );
 }
 // แสดงข้อความแสดงข้อผิดพลาดเดียวที่กำหนดเอง
 $errors->add( 'การตรวจสอบ', 'ข้อความที่กำหนดเองของคุณไปที่นี่!!!' );
 }
 }

หากคุณดูโค้ดอย่างละเอียดถี่ถ้วน คุณจะเห็นว่าเราได้ตั้งค่า quadlayers เป็นฟังก์ชัน และ ข้อความที่กำหนดเองของคุณจะอยู่ที่นี่!!! เป็นข้อความเดียว อย่าลังเลที่จะใช้ตัวอย่างนี้เป็นฐานและปรับเปลี่ยนตามความต้องการของคุณ

สำหรับการสาธิตนี้ เราใช้ปลั๊กอินเฉพาะไซต์เพื่อวางโค้ดดังที่คุณเห็นด้านล่าง

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

ด้วยวิธีนี้ คุณสามารถเปลี่ยนข้อความแสดงข้อผิดพลาดในการชำระเงินของ WooCommerce ด้วยโค้ดเล็กน้อย

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

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

วิธีเพิ่มข้อความการชำระเงินแบบกำหนดเอง

ในส่วนนี้ คุณจะได้เรียนรู้การแสดงข้อความที่กำหนดเองบนหน้าการชำระเงินของคุณ ขั้นแรก ในแดชบอร์ดของคุณ ให้ไปที่ Pages > Checkout

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

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

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

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

วิธีเปลี่ยนตำแหน่งข้อความแสดงข้อผิดพลาด

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

ขั้นแรก ลงชื่อเข้าใช้ แดชบอร์ดผู้ดูแลระบบ WordPress แล้วไปที่ ลักษณะที่ ปรากฏ > ปรับแต่ง

เปิดตัวปรับแต่งแล้วไปที่ส่วน CSS เพิ่มเติม

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

เพียงคัดลอกส่วนย่อยนี้แล้ววางลงในวิซาร์ด

 form.checkout {
 -ms-flex-wrap: ห่อ;
 flex-wrap: ห่อ;
 }

 .woocommerce-NoticeGroup- ชำระเงิน {
 -webkit-box-flex: 1;
 -ms-flex: 1 1 100%;
 ดิ้น: 1 1 100%;
 ความกว้างสูงสุด: 100%;
 ความกว้าง: 100%;
 ระยะขอบล่าง: 40px;
 ขอบบน:20px;
 }

 .woocommerce-NoticeGroup-checkout ul.woocommerce-error {
 ตำแหน่ง: ญาติ;
 ด้านบน:อัตโนมัติ;
 ด้านล่าง: อัตโนมัติ;
 ซ้าย:อัตโนมัติ;
 ขวา:อัตโนมัติ;
 padding-ขวา: 30px;
 ดัชนี z: อัตโนมัติ;
 เคอร์เซอร์: ค่าเริ่มต้น;
 -ms-transform: ไม่มี;
 แปลง: ไม่มี;
 -webkit-transform: ไม่มี;
 แอนิเมชั่น: ไม่มี;
 -webkit-นิเมชั่น: none;
 }

 .woocommerce-NoticeGroup-checkout ul.woocommerce-error: หลังจาก {
 เนื้อหา: ไม่มี;
 }

 .woocommerce-NoticeGroup-checkout ul.woocommerce-error.hidden-notice {
 แอนิเมชั่น: ไม่มี;
 -webkit-นิเมชั่น: none;
 }

ในกรณีนี้ เราจะกำหนดให้ข้อความมีระยะขอบ 40 พิกเซลที่ด้านล่าง 20 พิกเซลที่ด้านบน ช่องว่างภายใน 30 พิกเซลทางด้านขวา และความกว้าง 100% ปรับค่าเหล่านี้ตามความต้องการของคุณและอย่าลืมบันทึก การเปลี่ยนแปลง

โบนัส: วิธีซ่อนข้อผิดพลาดของ WooCommerce

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

ในขณะที่เราจะแก้ไขไฟล์หลัก อย่าลืมสร้างข้อมูลสำรองทั้งหมดของไซต์ของคุณ และใช้ธีมย่อย หากคุณยังไม่มี

เพื่อซ่อนข้อผิดพลาด เราปรับแต่ง ไฟล์ wp-config.php อันดับแรก เราแนะนำให้ดาวน์โหลดสำเนาของ ไฟล์ wp-config.php ลงในเครื่องคอมพิวเตอร์ของคุณ เพื่อให้มีข้อมูลสำรองที่คุณสามารถกู้คืนได้หากจำเป็น

มีหลายวิธีในการเข้าถึงไฟล์หลักของ WordPress สำหรับการสาธิตนี้ เราจะใช้ปลั๊กอินเฉพาะที่เรียกว่าตัวจัดการไฟล์ ขั้นแรก ในแดชบอร์ดของคุณ ไปที่ Plugins > Add New และค้นหา File Manager เมื่อคุณพบปลั๊กอินแล้ว ให้ติดตั้งและเปิดใช้งานบนเว็บไซต์ของคุณ

หลังจากเปิดใช้งาน คุณจะเห็นการกำหนดค่าของปลั๊กอินทางด้านซ้ายมือ ค้นหา ไฟล์ wp-config.php

คลิกขวาที่ไฟล์และเลือกตัวเลือกตัว แก้ไขโค้ด

ตรงกลางไฟล์ คุณจะเห็นบรรทัดใดบรรทัดหนึ่งต่อไปนี้:

 กำหนด ('WP_DEBUG' จริง);

หรือ

 กำหนด ('WP_DEBUG', เท็จ); 

เมื่อคุณพบแล้ว ให้แทนที่บรรทัดนั้นด้วยรหัสต่อไปนี้และบันทึกไฟล์:

 ini_set('display_errors','ปิด');
 ini_set('error_reporting', E_ALL );
 กำหนด ('WP_DEBUG', เท็จ);
 กำหนด ('WP_DEBUG_DISPLAY', เท็จ);

รหัสจะปิดข้อความแสดงข้อผิดพลาดทั้งหมด

แค่นั้นแหละ! จากนี้ไป ร้านค้าของคุณจะไม่แสดงข้อความแสดงข้อผิดพลาดใดๆ

วิธีเพิ่มเติมในการปรับแต่งการชำระเงิน

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

เพิ่มฟิลด์ที่กำหนดเองเพื่อชำระเงิน

ในส่วนนี้ เราจะแสดงให้คุณเห็นว่าคุณสามารถเพิ่มฟิลด์ที่กำหนดเองลงในหน้าการชำระเงินได้อย่างไร

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

เพียงวางสคริปต์ต่อไปนี้ในไฟล์ functions.php ของธีมลูกของคุณ:

 // ช่องทำเครื่องหมาย
add_action( 'woocommerce_after_order_notes', 'quadlayers_subscribe_checkout' );

ฟังก์ชั่น quadlayers_subscribe_checkout ($checkout) {
woocommerce_form_field( 'สมาชิก', อาร์เรย์ (
'type' => 'ช่องทำเครื่องหมาย',
//'required' => จริง
'class' => array('รูปแบบฟิลด์กำหนดเอง-แถวกว้าง'),
'label' => ' สมัครรับจดหมายข่าวของเรา'
), $checkout->get_value( 'สมาชิก' ) );
}

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

ทำให้ฟิลด์เป็นตัวเลือก

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

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

 add_filter( 'woocommerce_billing_fields', 'wc_address_field_optional');
ฟังก์ชัน wc_address_field_optional ( $fields ) {
$fields['billing']['billing_address_1']['required'] = false; $fields['billing']['billing_address_1']['required'] = false; 
ส่งคืนฟิลด์ $; 
}

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

บทสรุป

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

ในคู่มือนี้ เราได้เห็นวิธีหลักสองวิธีในการเปลี่ยนข้อความแสดงข้อผิดพลาดในการชำระเงินของ WooCommerce: การใช้ปลั๊กอินเฉพาะและการเขียนโปรแกรมด้วยโค้ดเล็กน้อย การใช้ปลั๊กอินเป็นทางเลือกที่ดีสำหรับผู้ที่ไม่มีทักษะในการเขียนโค้ดหรือต้องการปรับแต่งร้านค้าของตนด้วยการคลิกเพียงไม่กี่ครั้ง

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

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

สำหรับบทความที่น่าสนใจเพิ่มเติม ให้ดูที่โพสต์เหล่านี้:

• วิธีเปลี่ยน Proceed to Checkout text
• สุดยอดปลั๊กอินชำระเงิน WooCommerce
• วิธีสร้างลิงค์ชำระเงินโดยตรงใน WooCommerce