28 WooCommerce チェックアウトフック: 視覚的なガイド以上のもの

公開: 2022-09-15

目次隠す

1.フックとは?

1.1。フックの 2 つの主要なタイプ

1.1.1. アクションフック

1.1.2. フィルターフック

1.2. WooCommerce でフックを使用する理由

2.すべての WooCommerce チェックアウトフック

3.チェックアウトページのデフォルトアクションの削除

4. WooCommerce のカスタムチェックアウトフィールドエディター

5.まとめ

WooCommerce の最も優れた機能の 1 つは、カスタマイズです。フックを使用して、商品ページ、カートページ、チェックアウトページにコンテンツを追加できます。

このガイドでは、すべての WooCommerce チェックアウトフックと、それらをチェックアウトページのどこに何のために配置できるかを示します。

フックとは何か、そのタイプについて簡単に説明してから、チェックアウトページのフックにジャンプしましょう。

フックとは？

WordPress のフックを使用すると、コアファイルを変更せずにコードを変更または追加できます。

オブジェクトを保持するための実際のフックのように機能するため、フックと呼ばれます。 e コマースの世界では、フックが追加のプログラムを開催しています。

カスタマーエクスペリエンスを向上させるために、ストアオーナーと開発者はこれらのフックを使用します。ここに段落、製品説明、アイコン、画像、ロゴ、テキストを追加します。

フックの 2 つの主要なタイプ

WordPress フックはたくさんありますが、2 つのタイプに分類できます。

アクションフック
フィルターフック

アクションフック

アクションフックを使用すると、Web サイトのどこにでも機能を追加できます。このフックを使用して、追加のウィジェット、メニュー、さらにはメッセージを追加できます。

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

add_action( 'woocommerce_before_checkout_billing_form', 'storeapps_before_checkout_billing_form' );
関数 storeapps_before_checkout_billing_form() {
   // ここにコードを追加します
}

woocommerce_before_checkout_billing_form はフックで、storeapps_callback_function はカスタムスクリプトを追加するために作成する関数です。

フィルターフック

フィルターフックを使用すると、既存の関数を変更できます。これらのフックでは、新しいものを追加するのではなく、データを変更またはフィルタリングするだけです。

例えば：

add_filter( 'woocommerce_breadcrumb_defaults', 'storeapps_change_breadcrumb' );
function storeapps_change_breadcrumb( $content ) {
   $content .= "StoreApps";
   $コンテンツを返します。
}

もう 1 つの例は、ストア全体の [カートに追加] ボタンがフィルターによって変化することです。

WooCommerce でフックを使用する理由

これらのフックができることを理解したら、これらのフックを無視して使用しないという方法はほとんどありません。ストア内のすべてがカスタマイズ可能であるため、これらのフックを使用して必要な WooCommerce ストアを作成できます。

フックを使用すれば、これらの結果について心配する必要はありません。テーマを変更しても、変更には影響しません。したがって、すべての頭痛の種とリスクを回避するために、フックに固執することをお勧めします。

チェックアウトはどのストアにとっても最も重要なページであるため、WooCommerce チェックアウトページのフックを見てみましょう。

すべての WooCommerce チェックアウトフック

ソース – TycheSoftwares

woocommerce_before_checkout_form
woocommerce_checkout_before_customer_details
woocommerce_checkout_billing
woocommerce_before_checkout_billing_form
woocommerce_after_checkout_billing_form
woocommerce_before_checkout_registration_form
woocommerce_after_checkout_registration_form
woocommerce_checkout_shipping
woocommerce_before_checkout_shipping_form
woocommerce_after_checkout_shipping_form
woocommerce_before_order_notes
woocommerce_after_order_notes
woocommerce_checkout_after_customer_details
woocommerce_checkout_before_order_review_heading
woocommerce_checkout_order_review
woocommerce_checkout_before_order_review
woocommerce_review_order_before_cart_contents
woocommerce_review_order_after_cart_contents
woocommerce_review_order_before_shipping
woocommerce_review_order_after_shipping
woocommerce_review_order_before_order_total
woocommerce_review_order_after_order_total
woocommerce_review_order_before_payment
woocommerce_review_order_before_submit
woocommerce_review_order_after_submit
woocommerce_review_order_after_payment
woocommerce_checkout_after_order_review
woocommerce_after_checkout_for

