プラグインWooCommerceのwoocommerce_checkout_after_customer_detailsアクションの使用方法・解説

概要

woocommerce_checkout_after_customer_details は、WooCommerce のチェックアウトページにおいて、顧客情報の入力セクションの後にカスタムコンテンツを追加するためのフックです。このアクションを使用することで、チェックアウトフォームに独自のフィールドや情報、通知メッセージなどを追加することが可能です。以下は、このアクションがよく使用される機能の例です。

追加情報フィールドの表示
プロモーションメッセージの追加
特別オファーの表示
利用規約の同意チェックボックスの追加
カスタム質問のフィールド追加
支払い条件の確認メッセージの表示

このアクションは、WooCommerce のバージョン 2.0.0 以降および WordPress のバージョン 4.0 以降で使用可能です。

構文

do_action('woocommerce_checkout_after_customer_details');

パラメータ

このアクションには、特にパラメータはありません。

戻り値

このアクションに戻り値はありません。

サンプルコード

サンプルコード 1: 追加情報フィールドの表示

顧客情報セクションの後に、「特別なリクエスト」フィールドを追加します。

add_action('woocommerce_checkout_after_customer_details', 'add_special_request_field');

function add_special_request_field() {
    echo '<div id="special_request_field"><h3>' . __('Special Request') . '</h3><p class="form-row form-row-wide"><textarea name="special_request" id="special_request" style="width:100%; height: 150px;"></textarea></p></div>';
}

（引用元: WooCommerce フックリファレンス）

サンプルコード 2: プロモーションメッセージの追加

チェックアウト顧客情報セクションの後に、プロモーションメッセージを表示します。

add_action('woocommerce_checkout_after_customer_details', 'add_promotion_message');

function add_promotion_message() {
    echo '<div class="promotion-message"><p>' . __('Get 10% off on your next purchase if you sign up for our newsletter!') . '</p></div>';
}

（引用元: WooCommerce カスタマイズガイド）

サンプルコード 3: 利用規約同意チェックボックスの追加

チェックアウト後に利用規約同意のためのチェックボックスを追加します。

add_action('woocommerce_checkout_after_customer_details', 'add_terms_checkbox');

function add_terms_checkbox() {
    echo '<p class="form-row terms-checkbox"><label><input type="checkbox" name="terms_agree" required /> ' . __('I agree to the terms and conditions') . '</label></p>';
}

（引用元: WooCommerce コーディングスタンダード）

サンプルコード 4: カスタム質問フィールドの追加

顧客情報セクションの後にカスタム質問フィールドを追加します。

add_action('woocommerce_checkout_after_customer_details', 'add_custom_question_field');

function add_custom_question_field() {
    echo '<p class="custom-question"><label for="custom_question">' . __('What is your favorite product?') . '</label>';
    echo '<input type="text" name="custom_question" id="custom_question" /></p>';
}

（引用元: WooCommerce 開発者ロードマップ）

サンプルコード 5: 夏のキャンペーンメッセージの表示

夏に向けたキャンペーンメッセージを顧客情報の後に表示します。

add_action('woocommerce_checkout_after_customer_details', 'add_summer_campaign_message');

function add_summer_campaign_message() {
    echo '<div class="summer-campaign"><h3>' . __('Summer Sale is on! Enjoy discounts up to 50%!') . '</h3></div>';
}

（引用元: WooCommerce チュートリアル）

この関数のアクションでの使用可能性

アクション名	使用例
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

概要

構文