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

概要

woocommerce_single_product_summary アクションは、WooCommerceの単一商品の概要情報を表示する際に使用されるフックです。このアクションは、商品のタイトル、価格、説明、評価、およびカスタム要素を追加するための便利なポイントを提供します。以下のような機能を実装する際によく使われます。

商品タイトルのカスタマイズ
商品説明の追加表示
カスタムボタンやリンクの挿入
商品の評価やレビューセクションの調整
メタ情報（在庫状況など）の表示
追加キャンペーン情報の表示

構文

add_action('woocommerce_single_product_summary', 'function_name', priority);

パラメータ

function_name: 実行する関数の名前。
priority: アクションの実行順序を指定する数値（省略可能、デフォルトは10）。

戻り値

このアクションは、何も戻り値を返しませんが、指定した関数に基づいて出力を行います。

使用可能なプラグインWooCommerceのバージョン

WooCommerceバージョン 2.1 以降で使用可能です。

使用可能なワードプレスのバージョン

WordPressバージョン 4.0 以降で使用可能です。

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

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

サンプルコード

サンプル1: 商品タイトルの追加情報を表示

add_action( 'woocommerce_single_product_summary', 'add_custom_title_info', 6 );

function add_custom_title_info() {
    echo '<p class="custom-info">特別なプロモーション中！</p>';
}

このサンプルコードは、商品ページのタイトルの前に特別なプロモーション情報を表示します。

サンプル2: カスタムボタンの追加

add_action( 'woocommerce_single_product_summary', 'add_custom_button', 30 );

function add_custom_button() {
    echo '<a href="#" class="button custom-button">特別オファーを確認</a>';
}

このコードは、商品情報の下にカスタムボタンを追加します。

サンプル3: 商品説明のカスタム表示

add_action( 'woocommerce_single_product_summary', 'custom_product_description', 20 );

function custom_product_description() {
    global $product;
    echo '<div class="custom-description">' . wp_kses_post( $product->get_description() ) . '</div>';
}

ここでは、商品の説明をカスタムスタイルで表示するためのサンプルコードです。

サンプル4: メタ情報の表示

add_action( 'woocommerce_single_product_summary', 'show_stock_status', 25 );

function show_stock_status() {
    global $product;
    if ( $product->is_in_stock() ) {
        echo '<p class="stock in-stock">在庫あり</p>';
    } else {
        echo '<p class="stock out-of-stock">在庫なし</p>';
    }
}

このコードは、商品が在庫ありまたは在庫なしかを表示します。

サンプル5: 商品評価のカスタム表示

add_action( 'woocommerce_single_product_summary', 'custom_product_reviews', 15 );

function custom_product_reviews() {
    global $product;
    echo '<div class="custom-reviews">' . wc_get_rating_html( $product->get_average_rating() ) . '</div>';
}

このサンプルでは、商品評価をカスタムのHTMLで表示します。

【引用元】
– WordPress Developer Reference
– WooCommerce Documentation

概要

構文