如何將自定義字段添加到 WooCommerce 結帳頁面

已發表: 2020-07-21

您想自定義結帳嗎？ 在本指南中，我們將向您展示如何將自定義字段添加到 WooCommerce 的結帳頁面，以使您的商店更上一層樓。

為什麼要自定義 WooCommerce 結帳？

在 QuadLayers 中，我們之前已經看到瞭如何在 WooCommerce 中自定義商店頁面。 今天，我們將看看如何做同樣的事情並在結帳中包含自定義字段。 結帳是任何在線商店最重要的頁面之一。 這是您想要吸引購物者的地方，以便他們完成購買並完成銷售。 因此，為了提高您的轉化率和收入，必須使用自定義字段優化結帳。

完美的結帳頁面如何？ 這在很大程度上取決於您的業務。 例如，實體產品的結賬與數字產品的結賬不同。 您可以選擇單頁或多頁結帳、顯示或隱藏字段、使用不同的顏色等等。 然而，最重要的是，您的結賬會產生對用戶的信任，不會讓您分心，而且它經過優化，因此購物者花費的時間越少越好。

如何將自定義字段添加到 WooCommerce 結帳頁面？

在 WooCommerce 的結帳頁面上添加或隱藏自定義字段有兩種主要方法：

  • 帶插件
  • 以編程方式

如果您沒有編碼技能，我們建議您查看以下插件：

  • WooCommerce Direct Checkout ：它是簡化結帳流程並將用戶從產品頁面重定向到結帳的出色工具。 它有一個免費版本和高級計劃，起價為 19 美元。
  • WooCommerce Checkout Manager ：擁有超過 90,000 個活躍安裝，Checkout Manager 是一個很好的插件，可以提高您的轉化率。 它允許您在結帳頁面上添加、自定義和刪除字段。 這是一個免費增值工具，有免費版本和專業計劃，起價 19 美元。

