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

2025年2月22日 WooCommerce、プラグイン

概要

woocommerce_product_thumbnailsは、WooCommerce製品ページで製品サムネイルを表示する際に使用されるアクションフックです。このフックは、製品のサムネイル画像をカスタマイズしたり、追加の情報を表示させるのに役立ちます。以下に、woocommerce_product_thumbnailsがよく使用される機能を挙げます。

サムネイル画像のスタイルをカスタマイズ
サムネイルにカスタムクラスを追加
特定の条件に基づいてサムネイルを非表示にする
アニメーションやエフェクトを追加
サムネイルの上にオーバーレイを表示
サムネイルのクリック時にポップアップを表示

構文

add_action('woocommerce_product_thumbnails', 'your_custom_function');

パラメータ

特にパラメータは用意されていませんが、表示するサムネイルに対して処理を行うための任意の情報をレイアウト内で取得できます。

戻り値

戻り値は特になく、サムネイルを表示するために使用されるHTMLを生成します。

バージョン情報

WooCommerceバージョン: 3.0.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_product_thumbnails', 'add_custom_class_to_product_thumbnails');

function add_custom_class_to_product_thumbnails() {
    echo '<div class="custom-thumbnails">';
    // サムネイル表示処理
    echo '</div>';
}

引用元: https://developer.wordpress.org

サンプルコード2: サムネイルを非表示にする

特定の条件でサムネイルを非表示にするコードです。

add_action('woocommerce_product_thumbnails', 'hide_product_thumbnails');

function hide_product_thumbnails() {
    if (is_product() && !is_user_logged_in()) {
        return; // 非表示
    }
    // サムネイル表示処理
}

引用元: https://developer.wordpress.org

サンプルコード3: サムネイルにオーバーレイを追加する

サムネイルにテキストオーバーレイを追加する実装例です。

add_action('woocommerce_product_thumbnails', 'add_overlay_to_thumbnails');

function add_overlay_to_thumbnails() {
    echo '<div class="thumbnail-overlay">New Arrival</div>';
}

引用元: https://developer.wordpress.org

サンプルコード4: サムネイルにアニメーションを追加

サムネイルをホバーしたときにアニメーションを追加するコードです。

add_action('woocommerce_product_thumbnails', 'add_animation_to_thumbnails');

function add_animation_to_thumbnails() {
    echo '<div class="animated-thumbnail" style="transition: transform 0.2s;">';
    // サムネイル表示処理
    echo '</div>';
}

引用元: https://developer.wordpress.org

サンプルコード5: サムネイル画像をクリックしたときにポップアップを表示

ポップアップを表示するためのサムネイルクリックイベントの実装です。

add_action('woocommerce_product_thumbnails', 'onclick_popup_thumbnail');

function onclick_popup_thumbnail() {
    echo '<div class="popup-thumbnail" onclick="showPopup();">';
    // サムネイル表示処理
    echo '</div>';
}

引用元: https://developer.wordpress.org

この関数について質問するコメントをキャンセル