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

概要

woocommerce_after_shop_loop は、WooCommerce のショップループの後にアクションをフックするためのものです。このアクションは商品一覧ページにおいて、主に以下のような機能を実装する際によく使用されます：

商品一覧の後にカスタムコンテンツを追加する。
特別オファーやプロモーション情報を表示する。
ソーシャルメディアの共有ボタンを追加する。
追加のナビゲーションリンクやカテゴリーリストを提供する。
ユーザーに選択できるフィルタやオプションを表示する。
商品リストのスタイリングをカスタマイズする。

構文

do_action('woocommerce_after_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_after_shop_loop', 'add_custom_message');

function add_custom_message() {
    echo '<div class="custom-message"><p>特別オファー：今だけ10％オフ!</p></div>';
}

引用元: https://www.example.com/sample1

サンプル2: フィルターオプションの追加

このコードは、商品一覧の後にフィルターオプションを追加します。

add_action('woocommerce_after_shop_loop', 'add_filter_options');

function add_filter_options() {
    echo '<div class="filter-options"><label>フィルタ:</label> <select><option>オプション1</option><option>オプション2</option></select></div>';
}

引用元: https://www.example.com/sample2

サンプル3: ソーシャルメディアボタンの追加

このコードは、商品一覧の後にソーシャルメディア共有ボタンを追加します。

add_action('woocommerce_after_shop_loop', 'add_social_share_buttons');

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

引用元: https://www.example.com/sample3

サンプル4: カテゴリーリンクの表示

このコードは、商品一覧の後に商品カテゴリーへのリンクを表示します。

add_action('woocommerce_after_shop_loop', 'display_category_links');

function display_category_links() {
    echo '<div class="category-links"><p><a href="#category1">カテゴリー1</a> | <a href="#category2">カテゴリー2</a></p></div>';
}

引用元: https://www.example.com/sample4

サンプル5: 商品リストのスタイリング追加

このコードは、商品リストの後にカスタムスタイルシートを読み込みます。

add_action('woocommerce_after_shop_loop', 'add_custom_styles');

function add_custom_styles() {
    echo '<style>.woocommerce ul.products li.product { border: 1px solid #ccc; }</style>';
}

引用元: https://www.example.com/sample5

概要

構文