WooCommerceチェックアウトフックの使用方法

このガイドでは、WooCommerceでチェックアウトフックを使用する方法を学習します。 主なフックのいくつかを見て、それらを使って何ができるかの例をいくつか示します。 だから、あなたのチェックアウトページをカスタマイズしてあなたのコンバージョン率を上げる準備をしてください。

WooCommerceフックとは何ですか？

フックは、コアファイルを変更せずにコードを変更または追加できる強力な機能です。 フックは多くの柔軟性を提供し、開発者はフックを使用してWooCommerceのデフォルト機能を変更します。

フックには2つの異なるタイプがあります。

• アクションフックを使用すると、イベントが発生したときに特定のアクションを実行するカスタムコードを追加できます。
• フィルタフックは、既存の変数または関数の動作を変更します。

WooCommerceフックのおかげで、開発者は非常に実用的で柔軟な方法で高度にカスタマイズされたソリューションを作成できます。 WooCommerceで最も重要なフックのいくつかは、チェックアウトフックです。 また、オンラインストアがある場合は、それらを使用してチェックアウトをカスタマイズし、コンバージョン率を向上させる必要があります。

WooCommerceチェックアウトフック

チェックアウトフックは、WooCommerceがサポートする複数のフックの1つのタイプであり、チェックアウトページで実行されます。 これらのチェックアウトフックを使用して、メモの編集、請求フィールドの前、注文の確認前、またはチェックアウトフォームの後にコンテンツを追加したり、ロジックを適用して価格を上げたり、役割ごとにユーザーを制限したりできます。

WooCommerceフックは、WordPressのネイティブフックとまったく同じように機能します。 したがって、WordPressフックに精通している場合は、WooCommerceフックを習得するのは簡単です。

始める前に

フックにジャンプする前に、子テーマを作成することをお勧めします。 使用できるツールはたくさんあります。 WordPressに最適な子テーマプラグインのリスト、またはプラグインを使用して、または手動で子テーマを作成する方法に関する詳細なガイドを確認できます。

フックを初めて使用する場合は、これらのスクリプトをコピーして、子テーマのfunctions.phpファイルに直接貼り付けることができます。 投稿の最後に、チェックアウトフックを使用していくつかのアイデアを提供できる例がいくつかあります。

WooCommerceチェックアウトフックの使い方は？

前に見たように、WooCommerceアクションフックとフィルターフックがあり、どちらも同様の構文を持っています。

これは、アクションフックの例です。

 add_action（ 'woocommerce_after_checkout_billing_form'、 'QuadLayers_callback_function'）;
function QuadLayers_callback_function（）{
    ＃ここにコードを追加します
}

ここで、 woocommerce_after_checkout_billing_formはフックであり、 QuadLayers_callback_functionは、カスタムスクリプトを追加するために作成する関数です。

一方、フィルターフックは同じように機能しますが、関数内のパラメーターを受け取って返す必要があります。 例えば：

 add_filter（ 'woocommerce_breadcrumb_defaults'、 'quadlayers_change_breadcrumb'）;
function quadlayers_change_breadcrumb（$ content）{
$ content。= "QuadLayers";
$ contentを返します。
}

WooCommerceのチェックアウトフックのリスト

チェックアウトページで使用できるWooCommerceフックはたくさんあります。 主なもののいくつかは次のとおりです。

• woocommerce_before_checkout_form
• woocommerce_checkout_before_customer_details
• woocommerce_checkout_billing
• woocommerce_before_checkout_billing_form
• woocommerce_checkout_shipping
• woocommerce_before_order_notes
• woocommerce_after_order_notes
• woocommerce_checkout_after_order_review
• woocommerce_checkout_after_customer_details
• woocommerce_review_order_before_cart_contents
• woocommerce_review_order_before_shipping
• woocommerce_review_order_after_order_total
• woocommerce_checkout_order_review
• woocommerce_review_order_before_submit
• woocommerce_review_order_before_payment
• woocommerce_review_order_after_submit
• woocommerce_review_order_after_payment
• woocommerce_after_checkout_form

それらのすべては、自明の名前を持っています。 WooCoommerceフックの完全なリストを確認したい場合は、このドキュメントを確認してください。 また、各フックがどのように機能するかを確認するには、この投稿をご覧ください。

たとえば、請求フォームの後、配送セクションのタイトルの前にコンテンツを追加するとします。 次のようなものを使用します。

 add_action（ 'woocommerce_after_checkout_billing_form'、 'QuadLayers_callback_function'）;
function QuadLayers_callback_function（）{
echo 'ここにコンテンツテキストまたはhtmlがあります';
}

この場合、テキストを追加するだけですが、複雑なHTML構造を追加し、PHP関数を使用してカスタムロジックを作成できます。 WooCommerceのチェックアウトフックを最大限に活用する方法についていくつかのアイデアを提供するために、いくつかの例を見てみましょう。

WooCommerceフックを使用してチェックアウトページをカスタマイズする方法

ここでは、サイトのWooCommerceフックを使用してチェックアウトページをカスタマイズするためにできることの例をいくつか示します。

注文レビューに画像を追加する

注文レビューページに画像を追加できます。 この場合、QRコードを追加しましたが、他の画像、アニメーションGIF、または背景画像を含めることができます。

 add_action（ 'woocommerce_review_order_before_payment'、 'example_callback'）;
