วิธีข้ามหน้ารถเข็นใน WooCommerce

เผยแพร่แล้ว: 2021-02-20

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

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

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

เหตุใดจึงข้ามหน้ารถเข็นใน WooCommerce

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

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

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

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

วิธีข้ามหน้ารถเข็นใน WooCommerce

ในคู่มือนี้ เราจะแสดงให้คุณเห็น 3 วิธีในการข้ามหน้ารถเข็นใน WooCommerce :

  1. ผ่านการตั้งค่า WooCommerce
  2. การใช้การชำระเงินโดยตรงสำหรับ WooCommerce
  3. โดยทางโปรแกรมด้วยข้อมูลโค้ด

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

1) ข้ามหน้ารถเข็นผ่านการตั้งค่า WooCommerce

1) ไปที่ WP Admin Dashboard ของคุณและไปที่ WooCommerce > Settings จากนั้นเลือกตัวเลือกการตั้งค่า ทั่วไป ใต้แท็บ ผลิตภัณฑ์ ทำเครื่องหมายที่ตัวเลือก " เปลี่ยนเส้นทางไปยังหน้ารถเข็นหลังจากเพิ่มสำเร็จ" แล้ว บันทึก การเปลี่ยนแปลง

เปิดใช้งานการเปลี่ยนเส้นทางไปยังหน้ารถเข็นใน woocommerce

2) หลังจากนั้นไปที่แท็บ Advanced แล้วเลือก Page Setup ตั้งค่าการ ชำระเงิน เป็น หน้ารถเข็น เริ่มต้นโดยใช้เมนูแบบเลื่อนลงและบันทึกการเปลี่ยนแปลง

ตั้งค่าการชำระเงินเป็นหน้ารถเข็นเริ่มต้น

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

หน้าร้าน

2) ข้ามหน้ารถเข็นโดยใช้ปลั๊กอิน

ชำระเงินโดยตรงสำหรับปลั๊กอิน WooCommerce

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

เครื่องมือนี้มีเวอร์ชันฟรีพร้อมฟีเจอร์พื้นฐานและแผนพรีเมียม 3 แผนพร้อมฟังก์ชันขั้นสูงที่เริ่มต้นที่ 19 USD (ชำระครั้งเดียว)

คุณสมบัติหลักบางประการ ได้แก่ :

  1. ชำระเงินหน้าเดียว: อนุญาตให้ผู้ใช้แก้ไขรถเข็นและยืนยันคำสั่งซื้อในหน้าเดียวกัน
  2. ลบช่องการชำระเงิน: ลบช่องที่ไม่จำเป็นออกได้อย่างง่ายดายและเพิ่มความเร็วในกระบวนการเช็คเอา ต์
  3. AJAX เพิ่มลงตะกร้าในผลิตภัณฑ์เดียว: อนุญาตให้ผู้ใช้รวมผลิตภัณฑ์เดี่ยว กลุ่มหรือตัวแปรในรถเข็นโดยไม่ต้องโหลดซ้ำทั้งไซต์ทุกครั้ง
  4. การ เปลี่ยนเส้นทางการชำระเงิน: เปลี่ยนเส้นทางผู้ใช้จากหน้าร้านค้าโดยตรงไปยังหน้าการชำระเงิน
  5. ปุ่มซื้อด่วน: เปิดใช้งานการซื้อโดยตรงในผลิตภัณฑ์เดียว
  6. ปุ่มดูด่วน: แสดงมุมมองด่วนของหน้าร้านค้า WooCommerce และหมวดหมู่ผลิตภัณฑ์

ในคู่มือนี้ เราจะใช้เฉพาะคุณลักษณะการ เปลี่ยนเส้นทางของ Checkout เท่านั้น แต่อย่างที่คุณเห็น ปลั๊กอินนี้มีข้อเสนอมากมาย

ข้ามรถเข็นด้วย Direct Checkout สำหรับ WooCommerce

ตอนนี้เรามาดูวิธีข้ามตะกร้าสินค้าด้วย Direct Checkout สำหรับ WooCommerce กัน

1) ไปที่ WP Admin Dashboard และไปที่ Plugins > Add New ค้นหา Direct Checkout สำหรับ WooCommerce คลิก Install Now จากนั้นกด Activate เมื่อการติดตั้งเสร็จสิ้น

ติดตั้งและเปิดใช้งานปลั๊กอิน

2) จาก WP Admin Dashboard ให้ ไปที่ WooCommerce > Settings ไปที่ " ทั่วไป " ใต้แท็บ " ผลิตภัณฑ์ " และยกเลิกการเลือกตัวเลือก " พฤติกรรมรถเข็น " ทั้งสองแบบเพื่อไม่ให้รบกวนการตั้งค่าปลั๊กอิน

