วิธีเพิ่มฟิลด์ที่กำหนดเองในหน้าชำระเงินของ WooCommerce

เผยแพร่แล้ว: 2020-07-21

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

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

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

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

จะเพิ่มฟิลด์ที่กำหนดเองในหน้าชำระเงิน WooCommerce ได้อย่างไร

มีสองวิธีหลักในการเพิ่มหรือซ่อนฟิลด์ที่กำหนดเองในหน้าชำระเงินใน WooCommerce:

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

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

  • WooCommerce Direct Checkout : เป็นเครื่องมือที่ยอดเยี่ยมในการทำให้กระบวนการเช็คเอาต์ง่ายขึ้นและเปลี่ยนเส้นทางผู้ใช้จากหน้าผลิตภัณฑ์ไปยังจุดชำระเงิน มีเวอร์ชันฟรีและแผนพรีเมียมเริ่มต้นที่ 19 USD
  • WooCommerce Checkout Manager : ด้วยการติดตั้งที่ใช้งานมากกว่า 90,000 รายการ Checkout Manager เป็นปลั๊กอินที่ยอดเยี่ยมในการเพิ่มอัตราการแปลงของคุณ ช่วยให้คุณเพิ่ม ปรับแต่ง และลบฟิลด์ในหน้าชำระเงินได้ เป็นเครื่องมือ freemium ที่มีเวอร์ชันฟรีและแผนโปรเริ่มต้นที่ 19 USD

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

เพิ่มฟิลด์ที่กำหนดเองในการชำระเงิน WooCommerce โดยทางโปรแกรม

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

  • ข้อความ
  • ช่องทำเครื่องหมาย
  • ประเภทอินพุตวิทยุ

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

หมายเหตุ : โปรดทราบว่าหากคุณต้องการเพิ่มฟิลด์อื่นๆ ในโครงการของคุณ คุณต้องใช้การตรวจสอบความปลอดภัย

ดังนั้น ในการเพิ่มฟิลด์ที่กำหนดเองลงในหน้าชำระเงินของ WooCommerce มีสองตัวเลือก:

  • คุณสามารถเขียนโค้ดสคริปต์ของคุณในธีมย่อย
  • สร้างปลั๊กอินที่กำหนดเอง

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

เพิ่มฟิลด์ที่กำหนดเองในการชำระเงิน WooCommerce ด้วยปลั๊กอินที่กำหนดเอง

ปลั๊กอินแบบกำหนดเองที่เราจะสร้างจะมีสามไฟล์

  1. หลัก
  2. ส่วนหน้า
  3. แบ็กเอนด์

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

1. เปิด IDE ที่คุณชื่นชอบและสร้างโฟลเดอร์ที่มีสามไฟล์:

QuadLayers_checkout_fields /__Classes /__/__class_qlccf_base.php (ไฟล์ส่วนหน้า) /__/__class_qlccf_back.php (ไฟล์แบ็กเอนด์) /__QuadLayers_checkout_fields.php (ไฟล์หลัก)

2. ไฟล์หลัก

ไฟล์หลักคือ QuadLayers_checkout_fields.php :

 <?php
/**
 * @ลิงค์ https://quadlayers.com/
 * @ตั้งแต่ 1.0.0
 * ชื่อปลั๊กอิน: QuadLayers Checkout Custom Fields 
 * URI ของปลั๊กอิน: https://quadlayers.com/
 * คำอธิบาย: ปลั๊กอินเพื่อสร้างฟิลด์ที่กำหนดเองในหน้าชำระเงินของ WooCommerce พิมพ์คำสั่งซื้อแบ็กเอนด์และเทมเพลตอีเมล
 * เวอร์ชัน: 1.0.0
 * ผู้แต่ง: Sebastopolys
 * URI ผู้แต่ง: https://quadlayers.com/
 * โดเมนข้อความ: qlccf
 */
