WooCommerceチェックアウトページにカスタムフィールドを追加する方法

公開: 2020-07-21

チェックアウトをカスタマイズしますか？このガイドでは、WooCommerceのチェックアウトページにカスタムフィールドを追加して、ストアを次のレベルに引き上げる方法を説明します。

なぜWooCommerceチェックアウトをカスタマイズするのですか？

QuadLayersでは、WooCommerceでショップページをカスタマイズする方法を以前に見てきました。今日は、同じことを行い、チェックアウトにカスタムフィールドを含める方法を見ていきます。チェックアウトは、オンラインストアにとって最も重要なページの1つです。買い物客が購入を完了し、販売を終了できるように、買い物客を連れて行きたい場所です。したがって、コンバージョン率と収益を向上させるには、カスタムフィールドを使用してチェックアウトを最適化する必要があります。

完璧なチェックアウトページはどうですか？それはあなたのビジネスに大きく依存します。たとえば、物理的な商品のチェックアウトは、デジタル商品のチェックアウトとは異なります。 1ページまたは複数ページのチェックアウトを選択したり、フィールドを表示または非表示にしたり、さまざまな色を使用したりします。ただし、最も重要なことは、チェックアウトがユーザーの信頼を生み出し、気を散らすものがなく、買い物客ができるだけ時間を費やさないように最適化されていることです。

WooCommerceチェックアウトページにカスタムフィールドを追加するにはどうすればよいですか？

WooCommerceのチェックアウトページでカスタムフィールドを追加または非表示にする主な方法は2つあります。

プラグイン付き
プログラムで

コーディングスキルがない場合は、次のプラグインを確認することをお勧めします。

WooCommerce Direct Checkout ：これは、チェックアウトプロセスを簡素化し、ユーザーを製品ページからチェックアウトにリダイレクトするための優れたツールです。無料版と19米ドルからのプレミアムプランがあります。
WooCommerce Checkout Manager ：90,000以上のアクティブなインストールがある、Checkout Managerは、コンバージョン率を上げるための優れたプラグインです。チェックアウトページのフィールドを追加、カスタマイズ、および削除できます。これは、19米ドルからの無料バージョンとプロプランを備えたフリーミアムツールです。

これらのチェックアウトプラグインは優れた選択肢であり、作業をスムーズに行うことができます。ただし、プラグインをインストールしたくない場合は、ソリューションをコーディングできます。このガイドでは、コーディングを使用してWooCommerceチェックアウトページにカスタムフィールドを追加する方法に焦点を当てます。

プログラムでWooCommerceチェックアウトにカスタムフィールドを追加する

このセクションでは、プログラムでWooCommerceチェックアウトページにカスタムフィールドを追加する方法を学習します。以下を含める方法を説明します。

文章
チェックボックス
ラジオ入力タイプ

追加できるカスタムフィールドは他にもありますが、何らかの検証が必要になる場合があることに注意してください。したがって、このチュートリアルでは、これら3つのタイプに焦点を当て、入力された値の検証が必要なフィールドをスキップします。さらに、バックエンド注文リストと電子メールテンプレートにカスタムフィールドを表示します。

注：プロジェクトに他のフィールドを追加する場合は、セキュリティ検証を実装する必要があることに注意してください。

したがって、WooCommerceチェックアウトページにカスタムフィールドを追加するには、次の2つのオプションがあります。

子テーマでスクリプトをコーディングできます
カスタムプラグインを作成する

よりスケーラブルで適切に構成されたソリューションを構築するために、カスタムプラグインを作成します。さらに、子テーマのアプローチとは異なり、カスタムプラグインもさらなる開発の出発点になる可能性があります。ただし、子テーマを使用する場合は、このガイドを確認することをお勧めします。

カスタムプラグインを使用してWooCommerceチェックアウトにカスタムフィールドを追加する

ビルドするカスタムプラグインには3つのファイルがあります。

主要
フロントエンド
バックエンド

メインファイルは、フロントエンドスクリプトに使用するフロントエンドファイルへのゲートウェイの入り口として機能します。また、バックエンドスクリプトがある3番目のファイルを含めます。このフロントエンドファイルがメインのベースファイルになり、クラスを追加する場合は、低レベルの階層ファイル（バックエンドファイルと同様）に移動する必要があることに注意してください。それでは、カスタムプラグインを使用してWooCommerceチェックアウトページにカスタムフィールドを追加する方法を見てみましょう。

