วิธีแก้ไขหน้าชำระเงิน WooCommerce

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

เหตุใดคุณจึงควรปรับแต่งหน้าชำระเงินใน WooCommerce

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

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

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

ก่อนหน้านี้เราได้เห็นวิธีปรับแต่งหน้าร้านค้าและวิธีลบฟิลด์ออกจากการชำระเงิน และวันนี้เราจะแสดงให้คุณเห็น 2 วิธีในการปรับแต่งหน้าการชำระเงินใน WooCommerce

แก้ไขหน้าชำระเงิน WooCommerce: 2 วิธี

ในคู่มือนี้ คุณจะได้เรียนรู้วิธีแก้ไขหน้าชำระเงินใน WooCommerce ได้ 2 วิธี:

1. ด้วยปลั๊กอิน
2. โดยทางโปรแกรม (การเข้ารหัส)

มาดูแต่ละตัวเลือกกันดีกว่า

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

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

ปลั๊กอินนี้ออกสู่ตลาดมาสองสามปีแล้วและมีการดาวน์โหลดมากกว่า 90,000 ครั้ง มีเวอร์ชันฟรีพร้อมฟังก์ชันพื้นฐานแต่ทรงพลัง ซึ่งคุณสามารถดาวน์โหลดได้จากที่นี่ และแผนพรีเมียม 3 แผนพร้อมคุณสมบัติขั้นสูงเพิ่มเติมที่เริ่มต้นที่ 19 USD (ชำระครั้งเดียว) มาดูกันว่าเครื่องมือนี้ทำอะไรได้บ้าง

WooCommerce Checkout Manager

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

เครื่องมือนี้ให้คุณเพิ่มหรือซ่อนฟิลด์ต่างๆ เช่น ชื่อและนามสกุล ชื่อบริษัท ประเทศ เมือง รหัสไปรษณีย์ ที่อยู่ หมายเลขโทรศัพท์ อีเมล และอื่นๆ ในการดำเนินการนี้ บนแดชบอร์ด WordPress ของคุณ ให้ไปที่ WooCommerce > Checkout จากนั้นไปที่แท็บ Billing, Shipping หรือ Additional ที่นั่น คุณจะเห็นรายการฟิลด์ทั้งหมดที่คุณต้องการแสดงหรือซ่อน

สร้างช่องไฟล์อัปโหลดที่กำหนดเอง

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

เพิ่มค่าธรรมเนียมในการชำระเงิน

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

• ส่งด่วน
• การจัดการพิเศษ
• ค่าใช้จ่ายเพิ่มเติมสำหรับการจัดส่งไปยังบางประเทศหรือบางสถานที่
• ค่าธรรมเนียมที่เกี่ยวข้องกับบัตรเครดิตหรือช่องทางการชำระเงิน

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

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

จากนั้น ไปที่แท็บ ตัวเลือก แล้วเราจะเพิ่มป้ายกำกับสองป้าย: ใช่ และ ไม่ใช่ เมื่อผู้ซื้อเลือกส่งด่วน เราจะคิดค่าธรรมเนียมเพิ่มเติม $10

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

สร้างฟิลด์เงื่อนไข

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

1. ในแดชบอร์ด WordPress ของคุณ ไปที่ WooCommerce > ชำระเงิน > การเรียกเก็บเงิน แล้วคลิก เพิ่มฟิลด์ใหม่
2. เลือกประเภทของฟิลด์ที่คุณต้องการสร้างและกรอกป้ายชื่อ ตัวยึด/ประเภท และคำอธิบาย ขึ้นอยู่กับประเภทของเงื่อนไขที่คุณกำลังสร้าง
3. หลังจากนั้น ให้ทำเครื่องหมายที่กล่องกาเครื่องหมายเงื่อนไขทางด้านขวา เลือกฟิลด์พาเรนต์และค่าที่ฟิลด์พาเรนต์ต้องใช้เพื่อแสดงฟิลด์เงื่อนไข
4. กด บันทึก เสร็จแล้ว!

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

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

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

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

2) แก้ไขหน้าชำระเงินโดยทางโปรแกรม (เข้ารหัส)

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

1. เพิ่มฟิลด์ที่กำหนดเองไปยังหน้าชำระเงิน WooCommerce
2. บันทึกฟิลด์ที่กำหนดเองไปยังฐานข้อมูล
3. ทำให้ฟิลด์บังคับเป็นทางเลือก
4. เพิ่มเนื้อหาในหน้าชำระเงิน
5. ใช้รหัสย่อในหน้าชำระเงินของ WooCommerce
6. จัดรูปแบบหน้าชำระเงินด้วย CSS . ที่กำหนดเอง

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

2.1) เพิ่มฟิลด์ที่กำหนดเองไปยังหน้าชำระเงิน 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( 'สมาชิก' ) );
}

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

 // ช่องใส่วิทยุ
