cart-line-items

Posted2026年1月19日

Updated2026年1月19日

Byadmin_artws

カートの項目

以下のカート項目フィルターが利用可能です：

cartItemClass
cartItemPrice
itemName
saleBadgePriceFormat
showRemoveItemLink
subtotalPriceFormat

以下のオブジェクトはフィルター間で共有される：

カートオブジェクト
カートアイテムオブジェクト

以下のスクリーンショットは、個々のフィルターがどの部分に影響するかを示しています：

Cart Line Items

`cartItemClass`

説明

cartItemClass フィルタはカートアイテムのクラスを変更することができます。

パラメーター

defaultValue object (デフォルト: '') – デフォルトのカートアイテムクラス。
extensions object (default: {}) – 拡張オブジェクト。
args object – 以下のキーを持つ引数オブジェクト：
- cart object – wc/store/cart のカートオブジェクト。
- cartItem object – wc/store/cart のカート・アイテム・オブジェクト。
- context string (指定可能な値: cart または summary) – アイテムのコンテキスト。

リターン

string – 変更されたカートアイテムのクラス、または空の文字列。

コード例

基本例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyCartItemClass = ( defaultValue, extensions, args ) => {
    const isCartContext = args?.context === 'cart';

    if ( ! isCartContext ) {
        return defaultValue;
    }

    return 'my-custom-class';
};

registerCheckoutFilters( 'example-extension', {
    cartItemClass: modifyCartItemClass,
} );

高度な例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyCartItemClass = ( defaultValue, extensions, args ) => {
    const isCartContext = args?.context === 'cart';

    if ( ! isCartContext ) {
        return defaultValue;
    }

    if ( args?.cartItem?.name === 'Beanie with Logo' ) {
        return 'cool-class';
    }

    if ( args?.cartItem?.name === 'Sunglasses' ) {
        return 'hot-class';
    }

    return 'my-custom-class';
};

registerCheckoutFilters( 'example-extension', {
    cartItemClass: modifyCartItemClass,
} );

フィルターは組み合わせることもできます。例としてCombined filtersを参照してください。

スクリーンショット

| 前
|:———————————————————————:|:———————————————————————:|
| カート項目クラスフィルター適用前 | カート項目クラスフィルター適用後 |｜…

`cartItemPrice`

説明

cartItemPriceフィルタはカートアイテムの価格をフォーマットすることができます。

パラメーター

defaultValue string (デフォルト: <price/>) – デフォルトのカートアイテムの価格。
extensions object (default: {}) – 拡張オブジェクト。
args object – 以下のキーを持つ引数オブジェクト：
- cart object – wc/store/cart のカートオブジェクト。
- cartItem object – wc/store/cart のカート・アイテム・オブジェクト。
- context string (指定可能な値: cart または summary) – アイテムのコンテキスト。
validation boolean – 返り値が部分文字列 <price/> を含むかどうかを調べます。

リターン

string – 部分文字列<price/>を含む必要がある、カートアイテムの価格の変更フォーマット、または元の価格フォーマット。

コード例

基本例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyCartItemPrice = ( defaultValue, extensions, args, validation ) => {
    const isCartContext = args?.context === 'cart';

    if ( ! isCartContext ) {
        return defaultValue;
    }

    return '<price/> for all items';
};

registerCheckoutFilters( 'example-extension', {
    cartItemPrice: modifyCartItemPrice,
} );

高度な例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyCartItemPrice = ( defaultValue, extensions, args, validation ) => {
    const isCartContext = args?.context === 'cart';

    if ( ! isCartContext ) {
        return defaultValue;
    }

    if ( args?.cartItem?.name === 'Beanie with Logo' ) {
        return '<price/> to keep you warm';
    }

    if ( args?.cartItem?.name === 'Sunglasses' ) {
        return '<price/> to keep you cool';
    }

    return '<price/> for all items';
};

registerCheckoutFilters( 'example-extension', {
    cartItemPrice: modifyCartItemPrice,
} );

フィルターは組み合わせることもできます。例としてCombined filtersを参照してください。

スクリーンショット

| 前
|:———————————————————————:|:———————————————————————:|
| カート商品価格フィルター適用前 | カート商品価格フィルター適用後 |｜…

`itemName`

説明

itemNameフィルタはカートアイテム名を変更することができます。

パラメーター

defaultValue string – デフォルトのカートアイテム名。
extensions object (default: {}) – 拡張オブジェクト。
args object – 以下のキーを持つ引数オブジェクト：
- cart object – wc/store/cart のカートオブジェクト。
- cartItem object – wc/store/cart のカート・アイテム・オブジェクト。
- context string (指定可能な値: cart または summary) – アイテムのコンテキスト。

