เชี่ยวชาญหน้าชำระเงิน WooCommerce: คู่มือปรับแต่งสำหรับมือใหม่

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

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

TL;DR: หน้า WooCommerce ทั้งหมดปรับแต่งได้ง่ายด้วยปลั๊กอินสร้างหน้าแบบ SeedProd หรือ Elementor แต่ก่อนเปลี่ยนแปลงใดๆ เราแนะนำให้สำรองเว็บไซต์ WordPress ด้วย BlogVault การสำรองแบบเรียลไทม์ของ BlogVault ออกแบบมาสำหรับเว็บ WooCommerce โดยเฉพาะ ทำให้สำรองและกู้คืนได้เพียงไม่กี่คลิก รับรองว่าเว็บไซต์ปลอดภัยเสมอ

หน้าชำระเงิน WooCommerce เริ่มต้นมีลักษณะอย่างไร?

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

เปิดเว็บไซต์ในแท็บ incognito ใส่สินค้าในตะกร้า แล้วไปที่หน้าชำระเงิน มาดูหน้าเริ่มต้นกัน:

เชี่ยวชาญหน้าชำระเงิน WooCommerce: คู่มือปรับแต่งสำหรับมือใหม่

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

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

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

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

ในการแก้ไขหน้าชำระเงิน ต้องการแค่วิดเจ็ต checkout ของ Elementor แทนที่ shortcode woocommerce_checkout ด้วยวิดเจ็ตนี้ จะได้หน้าชำระเงินที่ปรับแต่งได้เต็มรูปแบบ ทำงานร่วมกับวิดเจ็ตตะกร้าของ Elementor ได้ดี ทำให้การออกแบบทั้งกระบวนการง่ายขึ้น แต่โซลูชันอールอินวันนี้มีราคา ต้องใช้ Elementor Pro ถึงจะใช้วิดเจ็ตเหล่านี้ได้ หากตัดสินใจลงทุน Elementor ขั้นตอนมีดังนี้:

ติดตั้งและเปิดใช้งาน Elementor: บนแดชบอร์ด WordPress คลิก Plugins แล้ว Add New ค้นหา Elementor คลิก Install และ Activate จะติดตั้ง Elementor Pro

เพิ่มลิขสิทธิ์: คลิก Elementor ในแถบด้านข้าง คลิก License ใส่ License Key คลิก Activate ปลั๊กอินพร้อมใช้งาน
เปิดหน้าชำระเงินในโหมดแก้ไข Elementor: วางเมาส์ที่ Pages คลิก All Pages วางเมาส์ที่ Checkout Page คลิก Edit ที่ด้านบน คลิก Edit with Elementor รอสักครู่ จะเปิดหน้าในโหมดแก้ไข Elementor

ทำความเข้าใจการแก้ไขด้วย Elementor: Elementor ทำงานในส่วนแนวนอน (sections) ที่ปรับแต่งได้โดยเลือกจำนวนคอลัมน์ในแต่ละส่วน คลิก + บนโปรแกรมแก้ไขหน้าเพื่อเพิ่มส่วน จะมีพรอมต์ให้เลือกจำนวนและเลย์เอาต์ของคอลัมน์ ลากองค์ประกอบจากแถบด้านข้างเพื่อเพิ่มเข้าไปในคอลัมน์ ปรับแต่งแต่ละองค์ประกอบจากแถบด้านข้าง จะเห็นการตั้งค่าที่เกี่ยวข้องเมื่อเลือกแต่ละองค์ประกอบ
แทนที่ shortcode ชำระเงินด้วยวิดเจ็ตชำระเงิน: ลบ shortcode ออก และเพิ่มวิดเจ็ต checkout จากไลบรารีทางซ้าย จะได้ตัวอย่างหน้าชำระเงิน Elementor
ปรับแต่งหน้าชำระเงิน: สำรวจการตั้งค่ามากมายของวิดเจ็ต Checkout Elementor ในแถบด้านข้าง

