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

概要

woocommerce_checkout_before_order_reviewは、WooCommerceのチェックアウトページに表示される注文確認セクションの前にフックされるアクションです。このフックを使用することで、開発者は注文確認の前にカスタムコンテンツや機能を追加することができます。主に以下のような機能実装に利用されます：

カスタムフィールドの追加
特別なプロモーションやクーポンの表示
追加の情報や説明の提供
デザインのカスタマイズ
ユーザーの決定を促すメッセージの表示
追加のオプションやサービスの提案

構文

add_action('woocommerce_checkout_before_order_review', 'custom_function_name');

パラメータ

このアクションには、特定のパラメータはありませんので、コールバック関数は引数を受け取ることはできません。

戻り値

このアクションは何も返しません。

WooCommerceとWordPressのバージョン

WooCommerce: 5.0 以降
WordPress: 5.0 以降

サンプルコード

サンプルコード1: カスタムメッセージの追加

このサンプルコードでは、チェックアウトページの注文確認の前にカスタムメッセージを表示します。

add_action('woocommerce_checkout_before_order_review', 'display_custom_message_before_order_review');

function display_custom_message_before_order_review() {
    echo '<div class="custom-message">ご購入ありがとうございます！この後の手続きに進んでください。</div>';
}

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

このコードは、チェックアウトページにカスタムフィールドを追加します。

add_action('woocommerce_checkout_before_order_review', 'add_custom_checkout_field');

function add_custom_checkout_field() {
    woocommerce_form_field('custom_field', array(
        'type'          => 'text',
        'class'         => array('form-row-wide'),
        'label'         => __('カスタムフィールド'),
        'placeholder'   => __('ここに入力してください'),
    ), WC()->checkout->get_value('custom_field'));
}

サンプルコード3: プロモーションの表示

このサンプルコードでは、プロモーションを紹介するメッセージを表示します。

add_action('woocommerce_checkout_before_order_review', 'display_promotion_message');

function display_promotion_message() {
    echo '<div class="promotion-notice">今すぐ購入で10％オフのクーポンをゲット！</div>';
}

サンプルコード4: チェックボックスの追加

ここでは、オプトイン用のチェックボックスを注文確認前に追加します。

add_action('woocommerce_checkout_before_order_review', 'add_opt_in_checkbox');

function add_opt_in_checkbox() {
    echo '<div class="opt-in-checkbox"><input type="checkbox" id="newsletter_opt_in" name="newsletter_opt_in" value="yes" /> <label for="newsletter_opt_in">ニュースレターを購読する</label></div>';
}

サンプルコード5: CSSスタイルの追加

このコードは、チェックアウトページの前に特定のCSSスタイルを適用します。

add_action('woocommerce_checkout_before_order_review', 'add_custom_checkout_styles');

function add_custom_checkout_styles() {
    echo '<style>
            .custom-checkout-style {
                color: #f00;
                font-weight: bold;
            }
          </style>';
}

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

アクション	使用例
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

概要

構文