diff --git a/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-filters.md b/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-filters.md index 4d4f55afa29..1460e6e78f7 100644 --- a/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-filters.md +++ b/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-filters.md @@ -42,6 +42,72 @@ The following filters are available for line items: Each of these filters has the following arguments passed to it: `{ context: 'cart', cartItem: CartItem }` ([CartItem](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/c00da597efe4c16fcf5481c213d8052ec5df3766/assets/js/type-defs/cart.ts#L113)) +### itemName + +```ts +const { registerCheckoutFilters } = window.wc.blocksCheckout; + +// Adjust item name of the cart line items. +registerCheckoutFilters( 'example-extension', { + itemName: ( value, extensions, args ) => { + // Return early since this filter is not being applied in the Cart context. + // We must return the original value we received here. + if ( args?.context !== 'cart' ) { + return value; + } + return '🪴 ' + value + ' 🪴'; + } +} ); +``` + +| Before | After | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| image | image | + +### subtotalPriceFormat + +```ts +const { registerCheckoutFilters } = window.wc.blocksCheckout; + +// Adjust subtotal price format of the cart line items. +registerCheckoutFilters( 'example-extension', { + subtotalPriceFormat: ( value, extensions, args ) => { + // Return early since this filter is not being applied in the Cart context. + // We must return the original value we received here. + if ( args?.context !== 'cart' ) { + return value; + } + return ' per item'; + } +} ); +``` + +| Before | After | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| image | image | + +### showRemoveItemLink + +```ts +const { registerCheckoutFilters } = window.wc.blocksCheckout; + +// Show remove item link of the cart line items. +registerCheckoutFilters( 'example-extension', { + showRemoveItemLink: ( value, extensions, args ) => { + // Return early since this filter is not being applied in the Cart context. + // We must return the original value we received here. + if ( args?.context !== 'cart' ) { + return value; + } + return false; + } +} ); +``` + +| Before | After | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| image | image | + ## Order Summary Items In the Checkout block, there is a sidebar that contains a summary of what the customer is about to purchase. There are some filters available to modify the way certain elements are displayed on each item. The sale badges are not shown here, so those filters are not applied in the Order Summary.