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

概要

woocommerce_after_shop_loop_itemは、WooCommerceのショップループの各アイテムの後にカスタムコンテンツを追加するためのフックです。このフックは、商品のカタログ表示のカスタマイズを行う際に非常に有用です。特によく使われる機能の例は以下の通りです。

商品のバッジを追加
商品のカスタムメタ情報の表示
商品のカスタムボタンの追加
商品の評価やレビュー数の表示
宣伝情報や特別オファーの追加
他の商品と関連性を表示するウィジェットの追加

構文

add_action( 'woocommerce_after_shop_loop_item', 'custom_function_name' );

パラメータ

custom_function_name: カスタム関数名。フックに連結される関数を指定します。

戻り値

このアクション自体は特定の戻り値を持ちません。フックに連結された関数の中でデータの出力や処理が行われます。

使用可能なバージョン

WooCommerceのバージョン: 2.1.0以降
WordPressのバージョン: 3.5以降

サンプルコード

サンプルコード 1

add_action( 'woocommerce_after_shop_loop_item', 'display_custom_badge' );

function display_custom_badge() {
    echo '<span class="custom-badge">New</span>';
}

このコードは、各商品アイテムの後に「New」というカスタムバッジを表示します。

サンプルコード 2

add_action( 'woocommerce_after_shop_loop_item', 'show_product_meta' );

function show_product_meta() {
    global $product;
    echo '<div class="product-meta">SKU: ' . $product->get_sku() . '</div>';
}

このコードは、SKU情報を各商品アイテムの後に表示します。

サンプルコード 3

add_action( 'woocommerce_after_shop_loop_item', 'add_custom_button' );

function add_custom_button() {
    echo '<a href="#" class="custom-button">Learn More</a>';
}

このコードは、各商品アイテムの後に「Learn More」ボタンを追加します。

サンプルコード 4

add_action( 'woocommerce_after_shop_loop_item', 'add_sale_notice' );

function add_sale_notice() {
    if ( is_product_category() ) {
        echo '<div class="sale-notice">Limited Time Offer</div>';
    }
}

このコードは、商品カテゴリーページでのみ「Limited Time Offer」というお知らせを表示します。

サンプルコード 5

add_action( 'woocommerce_after_shop_loop_item', 'related_products_widget' );

function related_products_widget() {
    echo '<div class="related-products">Check out related items!</div>';
}

このコードは、関連商品や推奨商品に関する情報を表示するウィジェットを追加します。

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

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

概要

構文