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

概要

woocommerce_after_single_product_summaryは、WooCommerceの商品ページが表示された後にフックされるアクションです。このフックを使用することで、商品詳細表示の後にカスタム要素を追加することができます。一般的には、製品情報をさらに充実させるために使われます。具体的には、以下のような場合に使用されることが多いです。

関連商品セクションのカスタマイズ
商品のカスタムタブの追加
カスタムメッセージやプロモーションバナーの表示
おすすめ商品やサービスの提案
ソーシャルメディア共有ボタンの追加
購入後レビューのパートを強調表示

構文

add_action('woocommerce_after_single_product_summary', 'your_custom_function');

パラメータ

なし

戻り値

なし

WooCommerceバージョン

5.0以降

WordPressバージョン

5.0以降

サンプルコード

サンプルコード1: 関連商品セクションのカスタム表示

add_action('woocommerce_after_single_product_summary', 'display_custom_related_products', 10);
function display_custom_related_products() {
    echo '<div class="custom-related-products">';
    echo '<h2>おすすめ商品</h2>';
    // カスタム関連商品のコードをここに追加
    echo '</div>';
}

このサンプルコードは、商品ページの下部に「おすすめ商品」というタイトルのカスタム関連商品セクションを追加します。
引用元: https://developer.woocommerce.com/

サンプルコード2: プロモーションバナーの追加

add_action('woocommerce_after_single_product_summary', 'display_promotion_banner', 20);
function display_promotion_banner() {
    echo '<div class="promotion-banner">';
    echo '<p>今なら送料無料！</p>';
    echo '</div>';
}

このコードは、商品ページの下部にプロモーションバナーを追加して送料無料のメッセージを表示します。
引用元: https://www.wpexplorer.com/

サンプルコード3: カスタムメッセージの表示

add_action('woocommerce_after_single_product_summary', 'display_custom_message', 30);
function display_custom_message() {
    echo '<p class="custom-message">お友達を紹介して、次回の購入で10%オフ！</p>';
}

このサンプルは、商品の詳細にカスタムメッセージを追加して、紹介キャンペーンを案内します。
引用元: https://www.sitepoint.com/

サンプルコード4: リビューセクションの強調表示

add_action('woocommerce_after_single_product_summary', 'highlight_reviews', 40);
function highlight_reviews() {
    echo '<div class="highlight-reviews">';
    echo '<h3>レビューをご覧ください！</h3>';
    // レビュー情報をここに追加
    echo '</div>';
}

このコードは、商品ページの下部にレビューセクションの強調表示を作成します。
引用元: https://www.wplift.com/

サンプルコード5: ソーシャルメディア共有ボタンの追加

add_action('woocommerce_after_single_product_summary', 'add_social_media_buttons', 50);
function add_social_media_buttons() {
    echo '<div class="social-share">';
    echo '<h4>この商品を共有する:</h4>';
    // ソーシャルメディアボタンのコードをここに追加
    echo '</div>';
}

このサンプルは、商品ページの下部にソーシャルメディアで共有するためのボタンを追加します。
引用元: 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

概要

構文