プラグインWooCommerceのwoocommerce_product_get_imageフィルタの使用方法・解説

概要

woocommerce_product_get_imageフィルタは、WooCommerceの製品画像を取得する際に使用されるフックです。このフィルタを使用することで、製品画像の取得処理をカスタマイズすることができます。例えば特定の画像を別のものに置き換える、サムネイルサイズを変更する、または特定の条件に応じて表示内容を制御することが可能です。

このフィルタは、以下のような機能を実装する際によく使われます。

製品のデフォルト画像をカスタマイズする。
サムネイル画像のサイズを調整する。
商品が特定の条件に基づいて異なる画像を持つようにする。
商品画像の回りにカスタムHTMLを追加する。
商品画像のリンクを変更する。
外部の画像ソースから画像を取得する。

構文

apply_filters( 'woocommerce_product_get_image', $image, $product, $size, $attr );

パラメータ

$image (string): 現在の画像URL。
$product (WC_Product): 画像を関連付けるWooCommerceの製品オブジェクト。
$size (string): 取得する画像サイズ。サイズ名（例: ‘thumbnail’, ‘medium’, ‘large’）または配列形式で指定可能。
$attr (array): 画像に付加する属性を含む連想配列。

戻り値

(string): フィルタ後の画像URL。

使用可能なプラグインのバージョン

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_filter( 'woocommerce_product_get_image', 'custom_thumbnail_size', 10, 4 );

function custom_thumbnail_size( $image, $product, $size, $attr ) {
    return wp_get_attachment_image( $product->get_image_id(), 'custom-size', false, $attr );
}

このサンプルコードは、製品のサムネイル画像サイズを「custom-size」に変更します。これにより、デフォルトの画像サイズではなく、カスタムサイズの画像が表示されます。

サンプル2: 特定の商品に異なる画像を表示

add_filter( 'woocommerce_product_get_image', 'change_image_for_specific_product', 10, 4 );

function change_image_for_specific_product( $image, $product, $size, $attr ) {
    if ( $product->get_id() === 123 ) { // 商品IDが123の場合
        return 'https://example.com/path/to/custom-image.jpg';
    }
    return $image;
}

このコードでは、IDが123の製品の場合に特定の画像（https://example.com/path/to/custom-image.jpg）を表示するように変更します。

サンプル3: 属性を追加して画像を表示

add_filter( 'woocommerce_product_get_image', 'add_attributes_to_image', 10, 4 );

function add_attributes_to_image( $image, $product, $size, $attr ) {
    $attr['class'] = 'my-custom-class'; // カスタムクラスを追加
    $image = wp_get_attachment_image( $product->get_image_id(), $size, false, $attr );
    return $image;
}

このサンプルコードは、製品画像にカスタムクラスを追加します。これにより、独自のスタイルを適用できます。

サンプル4: 外部画像を使用する

add_filter( 'woocommerce_product_get_image', 'use_external_image', 10, 4 );

function use_external_image( $image, $product, $size, $attr ) {
    $external_image_url = get_post_meta( $product->get_id(), '_external_image_url', true );
    return ! empty( $external_image_url ) ? $external_image_url : $image;
}

このコードは、製品メタデータから外部画像のURLを取得し、それが存在する場合はそのURLを使用します。

サンプル5: 画像のラップ要素を追加

add_filter( 'woocommerce_product_get_image', 'wrap_image_in_div', 10, 4 );

function wrap_image_in_div( $image, $product, $size, $attr ) {
    return '<div class="image-wrapper">' . $image . '</div>';
}

このサンプルでは、製品画像をラップする<div>要素を追加します。これにより、CSSで簡単にスタイル変更やレイアウト調整が可能になります。

リファレンス情報は、WordPress CodexやWooCommerceの公式ドキュメントを参照してください。

概要

構文