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

概要

woocommerce_before_subcategory_titleは、WooCommerceでカテゴリのタイトルが表示される前に実行されるフックです。このアクションは、以下のような機能を実装する際によく使われます。

サブカテゴリのカスタムCSSクラスを追加する。
特定の条件に基づいてサブカテゴリの前にテキストを挿入する。
サブカテゴリのタイトルのスタイルを変更する。
アイコンやイメージをサブカテゴリのタイトルの前に追加する。
訪問者に対して特定のプロモーションメッセージを表示する。
サブカテゴリの出力にカスタムHTMLを追加する。

このアクションに関する構文は次の通りです。

do_action( 'woocommerce_before_subcategory_title', $category );

パラメータ

$category: サブカテゴリのオブジェクト（WC_Term）。

戻り値

このアクション自体は戻り値を持ちませんが、フックを利用して出力に変更を加えることができます。

使用可能なバージョン

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_subcategory_title', 'add_custom_css_class' );

function add_custom_css_class( $category ) {
    echo '<div class="custom-class">カスタムクラス</div>';
}

このサンプルコードは、各サブカテゴリのタイトルの前に「カスタムクラス」として指定された <div> 要素を追加します。

サンプルコード 2

add_action( 'woocommerce_before_subcategory_title', 'insert_promotional_message' );

function insert_promotional_message( $category ) {
    if ( $category->slug === 'sale' ) {
        echo '<p>セール中のカテゴリです！</p>';
    }
}

このコードは、特定のスラッグ（ここでは「sale」）を持つサブカテゴリのタイトルの前にプロモーションメッセージを表示します。

サンプルコード 3

add_action( 'woocommerce_before_subcategory_title', 'add_category_icon' );

function add_category_icon( $category ) {
    echo '<img src="path/to/icon.png" alt="' . esc_attr( $category->name ) . ' アイコン" />';
}

このサンプルでは、各サブカテゴリのタイトルの前にアイコン画像を追加します。

サンプルコード 4

add_action( 'woocommerce_before_subcategory_title', 'custom_output_before_subcategory_title' );

function custom_output_before_subcategory_title( $category ) {
    echo '<h2>' . esc_html( $category->name ) . ' - 特別オファー</h2>';
}

このコードは、サブカテゴリのタイトルの前に特別オファーの見出しを追加します。

サンプルコード 5

add_action( 'woocommerce_before_subcategory_title', 'style_subcategory_title' );

function style_subcategory_title( $category ) {
    echo '<style>.subcategory-title { color: red; }</style>';
}

このサンプルでは、サブカテゴリのタイトルの表示スタイルを変更するためのCSSを追加しています。

概要