ปิดการใช้งานตัวเลือกพฤติกรรมรถเข็น

3) ตอนนี้ ย้ายไปที่แท็บ ชำระเงินโดยตรง และเลือก การตั้งค่า ทั่วไป ตั้งค่าการ เปลี่ยนเส้นทาง "เพิ่มในรถเข็น " เป็น " ชำระเงิน " โดยใช้เมนูแบบเลื่อนลงและบันทึกการเปลี่ยนแปลง

เปลี่ยนเส้นทางรถเข็นไปยังหน้าชำระเงิน

เสร็จแล้ว! คุณได้เรียนรู้วิธีข้ามหน้าตะกร้าสินค้าด้วย Direct Checkout สำหรับ WooCommerce

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

3) วิธีข้ามหน้ารถเข็นโดยทางโปรแกรม

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

วิธีแก้ไขไฟล์ functions.php

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

  1. ใส่โค้ดที่ท้ายไฟล์ functions.php
  2. ใช้ปลั๊กอิน

มาดูทั้งสองตัวเลือกกันดีกว่า

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

a) แก้ไขไฟล์ functions.php จากแดชบอร์ด WordPress

วิธีที่ง่ายที่สุดในการเพิ่มข้อมูลโค้ดลงในไฟล์ functions.php คือทำจากแดชบอร์ด WordPress

ในแดชบอร์ดของคุณ ไปที่ ลักษณะที่ ปรากฏ > ตัวแก้ไขธีม จากนั้นเลือกไฟล์ functions.php ของ ธีมลูก ของคุณในคอลัมน์ด้านขวา และวางข้อมูลโค้ดที่ส่วนท้ายของไฟล์ สุดท้ายให้กด Update file

วิธีข้ามหน้ารถเข็นใน WooCommerce - แก้ไขไฟล์ฟังก์ชัน

สั้นและหวานใช่มั้ย

b) เพิ่มข้อมูลโค้ดลงในไฟล์ functions.php ด้วย plugin

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

ขั้นแรก ในแดชบอร์ด WordPress ของคุณ ไปที่ Plugins > Add New และค้นหาปลั๊กอิน Code Snippets จากนั้นติดตั้งและเปิดใช้งานดังที่แสดงด้านล่าง

ปลั๊กอินข้อมูลโค้ด

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

เพิ่มตัวอย่างใหม่

หมายเหตุ : เป็นที่น่าสังเกตว่าถ้าคุณใช้ Code Snippets คุณไม่จำเป็นต้องสร้างธีมย่อย อย่างไรก็ตามเราแนะนำให้มีเสมอ

เมื่อคุณทราบวิธีเพิ่มข้อมูลโค้ดลงในไฟล์ functions.php แล้ว มาดูวิธีข้ามหน้ารถเข็น WooCommerce โดยทางโปรแกรม

เพิ่มตัวอย่างและข้ามหน้ารถเข็นโดยทางโปรแกรม

ก่อนเพิ่มข้อมูลโค้ด ตรวจ สอบ ให้แน่ใจว่าไม่ได้เลือกตัวเลือก พฤติกรรมรถเข็น ทั้งสองข้างใน WooCommerce > การตั้งค่า > ผลิตภัณฑ์ > ทั่วไป เพื่อไม่ให้รบกวนการทำงานของโค้ด

ปิดการใช้งานตัวเลือกพฤติกรรมรถเข็น

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

 add_filter('add_to_cart_redirect', 'ql_skip_cart_page');
ฟังก์ชัน ql_skip_cart_page () {
 ทั่วโลก $woocommerce;
 $redirect_checkout = $woocommerce->cart->get_checkout_url();
 ส่งคืน $redirect_checkout;
}

ยินดีด้วย! ตอนนี้คุณคุ้นเคยกับทั้งสามวิธีในการ ข้ามหน้าตะกร้าสินค้าใน WooCommerce แล้ว

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

แทนที่ข้อความหยิบใส่รถเข็น

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

ข้ามหน้ารถเข็นใน WooCommerce - เปลี่ยนข้อความปุ่มเพิ่มในรถเข็น

ข่าวดีก็คือการแทนที่ข้อความของปุ่มนั้นเป็นกระบวนการง่ายๆ คุณสามารถทำสิ่งนี้ได้สองวิธี:

  1. การใช้ปลั๊กอินการชำระเงินโดยตรง
  2. โดยทางโปรแกรม

มาดูแต่ละวิธีกัน