add_action('woocommerce_before_order_notes', 'quadlayers_radio_checkout');
ฟังก์ชัน quadlayers_radio_checkout($checkout3){
woocommerce_form_field ( 'ฟีด', อาร์เรย์ (
'type' => 'วิทยุ',
//'required' => จริง
'class' => array('รูปแบบฟิลด์กำหนดเอง-แถวกว้าง'),
'label' => ' คุณหาเราเจอได้ยังไง?.',
'ตัวเลือก' => อาร์เรย์ (
'Google' => 'Google',
'เพื่อน' => 'เพื่อน',
'Facebook' => 'Facebook',
'YouTube' => 'YoutTube',
'อื่นๆ' => 'อื่นๆ'
)
));
}

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

2.2) บันทึกค่าฟิลด์ที่กำหนดเองไปยังฐานข้อมูล

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

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

 add_action( 'woocommerce_checkout_update_order_meta','quadlayers_save_function' );
ฟังก์ชัน quadlayers_save_function ($order_id ){
if ( ! ว่างเปล่า ( $_POST['subscriber'] ) ) ) {
update_post_meta( $order_id, 'สมาชิก', sanitize_text_field( $_POST['subscriber'] ) );
}
if ( ! ว่างเปล่า ( $_POST['feed'] ) ) ) {
update_post_meta( $order_id, 'ฟีด', sanitize_text_field( $_POST['feed'] ) );
}
}

สคริปต์นี้ตรวจสอบว่าฟิลด์ที่กำหนดเองว่างเปล่าหรือไม่ด้วยเงื่อนไข if() ก่อนบันทึกลงในฐานข้อมูล หลังจากเพิ่มสคริปต์นี้แล้ว คุณสามารถดึงข้อมูลที่บันทึกไว้จากฐานข้อมูลโดยใช้อ็อบเจ็กต์ WP global “$post” ในสคริปต์ต่อไปนี้ เราได้รับข้อมูลเมตา สมาชิก ของลำดับปัจจุบัน คุณสามารถใช้สิ่งนี้ในแบ็กเอนด์ของรายการคำสั่งซื้อของ WooCommerce

 โพสต์ $ ทั่วโลก;
$order = wc_get_order( $โพสต์->ID );
$c_meta = $order->get_meta('สมาชิก');

เป็นที่น่าสังเกตว่านี่เป็นสคริปต์ดิบ ดังนั้น คุณจะต้องปรับให้เข้ากับความต้องการเฉพาะของคุณ

2.3) กำหนดฟิลด์บังคับเป็น optional

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

ตัวอย่างเช่น สมมติว่าคุณขายผลิตภัณฑ์ที่ดาวน์โหลดได้หรือผลิตภัณฑ์เสมือน ดังนั้นคุณต้องการให้ฟิลด์ที่อยู่ในส่วนการเรียกเก็บเงินเป็นทางเลือก เพียงเพิ่มโค้ดต่อไปนี้ลงในไฟล์ 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 ของคุณไปอีกขั้น คุณสามารถปรับแต่งได้โดยการเพิ่มฟิลด์เงื่อนไข ฟิลด์แบบมีเงื่อนไขมีตรรกะตามเงื่อนไขเพื่อให้มีฟิลด์ที่ปรากฏหรือหายไปตามค่าของฟิลด์อื่น ตัวอย่างเช่น คุณสามารถสร้างตรรกะตามเงื่อนไขเพื่อให้ฟิลด์บัตรเครดิตปรากฏขึ้นก็ต่อเมื่อผู้ใช้เลือก บัตรเครดิต เป็นตัวเลือกการชำระเงิน

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

2.4) เพิ่มเนื้อหาในหน้าชำระเงิน

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

 add_action('woocommerce_review_order_before_submit','quadlayers_checkout_content');
ฟังก์ชัน quadlayers_checkout_content(){
echo '<img src="https://www.heresylab.com/wp-content/uploads/2019/01/paypal-1.png" />;
} 

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

 add_action(woocommerce_checkout_before_customer_details
,'quadlayers_checkout_header');
ฟังก์ชัน quadlayers_checkout_header(){
echo "<h2>นี่คือส่วนหัวที่กำหนดเอง<h2>
";
}

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

 add_action( 'woocommerce_after_order_notes', 'wc_add_message' );
ฟังก์ชั่น wc_add_message () {
echo 'โปรดทราบว่าการจัดส่งอาจใช้เวลาถึง 5 วันทำการ';
}

2.5) เพิ่มค่าธรรมเนียมในหน้าชำระเงิน

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

• แก้ไขแล้ว
• เปอร์เซ็นต์

ในส่วนนี้ เราจะแสดงวิธีเพิ่มทั้งสองรายการในการชำระเงินของคุณ

เพิ่มค่าธรรมเนียมคงที่

ตัวอย่างทั่วไปของค่าธรรมเนียมคงที่คือการจัดส่งด่วน สมมติว่าคุณต้องการรวมค่าธรรมเนียมคงที่ $10 สำหรับการจัดส่งด่วน

