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

概要

woocommerce_edit_account_form_endは、WooCommerceの「アカウント情報編集」フォームの最後にフックがかけられるアクションです。このアクションは、会員エリアのカスタマイズや機能追加を行う際に非常に役立ちます。具体的には、以下のような機能実装に使われることがよくあります。

1. カスタムフィールドの追加
2. フォームの下部に特定のメッセージや通知を表示
3. プライバシーポリシーへのリンクを追加
4. 特定の条件に基づいた情報の表示（例：特別オファー）
5. 新しい項目を保存するための追加処理の実行
6. ユーザーインターフェースの改善（CSSやJavaScriptの追加）

構文

do_action( 'woocommerce_edit_account_form_end' );

パラメータ

• なし

戻り値

• なし

使用可能なバージョン

• WooCommerce: バージョン4.0以上
• WordPress: バージョン5.0以上

サンプルコード

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

add_action( 'woocommerce_edit_account_form_end', 'add_custom_field_to_account' );

function add_custom_field_to_account() {
    echo '<p class="form-row form-row-wide">';
    echo '<label for="custom_field">' . __( 'Custom Field', 'woocommerce' ) . '</label>';
    echo '<input type="text" class="input-text" name="custom_field" id="custom_field" />';
    echo '</p>';
}

このコードは、アカウント編集フォームの最後にカスタムフィールドを追加します。

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

サンプル2: 特定の通知を表示する

add_action( 'woocommerce_edit_account_form_end', 'show_custom_message' );

function show_custom_message() {
    echo '<p style="color:red;">' . __( 'Please verify your email address.', 'woocommerce' ) . '</p>';
}

このコードは、アカウント編集フォームの最後に赤い色でメールアドレスの確認を促すメッセージを表示します。

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

サンプル3: 利用規約へのリンクを追加

add_action( 'woocommerce_edit_account_form_end', 'add_terms_link' );

function add_terms_link() {
    echo '<p>' . __( 'By updating your account, you agree to our ', 'woocommerce' ) . '<a href="' . get_permalink(get_option('woocommerce_terms_page_id')) . '">' . __( 'Terms of Service', 'woocommerce' ) . '</a>.</p>';
}

ユーザーがアカウントを更新する際に利用規約へのリンクを表示します。

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

サンプル4: JavaScriptを追加する

add_action( 'woocommerce_edit_account_form_end', 'add_custom_js' );

function add_custom_js() {
    echo '<script>console.log("Custom JavaScript executed.");</script>';
}

アカウント編集フォームの最後でカスタムJavaScriptを実行します。

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

サンプル5: CSSスタイルを追加する

add_action( 'woocommerce_edit_account_form_end', 'add_custom_style' );

function add_custom_style() {
    echo '<style>.custom-message { background: #f7f7f7; padding: 10px; }</style>';
    echo '<div class="custom-message">' . __( 'Thank you for keeping your information up to date!', 'woocommerce' ) . '</div>';
}

アカウント編集フォームの最後にカスタムスタイルのメッセージを追加します。

引用元: https://woocommerce.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