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

概要

woocommerce_display_item_metaフィルタは、WooCommerceのカートや商品詳細ページにおける商品メタ情報を表示する際に使用されるフックです。このフィルタを使用すると、商品メタ情報のカスタマイズや追加を行うことができます。具体的には、以下のような機能を実装する際に役立ちます。

商品のカスタムフィールドを表示する
商品の属性をカスタマイズする
メタ情報の表示順序を変更する
メタ情報に追加情報を付加する
特定の条件に基づいて情報を表示非表示にする
商品のバリエーション情報を拡張する

構文

add_filter('woocommerce_display_item_meta', 'your_function_name', 10, 3);

パラメータ

string $item_meta：表示される商品メタ情報のHTML。
object $item：商品オブジェクト。
array $args：オプションの引数配列。

戻り値

string：フィルタ処理後のメタ情報HTML。

使用可能なバージョン

WooCommerceのバージョン：全てのバージョンで使用可能。
WordPressのバージョン：全てのバージョンで使用可能。

この関数のアクションでの使用可能性

アクション	使用可能
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_display_item_meta', 'add_manufacturer_meta', 10, 3);
function add_manufacturer_meta($item_meta, $item, $args) {
    $manufacturer = get_post_meta($item->get_product_id(), '_manufacturer', true);
    if ($manufacturer) {
        $item_meta .= '<span class="manufacturer">製造会社: ' . esc_html($manufacturer) . '</span>';
    }
    return $item_meta;
}

引用元: https://developer.woocommerce.com/

サンプル2: 属性の表示順序の変更

このサンプルでは、商品の属性が異なる順序で表示されるように変更します。

add_filter('woocommerce_display_item_meta', 'custom_attribute_order', 10, 3);
function custom_attribute_order($item_meta, $item, $args) {
    // 取得した属性を配列に
    $attributes = $item->get_product()->get_attributes();
    // 属性の順序をカスタマイズ
    $attributes = array_reverse($attributes);
    // 新しい順序で表示
    foreach($attributes as $attribute) {
        $item_meta .= '<span class="attribute">' . esc_html($attribute->get_name()) . ': ' . esc_html($attribute->get_options()[0]) . '</span>';
    }
    return $item_meta;
}

引用元: https://woocommerce.com

サンプル3: 条件によるメタ情報の非表示

特定条件を満たす場合に、商品メタ情報を非表示にする例です。

add_filter('woocommerce_display_item_meta', 'conditional_meta_display', 10, 3);
function conditional_meta_display($item_meta, $item, $args) {
    if ($item->get_product_id() == 123) { // 商品IDが123の場合
        return ''; // メタ情報を表示しない
    }
    return $item_meta;
}

引用元: https://www.wpbeginner.com/

サンプル4: バリアント情報の拡張

このコードは、商品のバリエーション情報を商品メタ情報に追加します。

add_filter('woocommerce_display_item_meta', 'add_variation_meta', 10, 3);
function add_variation_meta($item_meta, $item, $args) {
    $variation_attributes = $item->get_product()->get_variation_attributes();
    foreach ($variation_attributes as $attribute => $value) {
        $item_meta .= '<span class="variation">' . esc_html(ucfirst($attribute)) . ': ' . esc_html(implode(', ', $value)) . '</span>';
    }
    return $item_meta;
}

引用元: https://torontocustomwebsite.com

サンプル5: メタ情報の装飾

このサンプルは、商品メタ情報にカスタムCSSクラスを追加する例です。

add_filter('woocommerce_display_item_meta', 'style_item_meta', 10, 3);
function style_item_meta($item_meta, $item, $args) {
    return '<div class="custom-style">' . $item_meta . '</div>';
}

引用元: https://www.wpexplorer.com/

これらのサンプルコードを参考に、woocommerce_display_item_metaフィルタを活用して独自のカスタマイズを行ってください。

概要

構文