各フックの詳細、配置場所、追加方法を見てみましょう。

1.woocommerce_before_checkout_form
フックは、チェックアウトフォームの前に定義されます。チェックアウトページのクーポンフィールドの上に配置されます。

add_action( 'woocommerce_before_checkout_form', 'storeapps_before_checkout_form', 10 );
関数 storeapps_before_checkout_form() {
	echo '<h2>woocommerce_before_checkout_form</h2>';
}

2.woocommerce_checkout_before_customer_details
フックは、顧客の詳細の直前のチェックアウトフォームで定義されます。

add_action( 'woocommerce_checkout_before_customer_details', 'storeapps_checkout_before_customer_details', 10 );
関数 storeapps_checkout_before_customer_details() {
	echo '<h2>woocommerce_checkout_before_customer_details</h2>';
}

3.woocommerce_checkout_billing
これは、チェックアウトページに追加された新しいフックです。このフックを使用して、チェックアウトページの請求フォームテンプレートが含まれます。

add_action('woocommerce_checkout_billing', 'storeapps_checkout_billing');
関数 storeapps_checkout_billing() {
    echo '<h2>woocommerce_checkout_billing</h2>';
}

4.woocommerce_before_checkout_billing_form
フックは請求フォームの開始前に定義されます。

add_action( 'woocommerce_before_checkout_billing_form', 'storeapps_before_checkout_billing_form', 10 );
関数 storeapps_before_checkout_billing_form() {
	echo '<h2>woocommerce_before_checkout_billing_form</h2>';
}

5. woocommerce_after_checkout_billing_form
請求フォームの完了後にフックが定義されます。

add_action( 'woocommerce_after_checkout_billing_form', 'storeapps_after_checkout_billing_form', 10 );
関数 storeapps_after_checkout_billing_form() {
	echo '<h2>woocommerce_after_checkout_billing_form</h2>';
}

6.woocommerce_before_checkout_registration_form
フックは、アカウント作成フォームの後に請求フォームテンプレートで定義されます。これは、ゲストユーザーに対して実行されます。

add_action('woocommerce_before_checkout_registration_form', 'storeapps_before_checkout_registration');
関数 storeapps_before_checkout_registration_form() {
    echo '<h2>woocommerce_before_checkout_registration_form</h2>';
}

7.woocommerce_after_checkout_registration_form
このフックは請求フォームテンプレートで定義されます。これは、ゲストユーザーに対して実行されます。

add_action('woocommerce_after_checkout_registration_form', 'storeapps_after_checkout_registration_form');
関数 storeapps_after_checkout_registration_form() {
    echo '<h2>woocommerce_after_checkout_registration_form</h2>';
}

8.woocommerce_checkout_shipping
このフックは、出荷フォームの前に出荷フォームテンプレートで定義されます。

add_action('woocommerce_checkout_shipping', 'storeapps_checkout_shipping');
関数 storeapps_checkout_shipping() {
    echo '<h2>woocommerce_checkout_shipping</h2>';
}

9.woocommerce_before_checkout_shipping_form
このフックは、配送フォームの開始直前に定義されます。

add_action( 'woocommerce_before_checkout_shipping_form', 'storeapps_before_checkout_shipping_form', 10 );
関数 storeapps_before_checkout_shipping_form() {
	echo '<h2>woocommerce_before_checkout_shipping_form</h2>';
}

10. woocommerce_after_checkout_shipping_form
このフックは、配送フォームの完了後に定義されます。

add_action( 'woocommerce_after_checkout_shipping_form', 'storeapps_after_checkout_shipping_form', 10 );
関数 storeapps_after_checkout_shipping_form() {
	echo '<h2>woocommerce_after_checkout_shipping_form</h2>';
}

11.woocommerce_before_order_notes
このフックは、チェックアウトページの注文メモフィールドの前に定義されます。