การตั้งค่าบางอย่างที่เปลี่ยนได้:

General (ทั่วไป): เลือกเลย์เอาต์ 1 หรือ 2 คอลัมน์ ทำให้คอลัมน์หนึ่งติดติด (sticky) ได้
เปลี่ยนฟอร์มการเรียกเก็บเงินหรือจัดส่ง: แก้ไขส่วนหัว ฟิลด์ placeholder และฟิลด์แต่ละรายการของฟอร์มเหล่านี้
Additional information (ข้อมูลเพิ่มเติม): สร้างส่วนพิเศษให้ลูกค้าเพิ่มคำสั่งหรือข้อมูลสำหรับออเดอร์
Coupon settings (การตั้งค่าคูปอง): ปรับแต่งการจัดวางและ Typography ของคูปอง

แก้ไขเพิ่มเติมได้โดยคลิก Style:

Purchase button (ปุ่มซื้อ): เปลี่ยนสี ข้อความ ระยะห่าง ฯลฯ ของปุ่มซื้อ
Order summary (สรุปออเดอร์): เลือก Typography และระยะห่างของรายการสินค้าที่สั่ง
Typography: ปรับแต่งข้อความทั้งหมดยกเว้นฟอร์ม
Forms (ฟอร์ม): ปรับแต่ง Typography และสีของฟอร์ม ใช้การตั้งค่า Rows Gap เพื่อเพิ่มระยะห่าง

ตรวจสอบหน้าในมุมมองมือถือ: การตอบสนองตามขนาดหน้าจอ (Responsive design) สำคัญมาก สามารถใช้มุมมอง built-in ของ Elementor เพื่อดูหน้าตาต่างขนาดหน้าจอ

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

เราพูดถึงวิธีปรับแต่งหน้าชำระเงินง่ายๆ ด้วย Elementor แล้ว แต่ถ้าไม่ต้องการใช้ปลั๊กอินแบบ Elementor และชอบใช้ built-in editor แทน? อ่านต่อไปเพื่อดูวิธีการ

วิธีปรับแต่งดีไซน์หน้าชำระเงินด้วย built-in editor (Gutenberg)

ในส่วนนี้ เราจะพูดถึงวิธีใช้ Gutenberg editor ปรับแต่งหน้าชำระเงิน WooCommerce เปิดหน้าใน editor โดยวางเมาส์ที่ Checkout Page คลิก Edit

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

จะเห็นข้อความ shortcode บนหน้าจริง Shortcode เป็นวิธีของ WooCommerce ในการนำฟิลด์ชำระเงินเข้าหน้า ลักษณะดังนี้:

woocommerce_checkout

อย่าลบ shortcode นี้ สามารถเพิ่มรูปภาพหรือข้อความด้านบนหรือด้านล่าง shortcode ได้ ต่อไปเราจะพูดถึงการแก้ไขฟิลด์เหล่านั้น แต่มาพูดถึงการเปลี่ยนแปลงดีไซน์ทั่วไปก่อน ขั้นตอนมีดังนี้:

เพิ่มข้อความ

เพิ่มวิดเจ็ต Paragraph: เพิ่มข้อความด้านบนหรือล่าง shortcode จะเห็นข้อความ "Type/choose a block" สามารถลากวางวิดเจ็ต Paragraph หรือเริ่มพิมพ์ข้อความที่ต้องการได้เลย ดับเบิลคลิกเพื่อไปบล็อกอื่น
ปรับแต่งข้อความ: แก้ไข Typography และสีในแท็บบล็อกทางขวา เพียงเลือกข้อความหรือบล็อก

เพื่อเพิ่มหัวข้อ สามารถเพิ่มวิดเจ็ต Header และแก้ไขเหมือนกัน มีขนาดต่างๆ อย่าง H1, H2 ฯลฯ ให้เลือก

เพิ่มรูปภาพ

