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

概要

woocommerce_shop_loop_item_titleは、WooCommerceで商品リストの各アイテムのタイトルを表示するためのフックです。このアクションは、商品ループ内の各商品タイトル部分にカスタムコードを挿入する際によく使用されます。このフックを使用することによって、デフォルトのタイトルの表示を変更したり、追加の情報を表示したりすることができます。

以下にwoocommerce_shop_loop_item_titleがよく使われる機能を挙げます：

商品タイトルの上にカスタムテキストを追加する。
タイトルのフォーマットを変更する（例：HTMLタグを追加）。
特定の条件に基づいてタイトルを変更する（例えば、特定のカテゴリに属する商品）。
タイトルの前後にバッジを表示する。
タイトルに商品評価や在庫状況を追加する。
タイトルをクリックできるリンクに変更する。

構文

do_action( 'woocommerce_shop_loop_item_title' );

パラメータ

このアクションには引数はありません。

戻り値

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

使用可能なWooCommerceおよびWordPressバージョン

WooCommerce: 4.0以上（バージョンによっては異なる場合があります）
WordPress: 5.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_shop_loop_item_title', 'custom_add_text_before_title', 5 );

function custom_add_text_before_title() {
    echo '<span class="custom-text">新商品</span>';
}

このコードは、商品のタイトルの前に「新商品」というテキストを追加します。

サンプルコード2

add_action( 'woocommerce_shop_loop_item_title', 'custom_format_title', 10 );

function custom_format_title() {
    global $product;
    echo '<h2 class="custom-title">' . $product->get_name() . '</h2>';
}

このコードは、商品名を

h2>タグで囲んで表示します。

サンプルコード3

add_action( 'woocommerce_shop_loop_item_title', 'conditional_title_change', 15 );

function conditional_title_change() {
    global $product;
    if ( has_term( '特定カテゴリ', 'product_cat', $product->get_id() ) ) {
        echo '<h3>特別な商品: ' . esc_html( $product->get_name() ) . '</h3>';
    } else {
        echo '<h2>' . esc_html( $product->get_name() ) . '</h2>';
    }
}

このコードは、特定のカテゴリに属する商品名を異なる形式で表示します。

サンプルコード4

add_action( 'woocommerce_shop_loop_item_title', 'add_product_rating_to_title', 20 );

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

このコードは、商品の平均評価をタイトルの下に表示します。

サンプルコード5

add_action( 'woocommerce_shop_loop_item_title', 'display_stock_status', 25 );

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

このコードは、商品の在庫状況をタイトルの近くに表示します。

概要

構文