リターン

string – 変更前または変更後のカートアイテム名。

コード例

基本例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyItemName = ( defaultValue, extensions, args ) => {
    const isCartContext = args?.context === 'cart';

    if ( ! isCartContext ) {
        return defaultValue;
    }

    return `🪴 ${ defaultValue } 🪴`;
};

registerCheckoutFilters( 'example-extension', {
    itemName: modifyItemName,
} );

高度な例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyItemName = ( defaultValue, extensions, args ) => {
    const isCartContext = args?.context === 'cart';

    if ( ! isCartContext ) {
        return defaultValue;
    }

    if ( args?.cartItem?.name === 'Beanie with Logo' ) {
        return `⛷️ ${ defaultValue } ⛷️`;
    }

    if ( args?.cartItem?.name === 'Sunglasses' ) {
        return `🏄‍♂️ ${ defaultValue } 🏄‍♂️`;
    }

    return `🪴 ${ defaultValue } 🪴`;
};

registerCheckoutFilters( 'example-extension', {
    itemName: modifyItemName,
} );

フィルターは組み合わせることもできます。例としてCombined filtersを参照してください。

スクリーンショット

| 前
|:---------------------------------------------------------------------:|:---------------------------------------------------------------------:|
|項目名フィルター適用前 |!

`saleBadgePriceFormat`

説明

saleBadgePriceFormat フィルタは、カートアイテムのセールバッジ価格をフォーマットすることができます。

パラメーター

defaultValue string (デフォルト: <price/>) – デフォルトのカートアイテム販売バッジ価格。
extensions object (default: {}) – 拡張オブジェクト。
args object – 以下のキーを持つ引数オブジェクト：
- cart object – wc/store/cart のカートオブジェクト。
- cartItem object – wc/store/cart のカート・アイテム・オブジェクト。
- context string (指定可能な値: cart または summary) – アイテムのコンテキスト。
validation boolean – 返り値が部分文字列 <price/> を含むかどうかを調べます。

リターン

string – 部分文字列<price/>を含む必要がある、カートアイテムの販売バッジ価格の変更フォーマット、または元の価格フォーマット。

コード例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifySaleBadgePriceFormat = (
    defaultValue,
    extensions,
    args,
    validation
) => {
    const isCartContext = args?.context === 'cart';

    if ( ! isCartContext ) {
        return defaultValue;
    }

    return '<price/> per item';
};

registerCheckoutFilters( 'example-extension', {
    saleBadgePriceFormat: modifySaleBadgePriceFormat,
} );

高度な例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifySaleBadgePriceFormat = (
    defaultValue,
    extensions,
    args,
    validation
) => {
    const isCartContext = args?.context === 'cart';

    if ( ! isCartContext ) {
        return defaultValue;
    }

    if ( args?.cartItem?.name === 'Beanie with Logo' ) {
        return '<price/> per item while keeping warm';
    }

    if ( args?.cartItem?.name === 'Sunglasses' ) {
        return '<price/> per item while looking cool';
    }

    return '<price/> per item';
};

registerCheckoutFilters( 'example-extension', {
    saleBadgePriceFormat: modifySaleBadgePriceFormat,
} );

フィルターは組み合わせることもできます。例としてCombined filtersを参照してください。

スクリーンショット