関数example_callback（）{
    echo '<img src = "https://quadlayers.com/wp-content/uploads/2020/06/frame.png" width = "200px" height = "200px">';  
} 

チェックアウトページでブレッドクラムを変更します

ブレッドクラムを編集することで、ユーザーがホームページに戻るのを防ぐことができます。 この例では、 Storeのブレッドクラムのホームテキストを変更する方法を示します。

 add_filter（ 'woocommerce_breadcrumb_defaults'、 'quadlayers_change_breadcrumb'）;
関数 'quadlayers_change_breadcrumb'（$ default）{
    $ default ['home'] = 'ストア';
    $ defaultを返します。
}

[注文する]ボタンの横に信頼バッジを表示する

WooCommerceチェックアウトフックは、信頼を築き、顧客が購入しようとしているときに安心感を与えるためのいくつかの優れたオプションを提供します。 [注文する]ボタンのすぐ横に信頼バッジを表示することで、コンバージョン率を向上させ、ブランドに対する信頼を築くことができます。

 add_action（ 'woocommerce_review_order_after_submit'、 'quadlayers_trust_badges'）;
関数quadlayers_trust_badges（）{
    エコー '<div class = "trust-badges">
    <img src = "https://www.pngitem.com/pimgs/m/19-197703_transparent-secure-checkout-png-best-trust-badges-for.png">
    </ div> <div class = "trust-badge-message"> <i>上記の信頼バッジをWooCommerceフックで追加しました</ i> </ div> ';
} 

既存のチェックアウトフィールドを編集する

チェックアウトページを完全にカスタマイズする最良の方法は、ラベルとフィールドのプレースホルダーを編集することです。 この例では、 woocommerce_checkout_fieldsフックを使用して、注文メモの名とプレースホルダーのラベルを編集します。

 add_filter（ 'woocommerce_checkout_fields'、 'quadlayers_labels_placeholders'、9999）; 
function quadlayers_labels_placeholders（$ f）{ 	
	$ f ['billing'] ['billing_first_name'] ['label'] = 'あなたの名前は何ですか？';
	$ f ['order'] ['order_comments'] ['placeholder'] = '何を考えていますか？'; 
	$ fを返します。 
} 

カスタムチェックアウトフィールドを追加する

最後に、より複雑な例を示します。 顧客がチェックアウト時にニュースレターを購読できるようにする新しいカスタムフィールドを作成する方法を紹介します。 そのために、2つのフックを使用します。1つはサブスクライブするフィールドを表示するためのもので、もう1つはボタンの状態をデータベースに保存するためのものです（チェックされているかどうかは関係ありません）。

 add_action（ 'woocommerce_after_order_notes'、 'quadlayers_subscribe_checkout'）;
add_action（ 'woocommerce_checkout_update_order_meta'、 'quadlayers_save_function'）;

// woocommerceチェックアウトにチェックボックスを挿入します 
function quadlayers_subscribe_checkout（$ checkout）{ 
	woocommerce_form_field（ 'サブスクライブ'、array（
		'type' => 'チェックボックス'、
		'class' => array（ 'misha-field form-row-wide'）、
		'label' => 'ニュースレターを購読してください。'、
		）、$ checkout-> get_value（ 'subscribed'））; 
}
//フィールド値を保存します
function quadlayers_save_function（$ order_id）{ 
	if（！empty（$ _POST ['contactmethod']））
		update_post_meta（$ order_id、 'contactmethod'、sanitize_text_field（$ _POST ['contactmethod']））; 
	if（！empty（$ _POST ['subscribed']）&& $ _POST ['subscribed'] == 1）
		update_post_meta（$ order_id、 'サブスクライブ'、1）; 
}

プラグインを使用してチェックアウトページをカスタマイズする

フックの使用に慣れていない場合は、プラグインを使用してチェックアウトページをカスタマイズすることもできます。 そこには多くのツールがありますが、次の2つをお勧めします。

• WooCommerceのチェックアウトマネージャー：70,000以上のアクティブなインストールがあり、これはWooCommerceで最も人気のあるチェックアウトプラグインの1つです。 チェックアウトマネージャを使用すると、チェックアウトページのフィールドをカスタマイズ、追加、編集、および削除できます。 無料版と20米ドルから始まる3つのプレミアムプランがあります。
• WooCommerceの直接チェックアウト：このフリーミアムツールを使用すると、チェックアウトプロセスを簡素化し、コンバージョン率を上げることができます。 購入プロセスを短縮して、顧客を商品ページから直接チェックアウトにリダイレクトできます。 ダイレクトチェックアウトには、20米ドル（1回払い）から始まる無料バージョンとプレミアムプランがあります。

これらのプラグインの使用方法とチェックアウトページの改善方法の詳細については、詳細ガイドをご覧ください。

結論

全体として、WooCommerceフックを使用すると、チェックアウトページをカスタマイズして、コンバージョン率を上げることができます。 ここでは、これらのフックを使用してチェックアウトのさまざまなセクションをパーソナライズする方法の例をいくつか示しました。 ただし、できることはまだまだたくさんあります。 ですから、彼らと遊んで、あなたの創造性を解き放つことをお勧めします。

WooCommerceチェックアウトページをカスタマイズする方法のその他の例と情報については、このステップバイステップガイドを確認してください。

ご不明な点がございましたら、下のコメント欄でお知らせください。 そして、あなたが読んだことを楽しんだならば、ソーシャルメディアでこの投稿を共有してください！