if(!defined('ABSPATH')){die('-1');}
elseif(!class_exists('run_init')){
	คลาสสุดท้าย run_init{	
		เรียกใช้ฟังก์ชันสแตติกสาธารณะ () {
			ส่งคืน include_once plugin_dir_path ( __FILE__ ).'classes/class_qlccf_base.php';
		}
	}
	run_init::run();
}
อื่น{
	echo "<h3>ข้อผิดพลาด - คลาส run_init ที่มีอยู่ใน QuadLayers_checkout_fields.php!</h3>";
}

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

3. ไฟล์คลาสส่วนหน้า

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

 <?php
if(!defined('ABSPATH')){die('-1');}
elseif(!class_exists('base_class'))){

คลาสนามธรรม base_class{   

    VERS สาธารณะ = '1.1.0';// <-- เวอร์ชันของปลั๊กอิน
    คำนำหน้าสาธารณะ = 'qlccf';// <-- คำนำหน้าปลั๊กอิน
    สาธารณะ const PLDIR = __DIR__ ;// <-- Plugin Dir path
    const สาธารณะ PLPAT = __FILE__ ;// <-- File Path  

    ฟังก์ชั่นสาธารณะ add_base_hooks(){    
       add_action( 'woocommerce_after_order_notes', array($this,'quadlayers_subscribe_checkout' ));       
       add_action('woocommerce_after_checkout_billing_form',array($this,'quadlayers_email_checkout'));
       add_action('woocommerce_before_order_notes', array($this,'quadlayers_radio_checkout'));
       add_action( 'woocommerce_checkout_update_order_meta',array($this, 'quadlayers_save_function' ));
    }
    // แทรกช่องทำเครื่องหมายในการชำระเงิน woocommerce - hook: after_order_notes
    ฟังก์ชั่นสาธารณะ quadlayers_subscribe_checkout ($checkout) {
            woocommerce_form_field ( 'ตัวห้อย', อาร์เรย์ (
                'type' => 'ช่องทำเครื่องหมาย',
                //'required' => จริง
                'class' => array('รูปแบบฟิลด์กำหนดเอง-แถวกว้าง'),
                'label' => ' สมัครรับจดหมายข่าวของเรา'                   
            ), $checkout->get_value( 'suscriptor' ) );              
    }
    // แทรกข้อความในการชำระเงิน woocommerce - hook: after_billing_form
    ฟังก์ชั่นสาธารณะ quadlayers_email_checkout ($checkout2){
        woocommerce_form_field ( 'altmail', อาร์เรย์ (
            'type' => 'อีเมล',
            //'required' => จริง
            'class' => array('รูปแบบฟิลด์กำหนดเอง-แถวกว้าง'),
            'label' => ' อีเมลสำรอง'                             
        ), $checkout2->get_value( 'altmail' ) );  
    }
    // แทรกฟิลด์วิทยุที่กำหนดเองในการชำระเงิน woocommerce - hook: before_order_notes
    ฟังก์ชั่นสาธารณะ quadlayers_radio_checkout ($checkout3){
        woocommerce_form_field ( 'ฟีด', อาร์เรย์ (
            'type' => 'วิทยุ',
            //'required' => จริง
            'class' => array('รูปแบบฟิลด์กำหนดเอง-แถวกว้าง'),
            'label' => ' คุณหาเราเจอได้ยังไง?.',            
                'ตัวเลือก' => อาร์เรย์ (
                    'Google' => 'Google',                  
                    'เพื่อน' => 'เพื่อน',
                    'Facebook' => 'Facebook',
                    'YouTube' => 'YoutTube',
                    'อื่นๆ' => 'อื่นๆ'            
                )
        ));
    }
    // บันทึกค่าฟิลด์ที่กำหนดเองทั้งหมด
    ฟังก์ชั่นสาธารณะ quadlayers_save_function ($order_id){ 
        if ( ! ว่างเปล่า ( $_POST['suscriptor'] ) ) {
            update_post_meta( $order_id, 'suscriptor', sanitize_text_field( $_POST['suscriptor'] ) );
        }
        ถ้า ( ! ว่างเปล่า ( $_POST['altmail'] ) ) {
            update_post_meta( $order_id, 'altmail',sanitize_text_field( $_POST['altmail'] ) );
        }
        if ( ! ว่างเปล่า ( $_POST['feed'] ) ) ) {
            update_post_meta( $order_id, 'ฟีด', sanitize_text_field( $_POST['feed'] ) );
        }      
    }
}// รวมคลาสแบ็กเอนด์
    include_once(plugin_dir_path( __FILE__ ).'class_qlccf_back.php');
}
อื่น{
	echo "<h3>ข้อผิดพลาดในการเริ่มต้น - คลาส base_class ที่มีอยู่!</h3>";
}

