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

概要

woocommerce_before_shop_loop_itemは、WooCommerceのプラグインで、商品の表示前に特定の内容を挿入するためのフックです。このアクションは、製品のリスト表示において、商品情報やカスタムコンテンツを追加する際に非常に有用です。使用される典型的なケースは以下の通りです。

商品画像の前にカスタムメッセージを表示する
特定の商品のバッジやタグを追加する
商品の評価やレビュー数を強調表示する
複数の商品の仕様を比較する小さなリンクを追加する
ソーシャルシェアリングボタンを追加する
クーポンやセール情報を強調するためのバナーを追加する

構文

do_action('woocommerce_before_shop_loop_item');

パラメータ

このアクションには特別なパラメータはありませんが、他のフックと同様に、カスタムコールバック関数を通じて様々な処理を追加できます。

戻り値

このアクションは、何も戻さない（void）形式です。

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

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_before_shop_loop_item', 'custom_message_before_product');

function custom_message_before_product() {
    echo '<p>新商品が入荷しました！</p>';
}

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

サンプル2: セールバッジを追加

このコードは、特定の商品の前にセールバッジを追加します。

add_action('woocommerce_before_shop_loop_item', 'add_sale_badge');

function add_sale_badge() {
    global $product;
    if ($product->is_on_sale()) {
        echo '<span class="sale-badge">SALE!</span>';
    }
}

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

サンプル3: 商品レビュー数の表示

このサンプルは、商品の評価とレビュー数を表示します。

add_action('woocommerce_before_shop_loop_item', 'display_product_reviews');

function display_product_reviews() {
    global $product;
    echo '<p>評価: ' . $product->get_average_rating() . ' (' . $product->get_review_count() . ' レビュー)</p>';
}

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

サンプル4: ソーシャルシェアリングボタンの追加

このコードは、商品の前にソーシャルシェアリングボタンを追加します。

add_action('woocommerce_before_shop_loop_item', 'add_social_sharing_buttons');

function add_social_sharing_buttons() {
    echo '<div class="social-sharing">
            <a href="#">Facebook</a>
            <a href="#">Twitter</a>
          </div>';
}

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

サンプル5: 特別オファーの通知

このサンプルでは、商品の前に特別オファーの通知を表示します。

add_action('woocommerce_before_shop_loop_item', 'add_special_offer_notification');

function add_special_offer_notification() {
    echo '<div class="special-offer">今週末限定！全品20%オフ</div>';
}

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

概要

構文