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

概要

woocommerce_after_shop_loop_item_titleは、WooCommerceの商品ループにおいて、商品のタイトルの後に特定のコンテンツを追加するためのフックです。このアクションを使用することで、商品ページでの表示を豊かにしたり、カスタマイズすることができます。よく使われる機能としては以下の6つがあります。

商品のレビューや評価を表示する
特別なオファーやセール情報を表示する
商品の在庫状況を表示する
商品のカスタムフィールドやメタデータを追加する
商品の価格を特別なフォーマットで表示する
ソーシャルメディアボタンを追加する

構文

add_action( 'woocommerce_after_shop_loop_item_title', 'your_function_name', 10 );

パラメータ

your_function_name: 追加したいコンテンツを出力する関数名
10: 優先度（1から10までの整数で、低い値が先に実行される）

戻り値

このアクションは特に戻り値を持たず、サイドエフェクトとしてHTMLを出力します。

対応バージョン

WooCommerceバージョン: 3.0以上
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_after_shop_loop_item_title', 'display_product_rating', 5 );

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

このサンプルコードは、商品のタイトルの後に商品の平均評価を表示します。使用することで、商品の魅力を高めます。

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

サンプルコード2

add_action( 'woocommerce_after_shop_loop_item_title', 'display_special_offer', 15 );

function display_special_offer() {
    echo '<p class="special-offer">今なら特別価格!</p>';
}

こちらのコードは、商品タイトルの後に特別オファーを表示します。プロモーションを強調するために便利です。

引用元: https://www.wpbeginner.com/wp-hook/

サンプルコード3

add_action( 'woocommerce_after_shop_loop_item_title', 'display_stock_status', 20 );

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

この例では、商品の在庫状況を表示します。顧客の購買判断を助けるために使用されます。

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

サンプルコード4

add_action( 'woocommerce_after_shop_loop_item_title', 'display_custom_field', 25 );

function display_custom_field() {
    global $post;
    $custom_field_value = get_post_meta( $post->ID, 'custom_field_key', true );
    if ( ! empty( $custom_field_value ) ) {
        echo '<div class="custom-field">' . esc_html( $custom_field_value ) . '</div>';
    }
}

このコードは、カスタムフィールドに格納された情報を商品タイトルの後に表示します。特別な情報を提供するために使われます。

引用元: https://www.smashingmagazine.com/

サンプルコード5

add_action( 'woocommerce_after_shop_loop_item_title', 'display_social_share_buttons', 30 );

function display_social_share_buttons() {
    echo '<div class="social-share-buttons">
            <a href="#">Facebookでシェア</a>
            <a href="#">Twitterでシェア</a>
          </div>';
}

このサンプルでは、商品タイトルの後にソーシャルメディアシェアボタンを表示します。ブログやビジネスの宣伝を助けます。

引用元: https://www.sitepoint.com/

概要

構文