add_action( 'woocommerce_before_order_notes', 'storeapps_before_order_notes', 10 );
関数 storeapps_before_order_notes() {
	echo '<h2>woocommerce_before_order_notes</h2>';
}

12.woocommerce_after_order_notes
このフックは、チェックアウトページの注文メモフィールドの後に定義されます。

add_action( 'woocommerce_after_order_notes', 'storeapps_after_order_notes', 10 );
関数 storeapps_after_order_notes() {
	echo '<h2>woocommerce_after_order_notes</h2>';
}

13.woocommerce_checkout_after_customer_details
フックは、顧客の詳細を入力した後、つまり請求と配送フィールドの後に配置されます。

add_action( 'woocommerce_checkout_after_customer_details', 'storeapps_checkout_after_customer_details', 10 );
関数 storeapps_checkout_after_customer_details() {
	echo '<h2>woocommerce_checkout_after_customer_details</h2>';
}

14.woocommerce_checkout_before_order_review_heading
このフックは、注文レビューの見出し、つまり「ご注文」の前のチェックアウトテンプレートで定義されます。このフックは WooCommerce v3.6.0 で追加されました。

add_action('woocommerce_checkout_before_order_review_heading', 'storeapps_checkout_before_order_review_heading');
関数 storeapps_checkout_before_order_review_heading() {
    echo '<h2>woocommerce_checkout_before_order_review_heading</h2>';
}

15.woocommerce_checkout_order_review
フックは、メインのチェックアウトテンプレートで定義されます。注文レビューテーブルテンプレートは、このフックを使用してインクルードされます。

add_action('woocommerce_checkout_order_review', 'storeapps_checkout_order_review');
関数 storeapps_checkout_order_review() {
    echo '<h2>woocommerce_checkout_order_review</h2>';
}

16.woocommerce_checkout_before_order_review
このフックは、チェックアウトページの注文の詳細の前に定義されます。

add_action( 'woocommerce_checkout_before_order_review', 'storeapps_checkout_before_order_review', 10 );
関数 storeapps_checkout_before_order_review() {
	echo '<h2>woocommerce_checkout_before_order_review</h2>';
}

17.woocommerce_review_order_before_cart_contents
このフックは、コンテンツの前にオーダーテーブル本体内で定義されます。

add_action( 'woocommerce_review_order_before_cart_contents', 'storeapps_review_order_before_cart_contents', 10 );
関数 storeapps_review_order_before_cart_contents() {
	echo '<h2>woocommerce_review_order_before_cart_contents</h2>';
}

18.woocommerce_review_order_after_cart_contents
このフックは、すべてのコンテンツの後、オーダーテーブル本体内で定義されます。

add_action( 'woocommerce_review_order_after_cart_contents', 'storeapps_review_order_after_cart_contents', 10 );
関数 storeapps_review_order_after_cart_contents() {
	echo '<h2>woocommerce_review_order_after_cart_contents</h2>';
}

19.woocommerce_review_order_before_shipping
このフックは、注文テーブルの配送セクションの前に定義されています。

add_action( 'woocommerce_review_order_before_shipping', 'storeapps_review_order_before_shipping', 10 );
関数 storeapps_review_order_before_shipping() {
	echo '<h2>woocommerce_review_order_before_shipping</h2>';
}

20.woocommerce_review_order_after_shipping
このフックは、注文詳細テーブルの配送セクションの後に定義されます。

add_action( 'woocommerce_review_order_after_shipping', 'storeapps_review_order_after_shipping', 10 );
関数 storeapps_review_order_after_shipping() {
	echo '<h2>woocommerce_review_order_after_shipping</h2>';
}

21.woocommerce_review_order_before_order_total
このフックは、注文詳細テーブルの合計セクションの前と配送セクションの後に定義されます。

add_action( 'woocommerce_review_order_before_order_total', 'storeapps_review_order_before_order_total', 10 );
関数 storeapps_review_order_before_order_total() {
	echo '<h2>woocommerce_review_order_before_order_total</h2>';
}

22.woocommerce_review_order_after_order_total
このフックは、注文詳細テーブルの合計セクション & の後に定義されます。