เพิ่มวิดเจ็ต Image: คลิก + ที่มุมซ้ายบน พิมพ์ Image ในช่องค้นหา เลือกประเภท Image widget ที่ต้องการ คลิกหรือลากวางเข้าไปในคอลัมน์
เลือกรูปภาพ: เลือกรูปจาก Media Library โดยคลิก Media library หรือคลิก Upload เพื่อเลือกไฟล์จากคอมพิวเตอร์ เพิ่มคำบรรยายได้หากต้องการ

เพิ่มปุ่ม

เพิ่มวิดเจ็ต Button: ค้นหาในช่องค้นหาของไลบรารีบล็อก
ปรับแต่งปุ่ม: เปลี่ยนฉลาก ตำแหน่งจัดวาง และ Typography ของฉลากในป๊อปอัปที่ปรากฏ สามารถเปลี่ยนสี ขอบ และขนาดในการตั้งค่าบล็อกได้
ลิงก์ปุ่ม: คลิกปุ่ม URL ในป๊อปอัป วาง URL ของหน้าที่ต้องการลิงก์

สำรวจวิดเจ็ตอื่นๆ ใน Block Editor เพื่อปรับแต่งหน้าเต็มรูปแบบ เรายังแนะนำให้ preview หน้าด้วยการคลิก Preview มุมขวาบน เมื่อเสร็จแล้ว คลิก Update

แม้จะทำอะไรได้มากด้วย Gutenberg editor เพียงอย่างเดียว แต่ไม่สามารถเปลี่ยนสิ่งเฉพาะอย่างฟิลด์ได้ ส่วนต่อไปจะครอบคลุมวิธีการเปลี่ยนแปลงเหล่านั้น

วิธีปรับแต่งฟิลด์หน้าชำระเงิน

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

ปรับแต่งฟิลด์หน้าด้วยปลั๊กอินเสริม (Extension)

เราใช้ปลั๊กอิน Checkout Field Manager for WooCommerce สำหรับบทช่วยสอนนี้ ต้องซื้อ extension ก่อน หลังจากนั้น ขั้นตอนเริ่มต้นมีดังนี้:

ติดตั้งและเปิดใช้งานปลั๊กอิน: บน wp-admin panel วางเมาส์ที่ Plugins คลิก Add New คลิก Upload Plugin และ Choose File เลือกโฟลเดอร์ zip ที่ดาวน์โหลดมา คลิก Install Now และ Activate

แก้ไขหรือเพิ่มฟิลด์ในการตั้งค่า WooCommerce: วางเมาส์ที่ WooCommerce คลิก Checkout คลิก Billing, Shipping และ Additional ที่ด้านบน จัดการฟิลด์ทั้งหมดได้ดังนี้:

ปิดใช้งานฟิลด์: ปิดฟิลด์ที่ไม่จำเป็น โดย toggle คอลัมน์ Disabled
ทำให้บางฟิลด์เป็นบังคับ: Toggle เปิด Required เพื่อทำให้บางฟิลด์บังคับ
แก้ไขรูปลักษณ์ฟิลด์: เปลี่ยนการจัดวางฟิลด์เป็นชิดซ้าย ชิดขวา หรือกว้าง โดยเลือกจาก dropdown ในคอลัมน์ Positions
แก้ไขเนื้อหาที่มีอยู่: คลิก Edit ท้ายฟิลด์ที่เกี่ยวข้อง ป๊อปอัปจะปรากฏ สามารถเปลี่ยน Name, Type, Label, Description ฯลฯ แล้วคลิก Save
เพิ่มฟิลด์ใหม่: คลิก + Add New Field มุมซ้ายบน กรอกรายละเอียดตามต้องการ คลิก Save

บันทึกการเปลี่ยนแปลง: เสร็จแล้ว คลิก Save มุมซ้ายล่าง

ปรับแต่งฟิลด์หน้าด้วยโค้ด

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

สำคัญ: Checkout Field Manager (extension ที่กล่าวมาข้างต้น) จะทับทิ้งการเปลี่ยนแปลงใน functions.php ดังนั้นจึงไม่สามารถใช้พร้อมกันได้

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