เพียงใช้สคริปต์ด้านล่างและแก้ไขข้อความสำหรับชื่อฟิลด์ ในตัวอย่างนี้ เราจะเรียกว่า " ค่าบริการ เพิ่มเติม " และจะเพิ่ม $10 ในคำสั่งซื้อ

 add_action ( 'woocommerce_cart_calculate_fees' ฟังก์ชัน ( ) {
 ถ้า ( is_admin () && ! กำหนด ( 'DOING_AJAX' )) {
 กลับ ;
 }
 WC () -> รถเข็น -> add_fee ( __ ( 'ค่าบริการพิเศษ' , 'txtdomain' ), 10 );
 });

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

เพิ่มค่าธรรมเนียมตามเปอร์เซ็นต์

อีกทางเลือกหนึ่งคือการเรียกเก็บค่าธรรมเนียมตามเปอร์เซ็นต์ สิ่งนี้มีประโยชน์หากมีภาษีเพิ่มเติมหรือคุณต้องการเพิ่มค่าใช้จ่ายเพิ่มเติมสำหรับค่าธรรมเนียมเกตเวย์การชำระเงินบางรายการ สมมติว่าเราต้องการเพิ่มค่าธรรมเนียม 3% ให้กับราคารวมของการสั่งซื้อ (สินค้า + ค่าขนส่ง)

 add_action ( 'woocommerce_cart_calculate_fees' ฟังก์ชัน ( ) {
 ถ้า ( is_admin () && ! กำหนด ( 'DOING_AJAX' )) {
 กลับ ;
 }
 เปอร์เซ็นต์ $ = 0.03 ;
 $percentage_fee = ( WC ()-> cart -> get_cart_contents_total () + WC ()-> cart -> get_shipping_total ()) * $percentage ;
 WC () -> รถเข็น -> add_fee ( __ ( 'ภาษี' , 'txtdomain' ), $percentage_fee );
 });

สคริปต์นี้จะเพิ่มค่าธรรมเนียม 3% ให้กับคำสั่งซื้อทั้งหมดของนักช้อประหว่างการชำระเงิน

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

2.6) ใช้รหัสย่อในหน้าชำระเงินของ WooCommerce

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

 echo do_shortcode('[ woocommerce_cart ]');

ดังนั้น การใช้เบ็ดแบบเดียวกับที่คุณทำในตัวอย่างก่อนหน้านี้ คุณจะได้สิ่งนี้:

 add_action('woocommerce_after_checkout_form','quadlayers_checkout_shortcode');
ฟังก์ชัน quadlayers_checkout_shortcode(){
echo do_shortcode('[ woocommerce_cart ]'); }

สคริปต์นี้จะนำ

 [ woocommerce_cart ]

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

2.7) แก้ไขหน้าชำระเงิน WooCommerce ด้วย CSS . ที่กำหนดเอง

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

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

 add_action('wp_head','quadlayers_checkout_style');

ฟังก์ชัน quadlayers_checkout_style(){
         ถ้า(is_checkout()==จริง){

                 echo '<style> body{background:#dfdfff!important;}<style>';
         }
}

ยิ่งไปกว่านั้น คุณสามารถใช้สคริปต์นี้เป็นพื้นฐานและเพิ่มกฎ CSS ของคุณเองภายในแท็ก HTML เพื่อให้รูปลักษณ์และความรู้สึกที่สมบูรณ์แบบสำหรับไซต์ของคุณ นี่เป็นวิธีแฮ็กอย่างรวดเร็วเพื่อใช้ CSS กับหน้าชำระเงิน มันมีประโยชน์มากในการเพิ่ม CSS ชิ้นเล็กๆ แต่ถ้าคุณต้องการสคริปต์สไตล์ที่กว้างขวางมากขึ้น คุณควรจัดคิว CSS สไตล์ตามวิธี WordPress โดยใช้ wp_enqueue_style() เบ็ด WP ดั้งเดิมดังนี้:

 add_action( 'wp_enqueue_scripts', 'quadlayers_enqueue_css' );

ฟังก์ชัน quadlayers_enqueue_css(){    
    wp_enqueue_style( 'checkout_style',
        get_stylesheet_directory_uri() . '/checkout-style.css'
    );
}

ด้วยวิธีนี้ คุณสามารถมี CSS ที่กำหนดเองทั้งหมดของคุณในไฟล์แยกต่างหาก ( ในตัวอย่างนี้ checkout-style.css ) ซึ่งจะถูกเก็บไว้ในโฟลเดอร์ธีมลูกของคุณที่ระดับเดียวกับ style.css หลัก

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

โบนัส: Checkout Hooks

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

• 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_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_after_checkout_form

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

• วิธีใช้ WooCommerce checkout hooks
• วิธีใช้ WooCommerce hooks – คู่มือฉบับเต็ม

สุดท้าย สำหรับรายการ hooks ทั้งหมดที่คุณสามารถใช้ได้ ให้ดูที่หน้าเอกสารนี้

บทสรุป

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

• ด้วยปลั๊กอิน
• โดยทางโปรแกรม (ผ่านการเข้ารหัส)

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

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

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

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

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