หลังจากประกาศคลาสแล้ว เรากำหนดค่าคงที่บางอย่างที่เราสามารถใช้ได้ในภายหลัง จากนั้น เรารวม WooCommerce hooks ทั้งหมดที่เราจะใช้ในวิธีเดียว ซึ่งเราเรียกว่า add_base_hooks()

เนื่องจากคลาสนามธรรมไม่สามารถสร้างอินสแตนซ์ได้ เราจึงเรียกใช้วิธีนี้จากไฟล์แบ็กเอนด์ของเรา ดังนั้นมันจึงเรียกใช้ hooks ทั้งหมดที่ประกาศไว้ที่นี่ เราใช้ตะขอแต่ละตัวสำหรับงานที่แตกต่างกัน โดยกำหนดวิธีใดวิธีหนึ่งต่อไปนี้ให้กับแต่ละตะขอ เช่น hook นี้: woocommerce_after_order_notes ใน add_base_hooks() ของเรารันเมธอด quadlayers_subscribe_checkout() ซึ่งทั้งสองถูกกำหนดไว้ภายในคลาส base_class

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

ข้อความ เลือก วิทยุ
รหัสผ่าน วันเวลา datetime-local
วันที่ เดือน เวลา
สัปดาห์ ตัวเลข อีเมล
url โทร

4.ไฟล์แบ็กเอนด์ class_qlccf_back.php

นี่คือตำแหน่งที่คลาส qlccf_back_class สืบทอด base_class ที่กำหนดไว้ก่อนหน้านี้ใน class_qlccf_base.php file :

 <?php