1) แทนที่ข้อความปุ่มโดยใช้ปลั๊กอินการชำระเงินโดยตรง

จาก WP Admin Dashboard ให้ไปที่ WooCommerce > Settings และไปที่แท็บ Direct Checkout ภายใต้การตั้งค่า คลังข้อมูล ให้ตั้งค่า " แทนที่ ข้อความในรถเข็น" เป็น ใช่ แล้วพิมพ์ข้อความที่คุณต้องการแสดง สุดท้าย ให้กดปุ่ม บันทึก เพื่อบันทึกการเปลี่ยนแปลง

วิธีข้ามหน้ารถเข็นใน WooCommerce - แทนที่ข้อความในรถเข็น

แค่นั้นแหละ! ตอนนี้ปุ่ม Add to Cart ของคุณจะถูกแทนที่ด้วยปุ่ม Buy Now

2) แทนที่ข้อความปุ่มโดยทางโปรแกรม

หากคุณไม่ต้องการใช้ปลั๊กอิน คุณสามารถเปลี่ยนข้อความของปุ่มแบบเป็นโปรแกรมได้ เพียงเพิ่มข้อมูลโค้ดต่อไปนี้ในไฟล์ functions.php ของคุณ

 add_filter( 'woocommerce_product_single_add_to_cart_text', 'ql_replace_add_to_cart_button_text' );
add_filter( 'woocommerce_product_add_to_cart_text', 'ql_replace_add_to_cart_button_text' );
//แทนที่ข้อความในรถเข็นด้วย Buy Now! 
ฟังก์ชัน ql_replace_add_to_cart_button_text () {
 ส่งคืน __( 'ซื้อเลย!', 'woocommerce' );
}

ในตัวอย่างนี้ เราเปลี่ยนข้อความของปุ่มเป็น Buy Now! แต่คุณสามารถเลือกข้อความที่ต้องการแสดงได้โดยทำการแก้ไขเล็กน้อยในโค้ดบรรทัดสุดท้าย:

ส่งคืน __( 'ซื้อเลย!', 'woocommerce' );

เพียงเปลี่ยน Buy Now! ข้อความพร้อมสิ่งที่คุณต้องการแสดง ตัวอย่างเช่น Buy Now, Shop Now, สั่งซื้อ และอื่นๆ ตรวจสอบให้แน่ใจว่าข้อความอยู่ในเครื่องหมายคำพูดเดียว

แค่นั้นแหละ! นั่นคือวิธีที่คุณเปลี่ยนข้อความของปุ่ม มาต่อกันที่การปรับแต่งครั้งต่อไปของเรา

ลบข้อความที่ใส่ในรถเข็น

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

ลบข้อความในรถเข็น

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

 add_filter( 'wc_add_to_cart_message_html', 'ql_remove_add_to_cart_message' );
ฟังก์ชัน ql_remove_add_to_cart_message (ข้อความ $){
 กลับ '';
}

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

ทีนี้มาดูการปรับแต่งครั้งสุดท้ายของเรากัน

ลบหน้ารถเข็นออกจากเมนู

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

รายการเมนูรถเข็น

ตามค่าเริ่มต้น WordPress จะมีตัวเลือกในการลบรายการเมนู ในการดำเนินการนี้ เพียงไปที่ WP Admin Dashboard และไปที่ Appearance > Menus เลือก หน้ารถเข็น ในส่วน โครงสร้างเมนู แล้วคลิก ลบ จากนั้น กดปุ่ม บันทึก เพื่อใช้การเปลี่ยนแปลง

นำรถเข็นออกจากเมนู

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

บทสรุป

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

ในคู่มือนี้ เราได้เห็นวิธีการ:

  • ข้ามหน้ารถเข็นใน WooCommerce
    • ผ่านการตั้งค่าเริ่มต้น
    • ด้วย ปลั๊กอินการชำระเงินตรงสำหรับ WooCommerce
    • โดยทางโปรแกรมโดยใช้ข้อมูล โค้ด โค้ด
  • แทนที่ข้อความปุ่ม Add to Cart
    • การใช้ปลั๊กอินการชำระเงินโดยตรง
    • โดยทางโปรแกรม
  • ลบข้อความที่ใส่ในรถเข็น
  • นำหน้ารถเข็นออกจากเมนู

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

หากคุณพบว่าโพสต์นี้มีประโยชน์ โปรดแชร์บนโซเชียลมีเดียและสมัครรับจดหมายข่าวของเรา!

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

  • วิธีปรับแต่งหน้ารถเข็น WooCommerce
  • ปรับแต่งหน้าผลิตภัณฑ์ใน WooCommerce