概要
woocommerce_before_shop_loopは、WooCommerceでのショップページのループが始まる前に実行されるフックです。このアクションは、製品の一覧表示を制御する際に非常に役立ちます。以下は、このアクションがよく使用される機能のいくつかです。
- 商品一覧のカスタムメッセージを追加
- フィルターやソートオプションを表示
- 特定のカテゴリーのバナーを表示
- レイアウト設定の追加
- 特別なプロモーション情報を掲載
- ユーザーインターフェースの要素を調整
構文
add_action( 'woocommerce_before_shop_loop', 'your_function_name' );
パラメータ
特にパラメータはありませんが、このアクションは、引数を取る関数を呼び出します。
戻り値
特に戻り値はありませんが、アクションの結果としてHTMLの一部が出力されることになります。
使用可能なプラグインWooCommerceのバージョン
このアクションは、WooCommerce 2.0以降のすべてのバージョンで使用可能です。
使用可能なワードプレスのバージョン
このアクションは、WordPress 4.0以降のすべてのバージョンで使用可能です。
サンプルコード
サンプルコード1: カスタムメッセージの追加
このサンプルコードは、ショップループの前にカスタムメッセージを表示します。
add_action( 'woocommerce_before_shop_loop', 'add_custom_message' );
function add_custom_message() {
echo '<div class="custom-message">ようこそ！特別オファーをお見逃しなく！</div>';
}
引用元: https://docs.woocommerce.com
サンプルコード2: カスタムフィルターの表示
このサンプルコードは、ショップページにカスタムフィルターを追加します。
add_action( 'woocommerce_before_shop_loop', 'add_custom_filter' );
function add_custom_filter() {
?>
<div class="custom-filter">
<h3>フィルター</h3>
<select>
<option>全てのカテゴリ</option>
<option>カテゴリ1</option>
<option>カテゴリ2</option>
</select>
</div>
<?php
}
引用元: https://docs.woocommerce.com
サンプルコード3: セール情報の表示
このサンプルコードは、ショップループの前にセール情報を表示します。
add_action( 'woocommerce_before_shop_loop', 'display_sale_info' );
function display_sale_info() {
echo '<div class="sale-info">全商品、今すぐ10%オフ！</div>';
}
引用元: https://docs.woocommerce.com
サンプルコード4: バナーディスプレイ
このサンプルコードでは、特定のカテゴリーのバナーを表示します。
add_action( 'woocommerce_before_shop_loop', 'show_category_banner' );
function show_category_banner() {
echo '<div class="category-banner"><img src="banner.jpg" alt="特別オファー"></div>';
}
引用元: https://docs.woocommerce.com
サンプルコード5: レイアウト調整
このサンプルコードは、ショップのレイアウトを調整します。
add_action( 'woocommerce_before_shop_loop', 'adjust_shop_layout' );
function adjust_shop_layout() {
echo '<div class="layout-adjust"><h2>新着商品</h2></div>';
}
引用元: https://docs.woocommerce.com
この関数のアクションでの使用可能性
| アクション名 | 使用例 |
|---|---|
| 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 |