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

概要

woocommerce_before_template_part アクションは、WooCommerceのテンプレートパートが読み込まれる直前に実行されるフックです。このアクションは、特定のテンプレートパートにおいてカスタマイズを加えたり、追加の機能を実装したりする際によく使用されます。主に以下のような機能を実装する際に役立ちます。

テンプレートパートのデザイン変更
特定のデータの表示（例：カスタムフィールドの情報）
追加のスタイルやスクリプトの読み込み
特定の条件に基づいたカスタムコンテンツの挿入
トラッキングや分析ツールの埋め込み
カスタムアクションやフィルターフックの設定

このアクションは、WooCommerceのバージョンを問わず、WordPressのバージョン4.0以上で使用可能です。

構文

do_action('woocommerce_before_template_part', $slug, $name, $args);

パラメータ

$slug (string): テンプレート部分の名前のスラッグ。
$name (string): テンプレート部分の名前（オプション）。
$args (array): テンプレートに渡す引数（オプション）。

戻り値

特に戻り値はありません。

使用例

以下に、woocommerce_before_template_part アクションを使用したサンプルコードをいくつか示します。

サンプルコード1: カスタムメッセージの表示

add_action('woocommerce_before_template_part', 'custom_message_before_template_part', 10, 3);
function custom_message_before_template_part($slug, $name, $args) {
    if ($slug === 'content' && $name === 'product') {
        echo '<p>特別な商品をご覧ください！</p>';
    }
}
// 参考: https://woocommerce.com/document/introduction-to-hooks/

このサンプルコードは、content-product テンプレートパートの前に特別なメッセージを表示します。

サンプルコード2: スクリプトの読み込み

add_action('woocommerce_before_template_part', 'load_custom_script', 10, 3);
function load_custom_script($slug, $name, $args) {
    if ($slug === 'content' && $name === 'checkout') {
        echo '<script src="path/to/custom-script.js"></script>';
    }
}
// 参考: https://developer.wordpress.org/reference/functions/do_action/

このサンプルコードは、content-checkout テンプレートパートに関連するカスタムスクリプトを読み込みます。

サンプルコード3: カスタムスタイルの追加

add_action('woocommerce_before_template_part', 'add_custom_styles', 10, 3);
function add_custom_styles($slug, $name, $args) {
    if ($slug === 'content' && $name === 'product') {
        echo '<style>.custom-class { color: red; }</style>';
    }
}
// 参考: https://wpdocs.osdn.jp/WordPressを使用する

このサンプルコードは、製品テンプレートパートの前にカスタムスタイルを追加します。

サンプルコード4: カウントダウンタイマーの表示

add_action('woocommerce_before_template_part', 'show_countdown_timer', 10, 3);
function show_countdown_timer($slug, $name, $args) {
    if ($slug === 'content' && $name === 'product') {
        echo '<div class="countdown-timer">あと3日で終了！</div>';
    }
}
// 参考: https://www.wpbeginner.com/

このサンプルコードは、製品テンプレートパートにカウントダウンタイマーを表示します。

サンプルコード5: クーポンの表示

add_action('woocommerce_before_template_part', 'display_coupon_code', 10, 3);
function display_coupon_code($slug, $name, $args) {
    if ($slug === 'content' && $name === 'product') {
        echo '<p>クーポンコード: SAVE20 で20%割引！</p>';
    }
}
// 参考: https://www.wpexplorer.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

この表は、woocommerce_before_template_part アクションが、他のアクションフックの中でどのように使用可能かを示しています。

概要

構文