if(!defined('ABSPATH')){die('-1');}
if(!class_exists('qlccf_back_class')):
    คลาส qlccf_back_class ขยาย base_class{

        ฟังก์ชันสาธารณะ __construct(){       
            ผู้ปกครอง::add_base_hooks(); 
            ถ้า(is_admin()):
                add_filter( 'manage_edit-shop_order_columns', array($this,'qlccf_checkbox'));
                add_filter( 'manage_edit-shop_order_columns', array($this,'qlccf_email'));
                add_action( 'manage_shop_order_posts_custom_column',array($this, 'qlccf_column_content'));
                add_action( 'woocommerce_email_order_meta',array($ this,'qlccf_email_template'));
            เอนดิฟ;
        }             
        # แสดงค่าฟิลด์ที่กำหนดเองในรายการสั่งซื้อแบ็กเอนด์ 
        ฟังก์ชั่นสาธารณะ qlccf_column_content($column){
                โพสต์ $ ทั่วโลก; 
                if ( 'suscriptor' === $column ) { # ช่องทำเครื่องหมาย
                    $order = wc_get_order( $โพสต์->ID );     
                    $c_meta = $order->get_meta('ตัวห้อย');       
                    if($c_meta==1):$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/true-icon.png';
                    อื่น:$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/false-icon.png';
                    เอนดิฟ;                       
                    echo '<img src="'.$img_url.'"/>';
                } 
                elseif('altmail' === $column ){ # อีเมลสำรอง
                    $order = wc_get_order( $โพสต์->ID );     
                    $e_meta = $order->get_meta('altmail'); $e_meta = $order->get_meta('altmail');
                    เสียงสะท้อน $e_meta;
                }   
                อื่น{}     
        }    
        # ตั้งค่าคอลัมน์ของช่องทำเครื่องหมาย
        ฟังก์ชั่นสาธารณะ qlccf_checkbox($columns){
                $columns['suscriptor'] = __( 'Suscriptor');            
                ส่งคืนคอลัมน์ $;
        }
        # ตั้งค่าคอลัมน์ของ alt mail
        ฟังก์ชั่นสาธารณะ qlccf_email($columns1){
                $columns1['altmail'] = __( 'เมลสำรอง');            
                ส่งคืน $columns1;
        }
        # รวมฟิลด์ Alt Mail ใน WC email tamplate
        ฟังก์ชั่นสาธารณะ qlccf_email_template ($order_obj){
            $is_set = get_post_meta( $order_obj->get_order_number());           
                // ส่งคืนหากไม่มีการตั้งค่าฟิลด์ที่กำหนดเอง
            ถ้า( ว่างเปล่า( $is_set ) )
		    กลับ; 
	        // โอเค ลุยเลย และก้องฟิลด์กำหนดเอง
            $alt_email = get_post_meta( $order_obj->get_order_number(), 'altmail', จริง );            
            echo '<h2>ฟิลด์กำหนดเองของฉัน</h2><p>อีเมลทางเลือก:'.$alt_email.'</p>';            
        }              
    }    
  $run=new qlccf_back_class;    
เอนดิฟ;

ในไฟล์นี้ เรากำหนดคอนสตรัคเตอร์เพื่อเรียกใช้ front-end hooks ที่เราระบุไว้ในไฟล์อื่นของเรา จากนั้น เราเพิ่ม hooks ที่จำเป็นเพื่อแสดงฟิลด์ที่กำหนดเองในรายการแบ็กเอนด์ออร์เดอร์และเทมเพลตอีเมลของ WooCommerce โดยใช้ if() และฟังก์ชัน WordPress is_admin() เพื่อใช้เฉพาะเมื่อผู้ใช้อยู่ในหน้าจอแบ็กเอนด์ของผู้ดูแลระบบ manage_shop_order_posts_custom_column() แทรกคอลัมน์ในรายการคำสั่งซื้อ เพื่อให้เราสามารถแสดงฟิลด์ใน qlccf_column_content() ของเรา

เมื่อเราติดใน WooCommerce loop แล้ว เราจะตรวจสอบว่าชื่อฟิลด์นั้นเป็นของฟิลด์ที่เรากำหนดเองหรือไม่ และถ้าเป็นเช่นนั้น เราจะพิมพ์ออกมา การใช้เงื่อนไข if()else อื่น เราสามารถตรวจสอบฟิลด์ที่กำหนดเองทั้งหมดของเราในฟังก์ชันเดียวกันได้

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

สุดท้าย ในวิธีสุดท้าย เราใช้ woocommerce_email_order_meta hook เพื่อแสดงฟิลด์ข้อความที่กำหนดเองในเทมเพลตอีเมลของผู้ดูแลระบบ ฟังก์ชัน WordPress & WooCommerce ที่ใช้:

wc_get_order() : รับออบเจ็กต์คำสั่งปัจจุบันพร้อมข้อมูลทั้งหมดที่แนบมาด้วย

get_meta() : เพื่อรับข้อมูลเมตาของคำสั่ง

get_post_meta() : รับค่าของฟิลด์กำหนดเองของเราที่บันทึกไว้ในฐานข้อมูล

get_order_number() : เพื่อรับหมายเลขประจำตัวของคำสั่งซื้อปัจจุบัน

ห่อ

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

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

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

หากคุณต้องการปรับปรุงการแปลงของคุณใน WooCommerce เราขอแนะนำให้คุณดูคำแนะนำเหล่านี้:

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