1.お気に入りのIDEを開き、次の3つのファイルを含むフォルダーを作成します。

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
 *プラグイン名：QuadLayersCheckoutカスタムフィールド 
 *プラグイン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 {	
		public static function run（）{
			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
    public function quadlayers_subscribe_checkout（$ checkout）{
            woocommerce_form_field（ 'suscriptor'、array（
                'type' => 'チェックボックス'、
                // '必須' => true、
                'class' => array（ 'custom-field form-row-wide'）、
                'label' => 'ニュースレターを購読してください。                   
            ）、$ checkout-> get_value（ 'suscriptor'））;              
    }
    //チェックアウトにテキストを挿入しますwoocommerce--hook：after_billing_form
    public function quadlayers_email_checkout（$ checkout2）{
        woocommerce_form_field（ 'altmail'、array（
            'type' => 'email'、
            // '必須' => true、
            'class' => array（ 'custom-field form-row-wide'）、
            'label' => '代替メール。'                             
        ）、$ checkout2-> get_value（ 'altmail'））;  
    }
    //チェックアウトにラジオカスタムフィールドを挿入しますwoocommerce--hook：before_order_notes
    パブリック関数quadlayers_radio_checkout（$ checkout3）{
        woocommerce_form_field（ 'feed'、array（
            'type' => 'radio'、
            // '必須' => true、
            'class' => array（ 'custom-field form-row-wide'）、
            'label' => 'どうやって私たちを見つけましたか？。'、            
                'オプション' => array（
                    'Google' => 'Google'、                  
                    '友達' => '友達'、
                    'Facebook' => 'Facebook'、
                    'Youtube' => 'YoutTube'、
                    'その他' => 'その他'            
                ）。
        ））;
    }
    //すべてのカスタムフィールド値を保存します
    public function 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-既存のbase_classクラス！</ h3>";
}

クラスを宣言した後、後で使用できるいくつかの定数を定義します。次に、使用するすべてのWooCommerceフックを1つのメソッドに含めます。これをadd_base_hooks()と呼びます。

抽象クラスはインスタンス化できないため、バックエンドファイルからこのメソッドを実行して、ここで宣言されているすべてのフックを実行します。それぞれのフックを異なるタスクに使用し、それぞれに次のメソッドのいずれかを割り当てます。 woocommerce_after_order_notes （ add_base_hooks()メソッドのquadlayers_subscribe_checkout()は、両方ともbase_classクラス内で定義されたquadlayers_subscribe_checkout（）メソッドを実行します。

WordPressおよびWooCommerce関数の一部をどのように使用しているかに注意してくださいwoocommerce_form_field() WooCommerceチェックアウトフォームにカスタムフィールドを出力します。 update_post_meta()このWordPressネイティブ関数は、投稿、製品、およびその他のカスタム投稿タイプのデータベースメタデータを更新するために広く使用されています。さらに、使用可能な入力フィールドのタイプは次のとおりです。

文章	選択する	無線
パスワード	日付時刻	日時-ローカル
日にち	月	時間
週	番号	Eメール
url	tel

4.バックエンドファイル、 `class_qlccf_back.php`

これは、 qlccf_back_classクラスがclass_qlccf_base.php fileで以前に定義されたbase_classを継承する場所です。

 <？php
if（！defined（ 'ABSPATH'））{die（ '-1'）;}
if（！class_exists（ 'qlccf_back_class'））：
    クラスqlccf_back_classはbase_class {を拡張します

        パブリック関数__construct（）{       
            parent :: add_base_hooks（）; 
            if（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'））;
            endif;
        }             
        ＃カスタムフィールドの値をバックエンドの順序リストに表示する 
        パブリック関数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';
                    endif;                       
                    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'）;            
                $ columnsを返します。
        }
        ＃代替メールの列を設定する
        パブリック関数qlccf_email（$ columns1）{
                $ columns1 ['altmail'] = __（ '代替メール'）;            
                $ columns1を返します。
        }
        ＃WCメールタンプレートにAltMailフィールドを含める
        パブリック関数qlccf_email_template（$ order_obj）{
            $ is_set = get_post_meta（$ order_obj-> get_order_number（））;           
                //カスタムフィールドが設定されていない場合に返します
            if（empty（$ is_set））
		    戻る; 
	        // OK、先に進んでカスタムフィールドをエコーします
            $ alt_email = get_post_meta（$ order_obj-> get_order_number（）、 'altmail'、true）;            
            echo '<h2>マイカスタムフィールド</ h2> <p>代替メール：'。$ alt_email。 '</ p>';            
        }              
    }    
  $ run = new qlccf_back_class;    
endif;

このファイルでは、他のファイルで説明したフロントエンドフックを実行するコンストラクターを定義します。次に、条件付きif（）とWordPress関数is_admin()を使用して、バックエンド注文リストとWooCommerceメールテンプレートにカスタムフィールドを表示するために必要なフックを追加し、ユーザーが管理バックエンド画面にいる場合にのみ適用します。 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のショップページを編集するにはどうすればよいですか？