[	前
セール・バッジ価格形式フィルター適用前](https://github.com/woocommerce/woocommerce-blocks/assets/3323310/d2aeb206-e620-44e0-93c1-31484cfcdca6)

`showRemoveItemLink`

説明

showRemoveItemLink は、カートアイテム削除リンクの表示/非表示に使用します。

パラメーター

defaultValue (type: boolean、 default: true) – 削除リンクのデフォルト値。
extensions object (default: {}) – 拡張オブジェクト。
args object – 以下のキーを持つ引数オブジェクト：
- cart object – wc/store/cart のカートオブジェクト。
- cartItem object – wc/store/cart のカート・アイテム・オブジェクト。
- context string (指定可能な値: cart または summary) – アイテムのコンテキスト。

リターン

boolean – カートアイテムの削除リンクを表示する場合は true 、そうでない場合は false 。

コード例

基本例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyShowRemoveItemLink = ( defaultValue, extensions, args ) => {
    const isCartContext = args?.context === 'cart';

    if ( ! isCartContext ) {
        return defaultValue;
    }

    return false;
};

registerCheckoutFilters( 'example-extension', {
    showRemoveItemLink: modifyShowRemoveItemLink,
} );

高度な例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyShowRemoveItemLink = ( defaultValue, extensions, args ) => {
    const isCartContext = args?.context === 'cart';

    if ( ! isCartContext ) {
        return defaultValue;
    }

    if ( args?.cartItem?.name === 'Beanie with Logo' ) {
        return false;
    }

    if ( args?.cartItem?.name === 'Sunglasses' ) {
        return false;
    }

    return true;
};

registerCheckoutFilters( 'example-extension', {
    showRemoveItemLink: modifyShowRemoveItemLink,
} );

フィルターは組み合わせることもできます。例としてCombined filtersを参照してください。

スクリーンショット

| 前
|:———————————————————————:|:———————————————————————:|
| Show Remove Item Link フィルタ適用前 | |｜｜｜Show Remove Item Link フィルタ適用後

`subtotalPriceFormat`

説明

subtotalPriceFormatフィルタはカートアイテムの小計価格をフォーマットすることができます。

パラメーター

defaultValue string (default: <price/>) – デフォルトのカートアイテムの小計価格。
extensions object (default: {}) – 拡張オブジェクト。
args object – 以下のキーを持つ引数オブジェクト：
- cart object – wc/store/cart のカートオブジェクト。
- cartItem object – wc/store/cart のカート・アイテム・オブジェクト。
- context string (指定可能な値: cart または summary) – アイテムのコンテキスト。
validation boolean – 返り値が部分文字列 <price/> を含むかどうかを調べます。

リターン

string – サブ文字列<price/>を含む必要がある、カートアイテムの小計価格の変更フォーマット、または元の価格フォーマット。

コード例

基本例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifySubtotalPriceFormat = (
    defaultValue,
    extensions,
    args,
    validation
) => {
    const isCartContext = args?.context === 'cart';

    if ( ! isCartContext ) {
        return defaultValue;
    }

    return '<price/> per item';
};

registerCheckoutFilters( 'example-extension', {
    subtotalPriceFormat: modifySubtotalPriceFormat,
} );

高度な例

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifySubtotalPriceFormat = (
    defaultValue,
    extensions,
    args,
    validation
) => {
    const isCartContext = args?.context === 'cart';

    if ( ! isCartContext ) {
        return defaultValue;
    }

    if ( args?.cartItem?.name === 'Beanie with Logo' ) {
        return '<price/> per warm beanie';
    }

    if ( args?.cartItem?.name === 'Sunglasses' ) {
        return '<price/> per cool sunglasses';
    }

    return '<price/> per item';
};

registerCheckoutFilters( 'example-extension', {
    subtotalPriceFormat: modifySubtotalPriceFormat,
} );

フィルターは組み合わせることもできます。例としてCombined filtersを参照してください。

スクリーンショット

| 前
|:———————————————————————:|:———————————————————————:|
| 小計価格フォーマットフィルター適用前 | 小計価格フォーマットフィルター適用後 |｜…

カートオブジェクト

上記のフィルターのCartオブジェクトは以下のキーを持つ：

billingAddress object – 以下のキーを持つ請求先住所オブジェクト：
- address_1 string – 住所の1行目。
- address_2 string – 住所の2行目。
- city string – 住所の都市。
- company string – 住所の会社。
- country string – 住所の国。
- email string – 住所のEメール。
- first_name string – 住所の姓。
- last_name string – 住所の姓。
- phone string – 住所の電話番号。
- postcode string – 住所の郵便番号。
- state string – 住所の都道府県。
~~billingData~~ object – billingAddress オブジェクトと同じキーを持つ請求データオブジェクト。
cartCoupons array – カートクーポンの配列。
cartErrors array – カートのエラー配列。
cartFees array – カート料金の配列。
cartHasCalculatedShipping boolean – カートが送料を計算しているかどうか。
cartIsLoading boolean – カートが読み込まれているかどうか。
cartItemErrors array – カート項目のエラー配列。
cartItems array – カートアイテムオブジェクトを含むカートアイテム配列。
cartItemsCount number – カートアイテムの数。
cartItemsWeight number – カートアイテムの重量。
cartNeedsPayment boolean – カートに支払いが必要かどうか。
cartNeedsShipping boolean – カートに配送が必要かどうか。
cartTotals object – 以下のキーを持つカート合計オブジェクト：
- currency_code string – 通貨コード。
- currency_decimal_separator string – 通貨の小数点セパレータ。
- currency_minor_unit number – 通貨の小単位。
- currency_prefix string – 通貨のプレフィックス。
- currency_suffix string – 通貨のサフィックス。
- currency_symbol string – 通貨記号。
- currency_thousand_separator string – 通貨の千の区切り文字。
- tax_lines array – 以下のキーを持つ税目オブジェクトを含む税目配列：
  - name string – タックスラインの名前。
  - price number – タックスラインの価格。
  - rate string – タックス・ラインの税率ID。
- total_discount string – 割引総額。
- total_discount_tax string – 割引税の合計。
- total_fees string – 料金合計。
- total_fees_tax string – 料金にかかる税金の合計。
- total_items string – 合計アイテム。
- total_items_tax string – 合計商品税。
- total_price string – 合計価格。
- total_shipping string – 送料の合計。
- total_shipping_tax string – 配送にかかる税金の合計。
- total_tax string – 合計税金。
crossSellsProducts array – クロスセル商品オブジェクトを含むクロスセル商品配列。
extensions object (default: {}) – 拡張オブジェクト。
isLoadingRates boolean – カートが配送料金を読み込んでいるかどうか。
paymentRequirements array – 支払い条件の配列。
shippingAddress object – billingAddress オブジェクトと同じキーを持つ配送先住所オブジェクト。
shippingRates array – 配送料金の配列。

カートアイテムオブジェクト

上記のフィルターの Cart Item オブジェクトは以下のキーを持ちます：

backorders_allowed boolean – バックオーダーを許可するかどうか。
catalog_visibility string – カタログの表示。
decsription string – カートアイテムの説明。
extensions object (default: {}) – 拡張オブジェクト。
id number – アイテムID。
images array – アイテムの画像配列。
item_data array – アイテムデータの配列。
key string – アイテムのキー。
low_stock_remaining number – 残りの在庫数。
name string – アイテム名。
permalink string – アイテムのパーマリンク。
prices object – 以下のキーを持つアイテム価格オブジェクト：
- currency_code string – 通貨コード。
- currency_decimal_separator string – 通貨の小数点セパレータ。
- currency_minor_unit number – 通貨の小単位。
- currency_prefix string – 通貨のプレフィックス。
- currency_suffix string – 通貨のサフィックス。
- currency_symbol string – 通貨記号。
- currency_thousand_separator string – 通貨の千単位区切り文字。
- price string – 価格。
- price_range string – 価格帯。
- raw_prices object – 以下のキーを持つ生の価格オブジェクト：
  - precision number – 精度。
  - price number – 価格。
  - regular_price number – 通常価格。
  - sale_price number – セール価格。
- regular_price string – 通常価格。
- sale_price string – セール価格。
quantity number – 商品の数量。
quantity_limits object – 以下のキーを持つ数量制限オブジェクトです：
- editable boolean – 数量を編集可能かどうか。
- maximum number – 最大数量。
- minimum number – 最小量。
- multiple_of number – 数量の倍数。
short_description string – 商品の短い説明。
show_backorder_badge boolean – バックオーダーのバッジを表示するかどうか。
sku string – 商品のSKU。
sold_individually boolean – アイテムが個別に販売されているかどうか。
totals object – 以下のキーを持つ項目の合計オブジェクトです：
- currency_code string – 通貨コード。
- currency_decimal_separator string – 通貨の小数点セパレータ。
- currency_minor_unit number – 通貨の小単位。
- currency_prefix string – 通貨のプレフィックス。
- currency_suffix string – 通貨のサフィックス。
- currency_symbol string – 通貨記号。
- currency_thousand_separator string – 通貨の千の区切り文字。
- line_subtotal string – 行の小計。
- line_subtotal_tax string – 行の小計の税金。
- line_total string – 行の合計。
- line_total_tax string – 行の合計税額。
type string – 商品のタイプ。
variation array – 項目のバリエーション配列。

ブロック開発

チュートリアル

参照 (reference)

データストア

フック (hooks)

入門

拡張可能なブロック

カートとチェックアウトブロック

チェックアウトの決済方法

カートとチェックアウトのフィルター

product-collection-block

cart-line-items

カートの項目

cartItemClass

説明

パラメーター

リターン

コード例

基本例

高度な例

スクリーンショット

cartItemPrice

説明

パラメーター

リターン

コード例

基本例

高度な例

スクリーンショット

itemName

説明

パラメーター

リターン

コード例

基本例

高度な例

スクリーンショット

saleBadgePriceFormat

説明

パラメーター

リターン

コード例

高度な例

スクリーンショット

showRemoveItemLink

説明

パラメーター

リターン

コード例

基本例

高度な例

スクリーンショット

subtotalPriceFormat

説明

パラメーター

リターン

コード例

基本例

高度な例

スクリーンショット

カートオブジェクト

カートアイテムオブジェクト

`cartItemClass`

`cartItemPrice`

`itemName`

`saleBadgePriceFormat`

`showRemoveItemLink`

`subtotalPriceFormat`