Cart and Checkout Filters – Cart line items

The following Cart Line Items filters are available:

• cartItemClass
• cartItemPrice
• itemName
• saleBadgePriceFormat
• showRemoveItemLink
• subtotalPriceFormat

The following objects are shared between the filters:

• Cart object
• Cart Item object

The following screenshot shows which parts the individual filters affect:

cartItemClass

Description

The cartItemClass filter allows to change the cart item class.

Parameters

• defaultValue object (default: '') – The default cart item class.
• extensions object (default: {}) – The extensions object.
• args object – The arguments object with the following keys:
  • cart object – The cart object from wc/store/cart, see Cart object.
  • cartItem object – The cart item object from wc/store/cart, see Cart Item object.
  • context string (allowed values: cart or summary) – The context of the item.

Returns

• string – The modified cart item class, or an empty string.

Code examples

Basic example

		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,
} );

	

Advanced example

		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,
} );

	

Filters can be also combined. See Combined filters for an example.

Screenshots

Before	After

cartItemPrice

Description

The cartItemPrice filter allows to format the cart item price.

Parameters

• defaultValue string (default: <price/>) – The default cart item price.
• extensions object (default: {}) – The extensions object.
• args object – The arguments object with the following keys:
  • cart object – The cart object from wc/store/cart, see Cart object.
  • cartItem object – The cart item object from wc/store/cart, see Cart Item object.
  • context string (allowed values: cart or summary) – The context of the item.
• validation boolean – Checks if the return value contains the substring <price/>.

Returns

• string – The modified format of the cart item price, which must contain the substring <price/>, or the original price format.

Code examples

Basic example

		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,
} );

	

Advanced example

		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,
} );

	

Filters can be also combined. See Combined filters for an example.

Screenshots

Before	After

itemName

Description

The itemName filter allows to change the cart item name.

Parameters

• defaultValue string – The default cart item name.
• extensions object (default: {}) – The extensions object.
• args object – The arguments object with the following keys:
  • cart object – The cart object from wc/store/cart, see Cart object.
  • cartItem object – The cart item object from wc/store/cart, see Cart Item object.
  • context string (allowed values: cart or summary) – The context of the item.

Returns

• string – The original or modified cart item name.

Code examples

Basic example

		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,
} );

	

Advanced example

		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,
} );

	

Filters can be also combined. See Combined filters for an example.

Screenshots

Before	After

saleBadgePriceFormat

Description

The saleBadgePriceFormat filter allows to format the cart item sale badge price.

Parameters

• defaultValue string (default: <price/>) – The default cart item sale badge price.
• extensions object (default: {}) – The extensions object.
• args object – The arguments object with the following keys:
  • cart object – The cart object from wc/store/cart, see Cart object.
  • cartItem object – The cart item object from wc/store/cart, see Cart Item object.
  • context string (allowed values: cart or summary) – The context of the item.
• validation boolean – Checks if the return value contains the substring <price/>.

Returns

• string – The modified format of the cart item sale badge price, which must contain the substring <price/>, or the original price format.

Code examples

		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,
} );

	

Advanced example

		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,
} );

	

Filters can be also combined. See Combined filters for an example.

Screenshots

Before	After

showRemoveItemLink

Description

The showRemoveItemLink is used to show or hide the cart item remove link.

Parameters

• defaultValue (type: boolean, default: true) – The default value of the remove link.
• extensions object (default: {}) – The extensions object.
• args object – The arguments object with the following keys:
  • cart object – The cart object from wc/store/cart, see Cart object.
  • cartItem object – The cart item object from wc/store/cart, see Cart Item object.
  • context string (allowed values: cart or summary) – The context of the item.

Returns

• boolean – true if the cart item remove link should be shown, false otherwise.

Code examples

Basic example

		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,
} );

	

Advanced example

		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,
} );

	

Filters can be also combined. See Combined filters for an example.

Screenshots

Before	After

subtotalPriceFormat

Description

The subtotalPriceFormat filter allows to format the cart item subtotal price.

Parameters

• defaultValue string (default: <price/>) – The default cart item subtotal price.
• extensions object (default: {}) – The extensions object.
• args object – The arguments object with the following keys:
  • cart object – The cart object from wc/store/cart, see Cart object.
  • cartItem object – The cart item object from wc/store/cart, see Cart Item object.
  • context string (allowed values: cart or summary) – The context of the item.
• validation boolean – Checks if the return value contains the substring <price/>.

Returns

• string – The modified format of the cart item subtotal price, which must contain the substring <price/>, or the original price format.

Code examples

Basic example

		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,
} );

	

Advanced example

		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,
} );

	

Filters can be also combined. See Combined filters for an example.

Screenshots

