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

概要

woocommerce_shop_loopは、WooCommerceの商品リスト（商品ループ）の各アイテムを表示する際に呼び出されるアクションフックです。このフックは、WooCommerceのショップページや商品アーカイブにおいて、商品一覧をカスタマイズしたい場合に利用されます。主に以下のような機能を実装する際によく使われます。

商品情報の前後にカスタムHTMLを追加
商品ループ内でのカスタムスタイルの適用
特定の商品やカテゴリーに基づくフィルタリング
カスタムスクリプトやスタイルの挿入
商品表示の順序変更
商品リストへの追加情報の表示

構文

do_action( 'woocommerce_shop_loop' );

パラメータ

このアクションは、パラメータを持ちません。

戻り値

このアクションは、たんにフックを呼び出すだけなので、戻り値はありません。

使用可能なプラグイン及びバージョン

WooCommerce: すべてのバージョン
WordPress: すべてのバージョン

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

アクション	使用例
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', 'add_custom_text_before_products' );

function add_custom_text_before_products() {
    echo '<div class="custom-message">お得な商品が揃っています！</div>';
}

このコードは、商品ループの前にカスタムメッセージを表示します。

サンプル2: 商品ループの後に広告を追加

add_action( 'woocommerce_after_shop_loop', 'add_advertisement_after_products' );

function add_advertisement_after_products() {
    echo '<div class="advertisement">特別なオファー中！</div>';
}

このコードは、商品ループの後に広告を表示します。

サンプル3: 商品カード内の価格の前にカスタム内容を追加

add_action( 'woocommerce_after_shop_loop_item_title', 'add_custom_price_message' );

function add_custom_price_message() {
    echo '<p class="custom-notice">この商品は人気です！</p>';
}

このコードは、商品のタイトルの後にカスタムメッセージを表示します。

サンプル4: 商品ループ内の各商品のボタンを変更

add_action( 'woocommerce_after_shop_loop_item', 'change_add_to_cart_button' );

function change_add_to_cart_button() {
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' );
    echo '<a href="#" class="custom-button">カートに追加せずに購入</a>';
}

このコードは、商品ループの「カートに追加」ボタンをカスタムのボタンに置き換えます。

サンプル5: 商品ループの前にビジュアルコンテンツを追加

add_action( 'woocommerce_shop_loop', 'add_visual_content_before_products' );

function add_visual_content_before_products() {
    echo '<img src="your-image-url.jpg" alt="ビジュアルコンテンツ">';
}

このコードは、商品ループの前にビジュアルコンテンツ（画像）を表示します。

これらのサンプルコードはすべて著作権フリーであり、WooCommerceのカスタマイズに役立つ基本的な使い方を示しています。

概要

構文