add_action( 'woocommerce_review_order_after_order_total', 'storeapps_review_order_after_order_total', 10 );
関数 storeapps_review_order_after_order_total() {
	echo '<h2>woocommerce_review_order_after_order_total</h2>';
}

23.woocommerce_review_order_before_payment
このフックは、チェックアウトページの支払い方法セクションの前に定義されます。

add_action( 'woocommerce_review_order_before_payment', 'storeapps_review_order_before_payment', 10 );
関数 storeapps_review_order_before_payment() {
	echo '<h2>woocommerce_review_order_before_payment</h2>';
}

24.woocommerce_review_order_before_submit
このフックは、チェックアウトページの [注文する] ボタンの前に定義されます。

add_action( 'woocommerce_review_order_before_submit', 'storeapps_review_order_before_submit', 10 );
関数 storeapps_review_order_before_submit() {
	echo '<h2>woocommerce_review_order_before_submit</h2>';
}

25.woocommerce_review_order_after_submit
このフックは、チェックアウトページの [注文する] ボタンの後に定義されます。

add_action( 'woocommerce_review_order_after_submit', 'storeapps_review_order_after_submit', 10 );
関数 storeapps_review_order_after_submit() {
	echo '<h2>woocommerce_review_order_after_submit</h2>';
}

26.woocommerce_review_order_after_payment
このフックは、「注文する」ボタンを含む支払いセクション全体の後に定義されます。

add_action( 'woocommerce_review_order_after_payment', 'storeapps_review_order_after_payment', 10 );
関数 storeapps_review_order_after_payment() {
	echo '<h2>woocommerce_review_order_after_payment</h2>';
}

27.woocommerce_checkout_after_order_review
このフックは、注文詳細表と支払いセクションを含むチェックアウトページの注文レビューセクションの後に定義されます。

add_action( 'woocommerce_checkout_after_order_review', 'storeapps_checkout_after_order_review', 10 );
関数 storeapps_checkout_after_order_review() {
	echo '<h2>woocommerce_checkout_after_order_review</h2>';
}

28. woocommerce_after_checkout_form
このフックは、チェックアウトフォームの最後で定義されます。

add_action( 'woocommerce_after_checkout_form', 'storeapps_after_checkout_form', 10 );
関数 storeapps_after_checkout_form() {
	echo '<h2>woocommerce_after_checkout_form</h2>';
}

チェックアウトページのデフォルトアクションの削除

デフォルトでは、いくつかのフックのみが WooCommerce によって追加に使用されます。

チェックアウトフォームの前のログインフォーム (woocommerce_checkout_login_form)
チェックアウトフォームの前のクーポンフォーム (woocommerce_checkout_coupon_form)
注文レビューセクションへの注文レビューテーブル (woocommerce_order_review)
支払いテーブルも注文レビューセクション (woocommerce_checkout_payment) に

このコードは、以下に示すように簡単に削除できます。 WordPress コードスニペットを安全に追加する方法については、このドキュメントを参照することもできます。

/**
 * デフォルトの WooCommerce チェックアウト フックを削除します
 */
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );

WooCommerce のカスタムチェックアウトフィールドエディター

上記の例は、簡単なコードスニペットを含むテキストを WooCommerce チェックアウトページに追加する方法を示しています。

しかし、カスタムチェックアウトフィールドはどうでしょうか? カスタムコーディングには、さらに多くの作業が必要になります。

ただし、キャッシャーの助けを借りて、主要な WooCommerce フィールドを編集/追加/削除し、配送、請求、および追加フィールドセクションのカスタムフィールドを追加することもできます。

まとめ

このガイドが、重要な WooCommerce チェックアウトフックをすべてカバーするのに役立つことを願っています。

それらを使用して、オンラインストアのチェックアウトページを改善します。肝心なのは、チェックアウトページは顧客への入り口のようなものであり、これらのフックを賢く使用すれば、ストアの全体的なユーザーエクスペリエンスを向上させることができるということです.

また、チェックアウトをさらに最適化するために、WooCommerce チェックアウトプラグインがいつでも利用できます。

28 WooCommerce チェックアウト フック: 視覚的なガイド以上のもの