プラグインWooCommerceのwoocommerce_cart_item_thumbnail関数の使用方法・解説

概要

woocommerce_cart_item_thumbnail 関数は、WooCommerce においてショッピングカート内のアイテムのサムネイル画像を表示するための関数です。この関数はオンラインストアやeコマースサイトでの商品の視覚的なプレゼンテーションに使用されます。特に、以下のような機能を実装する際によく使われます：

ショッピングカートの商品リスト表示
商品のプレビューを強調表示
自動的にサムネイルを取得・表示
商品情報と一緒に画像を表示するためのカスタマイズ
スマートフォンやタブレットに最適化されたデザイン
カート内でのビジュアルなフィードバック

構文

woocommerce_cart_item_thumbnail( $cart_item, $cart_item_key, $size = 'thumbnail' );

パラメータ

$cart_item (配列) : カートに入っている商品に関する情報を含む配列。
$cart_item_key (文字列) : カートアイテムを一意に識別するためのキー。
$size (文字列) : 表示する画像サイズ。デフォルトは ‘thumbnail’。

戻り値

サムネイル画像のHTMLコード。

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

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_cart_item_thumbnail', 'custom_cart_item_thumbnail', 10, 3 );

function custom_cart_item_thumbnail( $thumbnail, $cart_item, $cart_item_key ) {
    return '<div class="custom-thumbnail">' . $thumbnail . '</div>';
}

このサンプルコードは、WooCommerceのカート内のサムネイル画像をカスタムの <div> タグでラップします。デザインを容易にカスタマイズできるようにします。引用元: https://woocommerce.com

サンプルコード 2

add_filter( 'woocommerce_cart_item_thumbnail', 'replace_cart_item_thumbnail', 10, 3 );

function replace_cart_item_thumbnail( $thumbnail, $cart_item, $cart_item_key ) {
    $new_thumbnail = get_template_directory_uri() . '/images/placeholder.png';
    return '<img src="' . esc_url( $new_thumbnail ) . '" alt="Placeholder">';
}

このサンプルコードでは、カート内の商品のサムネイルを特定のプレースホルダー画像に置き換えています。引用元: https://woocommerce.com

サンプルコード 3

add_filter( 'woocommerce_cart_item_thumbnail', 'add_custom_class_to_thumbnail', 10, 3 );

function add_custom_class_to_thumbnail( $thumbnail, $cart_item, $cart_item_key ) {
    return str_replace( 'class="', 'class="my-custom-class ', $thumbnail );
}

このサンプルコードでは、カート内商品サムネイルのクラスにカスタムクラスを追加し、CSSスタイリングが可能になります。引用元: https://woocommerce.com

サンプルコード 4

add_filter( 'woocommerce_cart_item_thumbnail', 'show_thumbnail_with_link', 10, 3 );

function show_thumbnail_with_link( $thumbnail, $cart_item, $cart_item_key ) {
    $product_link = get_permalink( $cart_item['product_id'] );
    return '<a href="' . esc_url( $product_link ) . '">' . $thumbnail . '</a>';
}

このサンプルコードは、商品サムネイル画像をクリック可能なリンクにします。ユーザーはサムネイルをクリックすることで直接商品ページに移動できます。引用元: https://woocommerce.com

サンプルコード 5

add_filter( 'woocommerce_cart_item_thumbnail', 'add_alt_text_to_thumbnail', 10, 3 );

function add_alt_text_to_thumbnail( $thumbnail, $cart_item, $cart_item_key ) {
    $alt_text = esc_attr( get_the_title( $cart_item['product_id'] ) );
    return str_replace( '<img ', '<img alt="' . $alt_text . '" ', $thumbnail );
}

このサンプルコードでは、カート内のサムネイル画像に商品のタイトルを代替テキストとして追加します。アクセシビリティの向上に寄与します。引用元: https://woocommerce.com

概要

構文