這些結帳插件是很好的選擇，可以順利完成工作。 但是，如果您不想安裝任何插件，您可以編寫解決方案。 在本指南中，我們將重點介紹如何通過一些編碼將自定義字段添加到 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
/**
 * @link https://quadlayers.com/
 * @since 1.0.0
 * 插件名稱：QuadLayers Checkout 自定義字段 
 * 插件 URI：https://quadlayers.com/
 * 描述：插件用於在 WooCommerce 結帳頁面中創建自定義字段，在後端訂單和電子郵件模板中打印
 * 版本：1.0.0
 * 作者：Sebatopolys
 * 作者 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>錯誤 - QuadLayers_checkout_fields.php 中存在 run_init 類！</h3>";
}

您可以更改插件信息、功能和文件名並放入您自己的。 但我們建議您先複製並粘貼腳本而不進行任何編輯，以便更好地了解它們的工作原理。

3.前端類文件

前端文件是class_qlccf_base.php 。 這是主類所在的地方，您可以在其中包含無限數量的類和函數。 抽像類不能被實例化，所以它必須被其他類繼承。 這是前端文件和代碼後的詳細說明：

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

抽像類 base_class{   

    public const VERS = '1.1.0';// <-- 插件版本
    public const PREFIX = 'qlccf';// <-- 插件前綴
    public const PLDIR = __DIR__ ;// <-- 插件目錄路徑
    public const PLPAT = __FILE__ ;// <-- 文件路徑  

    公共函數 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結帳中插入複選框-鉤子：after_order_notes
    公共函數 quadlayers_subscribe_checkout( $checkout ) {
            woocommerce_form_field（'下標'，數組（
                '類型' => '複選框',
                //'必需' => true,
                'class' => array('custom-field form-row-wide'),
                'label' => '訂閱我們的時事通訊。'                   
            ), $checkout->get_value('suscriptor'));              
    }
    // 在結帳 woocommerce 中插入文本 - 鉤子：after_billing_form
    公共函數 quadlayers_email_checkout($checkout2){
        woocommerce_form_field（'altmail'，數組（
            '類型' => '電子郵件',
            //'必需' => true,
            'class' => array('custom-field form-row-wide'),
            'label' => '替代電子郵件。'                             
        ), $checkout2->get_value('altmail'));  
    }
    // 在結帳 woocommerce 中插入單選自定義字段 - 鉤子：before_order_notes
    公共函數 quadlayers_radio_checkout($checkout3){
        woocommerce_form_field（'飼料'，數組（
            '類型' => '收音機',
            //'必需' => true,
            'class' => array('custom-field form-row-wide'),
            'label' => '你是怎麼找到我們的？',            
                '選項' => 數組（
                    '谷歌' => '谷歌',                  
                    '朋友' => '朋友',
                    '臉書' => '臉書',
                    'Youtube' => 'Youtube',
                    '其他' => '其他'            
                )
        ));
    }
    // 保存所有自定義字段值
    公共函數 quadlayers_save_function( $order_id ){ 
        if ( !empty( $_POST['suscriptor'] ) ) {
            update_post_meta( $order_id, 'suscriptor', sanitize_text_field( $_POST['suscriptor'] ) );
        }
        if ( !empty( $_POST['altmail'] ) ) {
            update_post_meta( $order_id, 'altmail',sanitize_text_field( $_POST['altmail'] ) );
        }
        if ( !empty( $_POST['feed'] ) ) {
            update_post_meta( $order_id, 'feed',sanitize_text_field( $_POST['feed'] ) );
        }      
    }
}// 包含後端類
    include_once(plugin_dir_path( __FILE__ ).'class_qlccf_back.php');
}
別的{
	echo "<h3>INITIALIZATION ERROR - Existing base_class class !</h3>";
}

在聲明類之後，我們定義了一些以後可以使用的常量。 然後，我們將所有將要使用的 WooCommerce 鉤子包含在一個方法中，我們稱之為add_base_hooks() 。

由於無法實例化抽像類，我們從後端文件運行此方法，以便運行此處聲明的所有掛鉤。 我們將每個鉤子用於不同的任務，並為每個鉤子分配以下方法之一。 即這個鉤子： woocommerce_after_order_notes在我們的add_base_hooks()方法中運行 quadlayers_subscribe_checkout( quadlayers_subscribe_checkout()方法，兩者都在base_class類中定義。

請注意我們如何使用一些 WordPress 和 WooCommerce 函數： woocommerce_form_field()它在 WooCommerce 結帳表單中輸出一個自定義字段。 update_post_meta()這個 WordPress 原生函數被廣泛用於更新文章、產品和其他自定義文章類型的數據庫元數據。 此外，可用的輸入字段類型包括：

文本選擇收音機
密碼約會時間本地日期時間
日期月時間
星期數字電子郵件
網址電話

4.後端文件class_qlccf_back.php

這是qlccf_back_class類繼承之前在base_class class_qlccf_base.php file中定義的 base_class 的地方：

 <?php
if(!defined('ABSPATH')){die('-1');}
如果（！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){
                全球 $post; 
                if ( 'suscriptor' === $column ) { # 複選框
                    $order = wc_get_order($post->ID);     
                    $c_meta = $order->get_meta('suscriptor');       
                    if($c_meta==1):$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/true-icon.png';
                    else:$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($post->ID);     
                    $e_meta = $order->get_meta('altmail');
                    迴聲 $e_meta;
                }   
                別的{}     
        }    
        # 設置複選框的列
        公共函數 qlccf_checkbox($columns){
                $columns['suscriptor'] = __('suscriptor');            
                返回$列；
        }
        # 設置替代郵件的列
        公共函數 qlccf_email($columns1){
                $columns1['altmail'] = __('替代郵件');            
                返回 $columns1;
        }
        # 在 WC 電子郵件模板中包含 Alt Mail 字段
        公共函數 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', true );            
            echo '<h2>我的自定義字段</h2><p>備用電子郵件：'.$alt_email.'</p>';            
        }              
    }    
  $run=新的 qlccf_back_class;    
萬一;

在這個文件中，我們定義了一個構造函數來運行我們在另一個文件中聲明的前端鉤子。 然後，我們添加了在後端訂單列表和 WooCommerce 電子郵件模板中顯示自定義字段所需的鉤子，使用條件 if() 和 WordPress 函數is_admin()僅當用戶在後台管理屏幕中時才應用它。 manage_shop_order_posts_custom_column()鉤子在訂單列表中插入一列，因此我們可以在qlccf_column_content()函數中顯示字段。

一旦我們進入 WooCommerce 循環，我們檢查字段名稱是否屬於我們的自定義字段之一，如果是，我們打印它。 使用條件 if()else，我們可以在同一個函數中檢查所有自定義字段。

之後，我們在後端訂單列表中創建一個複選框和文本自定義字段列。 一旦客戶完成結帳流程並創建訂單，我們需要設置我們的自定義列以顯示我們的自定義 WooCommerce 字段。

最後，在最後一個方法中，我們使用woocommerce_email_order_meta鉤子在管理員電子郵件模板中顯示我們的自定義文本字段。 使用的 WordPress 和 WooCommerce 功能：

wc_get_order() ：獲取當前訂單對象及其附加的所有數據

get_meta() ：獲取訂單的元數據

get_post_meta() ：獲取我們保存在數據庫中的自定義字段的值

get_order_number() ：獲取當前訂單的id號

包起來

總而言之，自定義結帳頁面是任何在線商店的必備條件。 在本指南中，我們向您展示瞭如何通過一些編碼以編程方式將自定義字段添加到 WooCommerce 結帳頁面。 您已經學習瞭如何逐步創建自定義插件來優化結帳。

此外，如果您想自定義結帳頁面並將其提升到新的水平，我們建議您查看此分步指南。

你試過這個方法嗎？ 你能想出改進的方法嗎？ 請在下面的評論部分與我們分享您的經驗！

如果您想提高 WooCommerce 中的轉化率，我們建議您查看以下指南：

  • WooCommerce 的最佳快速購買按鈕
  • 如何優化 WooCommerce 中的結帳
  • 如何通過編碼在 WooCommerce 中編輯商店頁面？