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

概要

woocommerce_order_item_thumbnail 関数は、WooCommerce プラグインにおいて特定の商品のサムネイル（画像）を表示するために使用されます。この関数は、カート、注文、または商品リストなどのページで商品画像を表示する際によく利用されます。具体的には以下のような機能を実装する際によく使われます。

1. カートページにおける商品のサムネイル表示
2. 注文確認ページでの購入商品表示
3. 購入履歴ページでのサムネイル表示
4. 商品ウィジェットでのサムネイル表示
5. 商品リストやアーカイブページでのサムネイル表示
6. カスタムテンプレートやショートコードでの画像表示

構文

woocommerce_order_item_thumbnail( $item_id, $size, $icon );

パラメータ

• $item_id (int) – 表示するアイテムの ID。
• $size (string) – サムネイルのサイズ。デフォルトは ‘thumbnail’。
• $icon (bool) – アイコン表示の有無。デフォルトは false。

戻り値

• 画像の HTML タグを含む文字列。

バージョン情報

• WooCommerce バージョン: 4.0.0 以上
• WordPress バージョン: 5.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: サムネイルの表示

このサンプルコードは、カート内の商品をループ処理し、各商品のサムネイルを表示するものです。

foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
    $product = $cart_item['data'];
    echo woocommerce_order_item_thumbnail( $cart_item_key, 'thumbnail' );
}

出典: https://woocommerce.com

サンプルコード 2: 注文リストでのサムネイル表示

このコードは、顧客が過去に行った注文のそれぞれのアイテムに対してサムネイルを表示するものです。

$order = wc_get_order( $order_id );
foreach ( $order->get_items() as $item_id => $item ) {
    echo woocommerce_order_item_thumbnail( $item_id );
}

出典: https://woocommerce.com

サンプルコード 3: カスタムテンプレートでの商品画像表示

このサンプルは、カスタムテンプレート内で特定の商品の画像を表示するためのコードです。

$product_id = 123; // 商品IDを指定
echo woocommerce_order_item_thumbnail( $product_id );

出典: https://woocommerce.com

サンプルコード 4: 商品ウィジェットでのサムネイル表示

このコードは商品のウィジェットにサムネイルを追加するサンプルです。

add_action('widgets_init', function() {
    register_widget('Custom_Product_Widget');

    class Custom_Product_Widget extends WP_Widget {
        public function __construct() {
            parent::__construct('custom_product_widget', 'Custom Product Widget');
        }

        public function widget($args, $instance) {
            echo woocommerce_order_item_thumbnail( $instance['product_id'] );
        }
    }
});

出典: https://woocommerce.com

サンプルコード 5: ショートコードでの画像表示

このサンプルコードは、特定の商品IDに基づいてワードプレスのショートコードを使って画像を表示する例です。

add_shortcode('custom_product_thumbnail', 'custom_product_thumbnail_func');
function custom_product_thumbnail_func($atts) {
    $atts = shortcode_atts(array('id' => '0'), $atts);
    return woocommerce_order_item_thumbnail($atts['id']);
}

出典: https://woocommerce.com