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

概要

woocommerce_checkout_before_customer_detailsアクションは、WooCommerceのチェックアウトページにおいて、顧客情報の入力セクションの前に何らかのコンテンツを挿入するために使用されます。このフックを利用することで、様々な機能を実装することが可能です。主に以下のような用途で利用されます。

カスタムフィールドの追加
プロモーションメッセージの表示
アップセル商品の提案
オプトイン通知の追加
FAQやカスタマーサポート情報の表示
ユーザーガイドのリンク提供

構文

add_action('woocommerce_checkout_before_customer_details', 'your_function_name');

function your_function_name() {
    // あなたのコード
}

パラメータ

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

戻り値

このアクションは戻り値を持たず、直接的に出力を行います。

使用可能なバージョン

WooCommerce バージョン：3.0以上
WordPress バージョン：4.0以上

サンプルコード

サンプル1: カスタムフィールドの追加

このサンプルでは、チェックアウトページに電話番号の入力フィールドを追加しています。

add_action('woocommerce_checkout_before_customer_details', 'add_custom_phone_field');

function add_custom_phone_field() {
    echo '<h3>' . __('Additional Information') . '</h3>';
    woocommerce_form_field('billing_phone_custom', array(
        'type' => 'tel',
        'class' => array('my-field-class form-row-wide'),
        'label' => __('Custom Phone Number'),
        'placeholder' => __('Enter your phone number'),
        ), '');
}

引用元: https://www.businessbloomer.com/

サンプル2: プロモーションメッセージの表示

このサンプルは、顧客に特別オファーを表示するためのものです。

add_action('woocommerce_checkout_before_customer_details', 'display_offer_message');

function display_offer_message() {
    echo '<div class="offer-message"><p>' . __('Special Offer: Get 20% off your next order!') . '</p></div>';
}

引用元: https://woocommerce.com/

サンプル3: アップセル商品の提案

チェックアウト時におすすめ商品を表示します。

add_action('woocommerce_checkout_before_customer_details', 'suggest_upsell_products');

function suggest_upsell_products() {
    echo '<div class="upsell-products"><h3>' . __('You may also like') . '</h3>';
    // 商品表示コード - ダミーデータ
    echo '<p>Product 1, Product 2, Product 3</p>';
    echo '</div>';
}

引用元: https://docs.woocommerce.com/

サンプル4: FAQのセクションを追加

このサンプルでは、FAQ情報を表示します。

add_action('woocommerce_checkout_before_customer_details', 'add_faq_section');

function add_faq_section() {
    echo '<h3>' . __('Frequently Asked Questions') . '</h3>';
    echo '<p>' . __('Here you can add FAQs related to checkout.') . '</p>';
}

引用元: https://www.wpbeginner.com/

サンプル5: ユーザーガイドへのリンク

チェックアウト時にユーザーガイドへのリンクを追加します。

add_action('woocommerce_checkout_before_customer_details', 'add_user_guide_link');

function add_user_guide_link() {
    echo '<p>' . __('Need help? Read our user guide <a href="#">here</a>.') . '</p>';
}

引用元: https://www.smashingmagazine.com/

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

アクション名	使用可能性
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

概要

構文