$this->checkout_fields = apply_filters('woocommerce_checkout_fields', $this->checkout_fields);

หมายความว่า การ hook เข้า woocommerce_checkout_fields สามารถทับทิ้งโค้ดเดิมได้ Hooks คือชิ้นโค้ดที่แก้ไขไฟล์ core ของ WordPress เว็บไซต์ของคุณมี hooks มาให้หลายตัว:

woocommerce_before_checkout_form
woocommerce_checkout_before_customer_details
woocommerce_checkout_billing
woocommerce_checkout_shipping
woocommerce_checkout_after_customer_details
woocommerce_checkout_before_order_review
woocommerce_checkout_order_review
Woocommerce_checkout_after_order_review
Woocommerce_after_checkout_form

นอกจากนี้ยังมีรายการ hooks ยาวนานของ WooCommerce ที่เลือกใช้ได้ สามารถดูรายการ hooks บน Business Bloomer ที่ช่วย visualize hooks ได้ ต่อไปมาพูดถึงวิธีเปลี่ยนฟิลด์

เปลี่ยน placeholder ในฟิลด์ order_comments

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Our hooked in function – $fields is passed via the filter
function custom_override_checkout_fields( $fields ) 
$fields['order']['order_comments']['placeholder'] = 'My new placeholder'
return $fields
}

เปลี่ยน label ของฟิลด์ order_comments

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Our hooked in function – $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) 
$fields['order']['order_comments']['placeholder'] = 'My new placeholder'
$fields['order']['order_comments']['label'] = 'My new label'
return $fields;
}

ลบฟิลด์

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Our hooked in function – $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
unset($fields['order']['order_comments'])
return $fields;
}

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

วิธีเปลี่ยนเลย์เอาต์หน้าชำระเงิน

สามารถปรับแต่งเลย์เอาต์หน้า WooCommerce โดยเพิ่ม action hooks นี่คือวิธีบางอย่าง:

ใช้ปลั๊กอินจัดการ Snippet

เริ่มจากวิธีง่ายกว่า คือเพิ่มด้วยปลั๊กอินจัดการ snippet

ติดตั้งและเปิดใช้งานปลั๊กอินจัดการ Snippet: เราใช้ Code Snippets หาได้ในไดเรกทอรีปลั๊กอิน วางเมาส์ที่ Plugins คลิก Add New ค้นหา Code Snippets คลิก Install และ Activate

คัดลอก hook: ไปที่ไลบรารี hooks ของ WooCommerce คัดลอกโค้ด หรือสร้าง custom hook ใน text editor แล้วคัดลอก เช่น ถ้าต้องการเพิ่มส่วน Terms and Conditions (ข้อกำหนดและเงื่อนไข) ที่ด้านล่าง นี่คือโค้ดที่จะคัดลอก

เพิ่มโค้ด: วางเมาส์ที่ Code Snippets ด้านซ้าย คลิก Add New ใส่ชื่อที่จดจำง่ายสำหรับ hook เลือกแท็บ functions วางโค้ดด้านล่าง ตรวจสอบให้แน่ใจว่าตัวเลือก Run Snippet Everywhere ถูกเลือก และคลิก Save Changes and Activate ตอนนี้เพิ่ม hook เรียบร้อยแล้ว

เพิ่มโค้ดด้วยตนเอง

หากต้องการเพิ่มในไฟล์ functions.php ของธีม ขั้นตอนมีดังนี้:

เปิด Theme File Editor: วางเมาส์ที่ Appearance บนแถบด้านข้าง คลิก Theme File Editor
คัดลอกโค้ด hook: คัดลอกจากไลบรารี WooCommerce หรือสร้างเองใน text editor แล้วคัดลอก เช่นโค้ดเพิ่มส่วน T&C ที่ใช้ในส่วนก่อนหน้า มีอีกมากในไลบรารี hooks ของ WooCommerce
แก้ไขไฟล์ functions.php: ด้านขวา ลองเลื่อนเมนูไฟล์จนเจอ functions.php วางโค้ดที่คัดลอก คลิก Update File ยินดีด้วย คุณเพิ่ม hook เข้าธีมเรียบร้อยแล้ว

