วิธีเปลี่ยนปุ่มสั่งซื้อใน WooCommerce

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

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

ทำไมต้องเปลี่ยนปุ่มสั่งซื้อ?

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

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

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

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

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

วิธีเปลี่ยนปุ่มสั่งซื้อใน WooCommerce

ตามค่าเริ่มต้น WooCommerce ไม่อนุญาตให้คุณเปลี่ยนปุ่มสั่งซื้อ อย่างไรก็ตาม คุณสามารถปรับแต่งมันได้อย่างง่ายดายด้วยการเข้ารหัสเล็กน้อย

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

ตอนนี้เราได้กล่าวถึงการช่วยเตือนพื้นฐานแล้ว มาดูขั้นตอนการปรับแต่งปุ่มสั่งซื้อใน WooCommerce กัน

สิ่งแรกที่คุณต้องทำคือเข้าถึงไฟล์ functions.php

ไฟล์ functions.php

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

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

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

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

1. แทนที่ข้อความปุ่มด้วยข้อความคงที่

ตัวเลือกแรกในการแก้ไขปุ่มสั่งซื้อของ WooCommerce คือการแทนที่ข้อความของปุ่มด้วยข้อความคงที่ โดยเพิ่มโค้ดต่อไปนี้ลงในไฟล์ functions.php ของคุณ

 // แทนที่ปุ่มสั่งซื้อด้วยข้อความคงที่ใน WooCommerce 
add_filter( 'woocommerce_order_button_text', 'ql_replace_place_order_button_text' );
ฟังก์ชัน ql_replace_place_order_button_text () {
   กลับ 'ดำเนินการต่อ'; 
}

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

เพียงปรับแต่งโค้ดเพื่อเพิ่มข้อความที่เหมาะสมสำหรับร้านค้าของคุณ

2. เปลี่ยนข้อความปุ่มตามรหัสผลิตภัณฑ์

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

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

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

สิ่งที่คุณเห็นอาจแตกต่างกันไปตามธีมที่คุณใช้ ตัวอย่างเช่น นี่คือลักษณะที่ปรากฏเมื่อใช้ธีม Divi

เมื่อคุณมี ID ผลิตภัณฑ์ของผลิตภัณฑ์ WooCommerce ของคุณแล้ว (373 ในกรณีของเรา) ให้เพิ่มรหัสต่อไปนี้ในไฟล์ functions.php ของคุณเพื่อเปลี่ยนปุ่มสั่งซื้อ

 add_filter( 'woocommerce_order_button_text', 'ql_custom_button_text_for_product_id' );

ฟังก์ชั่น ql_custom_button_text_for_product_id ($button_text) {

$product_id = 373; // ID ผลิตภัณฑ์เฉพาะที่คุณต้องการเปลี่ยน

if( WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( $product_id ) ) ) {
$button_text = 'ถัดไป';
}

คืนค่า $button_text;

}

อย่างที่คุณเห็น เราได้เปลี่ยนข้อความของปุ่มเป็น "ถัดไป" ใช้ได้กับรหัสผลิตภัณฑ์ = 373 เท่านั้น เพียงแก้ไขรหัสเพื่อเพิ่มผลิตภัณฑ์เพิ่มเติมหรือเปลี่ยนข้อความในปุ่ม

3. เปลี่ยนข้อความปุ่มตามหมวดหมู่

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

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

ใต้ คอลัมน์ Slug คุณจะเห็นกระสุนสำหรับหมวดหมู่นั้นๆ

ดังนั้น ในการปรับแต่งปุ่ม Place Order สำหรับหมวดหมู่เสื้อผ้า เพียงเพิ่มข้อมูลโค้ดต่อไปนี้ในไฟล์ functions.php ของโปรแกรมแก้ไขธีมของคุณ

 add_filter( 'woocommerce_order_button_text', 'ql_custom_place_order_button_text_cat' );

ฟังก์ชั่น ql_custom_place_order_button_text_cat ($button_text ) {

$cat_check = เท็จ;

foreach ( WC()->cart->get_cart() เป็น $cart_item_key => $cart_item ) {

    $product = $cart_item['data'];
    // ตรวจสอบว่าเสื้อผ้าเป็นหมวดหมู่ของสินค้าในรถเข็นหรือไม่
    if ( has_term ( 'เสื้อผ้า', 'product_cat', $product->id )) {
        $cat_check = จริง;
        หยุดพัก;
    }
}       

ถ้า ( $cat_check ) {
     ส่งคืน 'ส่งคำสั่งซื้อ'; 
}

}

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

4. เปลี่ยนข้อความปุ่มตามเกตเวย์การชำระเงิน

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

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

จากนั้น คลิกขวาที่เกตเวย์การชำระเงินที่คุณต้องการปรับแต่งปุ่ม Place Order แล้วกด Inspect คุณจะเห็นรหัสเกตเวย์การชำระเงินบนหน้าจอที่อยู่ติดกันดังที่แสดงด้านล่าง

เมื่อคุณมีรหัสเกตเวย์การชำระเงินแล้ว ให้เพิ่มรหัสต่อไปนี้ในไฟล์ functions.php ของธีมของคุณ

 add_filter( 'woocommerce_available_payment_gateways', 'ql_rename_place_order_button_payment_gateway' );

ฟังก์ชัน ql_rename_place_order_button_payment_gateway ($เกตเวย์) {
    ถ้า ( $gateways['cod'] ) {
        $gateways['cod']->order_button_text = 'ยืนยันเงินสดในการจัดส่ง';
    } 
    ส่งคืน $gateways;
}

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

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

โบนัส: วิธีการจัดลำดับฟิลด์การชำระเงิน WooCommerce ใหม่

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

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

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

1. ติดตั้งและเปิดใช้งาน Plugin

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

การติดตั้งจะใช้เวลาสักครู่ ทันทีที่การติดตั้งเสร็จสิ้น ให้ เปิดใช้งาน ปลั๊กอิน

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

2. จัดลำดับช่องการชำระเงินใหม่จากตัวเลือกปลั๊กอิน

ทันทีที่เปิดใช้งานปลั๊กอิน ให้ไปที่ WooCommerce > การตั้งค่า จากแดชบอร์ด WordPress ของคุณและเปิดแท็บ ชำระเงิน

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

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

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

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

บทสรุป

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

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

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

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

หากคุณต้องการเพิ่ม Conversion ให้ดูคำแนะนำเหล่านี้:

• วิธีแก้ไข WooCommerce Checkout Fields
• เปลี่ยนดำเนินการชำระเงินข้อความใน WooCommerce
• วิธีการเปลี่ยนข้อความแสดงข้อผิดพลาดของ WooCommerce Checkout