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

概要

woocommerce_after_order_notes は、WooCommerce のチェックアウトページにおいて、注文ノートの入力フィールドの後にフックを追加するために使用されます。このフックは、オンラインショップでの購入体験を向上させるために、カスタムフィールドや追加の情報を表示する際に役立ちます。以下は、このアクションがよく使われる機能の例です。

カスタムフィールドの追加
特別なメッセージの表示
割引コードの入力フィールドの追加
アンケートやフィードバックのフィールドを追加
追加オプションの選択肢を提供
ユーザーに必要な注意事項を表示

利用可能なプラグイン: WooCommerce 3.0以上
WordPress バージョン: 4.0以上

構文

add_action('woocommerce_after_order_notes', 'your_function_name');

function your_function_name($checkout) {
    // コードをここに記述
}

パラメータ

$checkout: WC_Checkout クラスのインスタンスです。これを使用することで、チェックアウトに関する情報にアクセスできます。

戻り値

このアクションフックは、特に戻り値を返すことはありません。主に表示目的で使用されます。

サンプルコード

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

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

add_action('woocommerce_after_order_notes', 'custom_checkout_field');

function custom_checkout_field($checkout) {
    echo '<div id="custom_checkout_field"><h2>' . __('Additional Information') . '</h2>';

    woocommerce_form_field('additional_info', array(
        'type'          => 'textarea',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Tell us more about your order'),
        'placeholder'   => __('Notes about your order, e.g. special requests'),
    ), $checkout->get_value('additional_info'));

    echo '</div>';
}

出典: WooCommerce公式ドキュメント（例）

サンプルコード 2: 通知メッセージの表示

ユーザーに特別なメッセージを表示する例です。

add_action('woocommerce_after_order_notes', 'custom_message_after_order_notes');

function custom_message_after_order_notes() {
    echo '<div class="custom-message"><p>お買い上げありがとうございます！特別割引コード: SAVE10</p></div>';
}

出典: WooCommerce公式フォーラム

サンプルコード 3: 複数のチェックボックスを追加

複数のオプションを選択できるチェックボックスを追加する例です。

add_action('woocommerce_after_order_notes', 'custom_checkbox_options');

function custom_checkbox_options() {
    echo '<h3>' . __('Options') . '</h3>';

    woocommerce_form_field('option1', array(
        'type' => 'checkbox',
        'class' => array('option1-class'),
        'label' => __('オプション 1')
    ));

    woocommerce_form_field('option2', array(
        'type' => 'checkbox',
        'class' => array('option2-class'),
        'label' => __('オプション 2')
    ));
}

出典: WooCommerceカスタマイズガイド

サンプルコード 4: カスタムセレクトボックスの追加

カスタムの選択肢を提供するセレクトボックスを追加する例です。

add_action('woocommerce_after_order_notes', 'custom_select_box');

function custom_select_box($checkout) {
    echo '<h3>' . __('Delivery Preference') . '</h3>';

    woocommerce_form_field('delivery_preference', array(
        'type'          => 'select',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Choose your delivery preference'),
        'options'       => array(
            '' => __('Select an option', 'woocommerce'),
            'express' => __('Express Shipping', 'woocommerce'),
            'standard' => __('Standard Shipping', 'woocommerce')
        )
    ), $checkout->get_value('delivery_preference'));
}

出典: WooCommerceコミュニティフォーラム

サンプルコード 5: アンケートフィールドの追加

チェックアウト時にアンケートフィールドを追加する例です。

add_action('woocommerce_after_order_notes', 'custom_survey_checkbox');

function custom_survey_checkbox($checkout) {
    echo '<h2>' . __('Customer Feedback') . '</h2>';

    woocommerce_form_field('feedback_survey', array(
        'type'          => 'checkbox',
        'class'         => array('survey-field-class form-row-wide'),
        'label'         => __('Would you like to participate in our survey?'),
    ), $checkout->get_value('feedback_survey'));
}

出典: 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

この表において、woocommerce_after_order_notes アクションは WooCommerce のチェックアウトページに特化したものであり、他のアクションフックでは使用されません。

概要

構文