ปลั๊กอินและ extensions เสริมสำหรับหน้าชำระเงิน

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

WooCommerce Checkout Addons: Extension นี้อนุญาตให้ลูกค้าเพิ่ม addons ในออเดอร์ เช่น การห่อของขวัญ
WooCommerce One Page Checkout: ทำให้หน้าใดก็ตามกลายเป็นหน้าชำระเงิน ทำให้การช้อปปิ้งง่ายขึ้น เพราะลูกค้าสามารถเลือกและซื้อสินค้าในหน้าเดียวกัน
WooCommerce Social Login: อนุญาตให้ลูกค้า login ด้วยบัญชีโซเชียลมีเดีย แทนอีเมลหรือเบอร์โทร
YITH WooCommerce Order Tracking: ช่วยจัดการข้อมูลการจัดส่งง่ายขึ้น อนุญาตให้ลูกค้าติดตามการซื้อได้
YITH Advanced Refund System for WooCommerce: ช่วยตั้งระบบคืนเงิน

ทำไมควรปรับแต่งหน้าชำระเงิน WooCommerce?

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

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

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

สร้างบัญชีได้ง่าย: ทำให้กระบวนการสร้างบัญชีไม่เป็นภาระ เวลาระหว่างใส่ตะกร้าจนถึงชำระเงิน ให้เร็วที่สุด ลบฟิลด์ที่ไม่จำเป็น เช่น "Company" ถ้าเป็นไปได้ ทำให้เป็น optional
เพิ่มปัจจัยสร้างความไว้วางใจ (Trust factors): สร้างความเชื่อมั่นว่าลูกค้าจ่ายเงินที่แห่งปลอดภัย
เพิ่ม Social proof elements: กระตุ้นลูกค้าแชร์ประสบการณ์ร้านค้าบนโซเชียลมีเดีย
ค่าใช้จ่ายโปร่งใส (Transparent charges): ไม่มีค่าใช้จ่ายเพิ่มเติมโดยไม่จำเป็น ชัดเจนว่าเงินไปที่ไหน เช่น เพิ่มค่าจัดส่งเพิ่มจากราคาสินค้าเท่านั้น
เสนอตัวเลือกชำระเงินเพียงพอ: ทำสมดุลระหว่างมากเกินไปและน้อยเกินไป ใช้ payment gateways ที่นิยมในกลุ่มเป้าหมาย มีบทความเพิ่ม Stripe หรือ PayPal ให้อ่านเพิ่ม

ข้อคิดสุดท้าย

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

FAQ

Action hooks คืออะไร?

Action hooks ช่วยเพิ่ม snippet โค้ดเข้าไฟล์ core ที่ส่งผลต่อการทำงานของเว็บไซต์ WordPress มีไลบรารี hooks กว้างขวางที่ใช้ได้ หรือสร้าง custom hooks เองได้

แก้ไขข้อความบนหน้าชำระเงิน WooCommerce ยังไง?

ใช้ built-in WordPress editor หรือ page builder plugin ปรับแต่งฟอนต์และข้อความทั่วเว็บไซต์ เราแนะนำใช้ page builder เช่น SeedProd ใช้ง่าย มีทั้งฟรีและเสียเงิน

เพิ่ม hooks และ filters ที่ไหน?

ควรเพิ่ม hooks และ filters ในไฟล์ functions.php ของ child theme Child themes มีลักษณะเหมือน parent theme แต่อนุญาตให้ปรับแต่งและเพิ่มโค้ด ระบุ child theme ได้โดยไปที่ Appearance > Themes หาธีมที่ไม่มี featured image หากยังไม่มี child theme อ่านบทความสร้าง child theme