Before	After

Cart object

The Cart object of the filters above has the following keys:

• billingAddress object – The billing address object with the following keys:
  • address_1 string – The first line of the address.
  • address_2 string – The second line of the address.
  • city string – The city of the address.
  • company string – The company of the address.
  • country string – The country of the address.
  • email string – The email of the address.
  • first_name string – The first name of the address.
  • last_name string – The last name of the address.
  • phone string – The phone of the address.
  • postcode string – The postcode of the address.
  • state string – The state of the address.
• billingData object – The billing data object with the same keys as the billingAddress object.
• cartCoupons array – The cart coupons array.
• cartErrors array – The cart errors array.
• cartFees array – The cart fees array.
• cartHasCalculatedShipping boolean – Whether the cart has calculated shipping.
• cartIsLoading boolean – Whether the cart is loading.
• cartItemErrors array – The cart item errors array.
• cartItems array – The cart items array with cart item objects, see Cart Item object.
• cartItemsCount number – The cart items count.
• cartItemsWeight number – The cart items weight.
• cartNeedsPayment boolean – Whether the cart needs payment.
• cartNeedsShipping boolean – Whether the cart needs shipping.
• cartTotals object – The cart totals object with the following keys:
  • currency_code string – The currency code.
  • currency_decimal_separator string – The currency decimal separator.
  • currency_minor_unit number – The currency minor unit.
  • currency_prefix string – The currency prefix.
  • currency_suffix string – The currency suffix.
  • currency_symbol string – The currency symbol.
  • currency_thousand_separator string – The currency thousand separator.
  • tax_lines array – The tax lines array with tax line objects with the following keys:
    • name string – The name of the tax line.
    • price number – The price of the tax line.
    • rate string – The rate ID of the tax line.
  • total_discount string – The total discount.
  • total_discount_tax string – The total discount tax.
  • total_fees string – The total fees.
  • total_fees_tax string – The total fees tax.
  • total_items string – The total items.
  • total_items_tax string – The total items tax.
  • total_price string – The total price.
  • total_shipping string – The total shipping.
  • total_shipping_tax string – The total shipping tax.
  • total_tax string – The total tax.
• crossSellsProducts array – The cross sells products array with cross sells product objects.
• extensions object (default: {}) – The extensions object.
• isLoadingRates boolean – Whether the cart is loading rates.
• paymentRequirements array – The payment requirements array.
• shippingAddress object – The shipping address object with the same keys as the billingAddress object.
• shippingRates array – The shipping rates array.

Cart Item object

The Cart Item object of the filters above has the following keys:

• backorders_allowed boolean – Whether backorders are allowed.
• catalog_visibility string – The catalog visibility.
• decsription string – The cart item description.
• extensions object (default: {}) – The extensions object.
• id number – The item ID.
• images array – The item images array.
• item_data array – The item data array.
• key string – The item key.
• low_stock_remaining number – The low stock remaining.
• name string – The item name.
• permalink string – The item permalink.
• prices object – The item prices object with the following keys:
  • currency_code string – The currency code.
  • currency_decimal_separator string – The currency decimal separator.
  • currency_minor_unit number – The currency minor unit.
  • currency_prefix string – The currency prefix.
  • currency_suffix string – The currency suffix.
  • currency_symbol string – The currency symbol.
  • currency_thousand_separator string – The currency thousand separator.
  • price string – The price.
  • price_range string – The price range.
  • raw_prices object – The raw prices object with the following keys:
    • precision number – The precision.
    • price number – The price.
    • regular_price number – The regular price.
    • sale_price number – The sale price.
  • regular_price string – The regular price.
  • sale_price string – The sale price.
• quantity number – The item quantity.
• quantity_limits object – The item quantity limits object with the following keys:
  • editable boolean – Whether the quantity is editable.
  • maximum number – The maximum quantity.
  • minimum number – The minimum quantity.
  • multiple_of number – The multiple of quantity.
• short_description string – The item short description.
• show_backorder_badge boolean – Whether to show the backorder badge.
• sku string – The item SKU.
• sold_individually boolean – Whether the item is sold individually.
• totals object – The item totals object with the following keys:
  • currency_code string – The currency code.
  • currency_decimal_separator string – The currency decimal separator.
  • currency_minor_unit number – The currency minor unit.
  • currency_prefix string – The currency prefix.
  • currency_suffix string – The currency suffix.
  • currency_symbol string – The currency symbol.
  • currency_thousand_separator string – The currency thousand separator.
  • line_subtotal string – The line subtotal.
  • line_subtotal_tax string – The line subtotal tax.
  • line_total string – The line total.
  • line_total_tax string – The line total tax.
• type string – The item type.
• variation array – The item variation array.