woocommerce/docs/cart-and-checkout-blocks/available-filters
piinthecloud d92161cbd1
Move checkout docs to main v2 (#49984)
* move checkout docs with front matter to main folder (#49186)

* move checkout docs with front matter to main folder

---------

Co-authored-by: Jacklyn Biggin <hi@jacklyn.dev>

* initial commit to reapply changes from PR #49186

* update html tags to unicode and clean up hashlinks

* revert unicode

* remove emoji

* update manifest

* test readme page

* remove avail-filters since it is now redundant with the readme

* update links

* test htmlentity

* pdate links

* typo fix

* update readme with actual doc

* fix links

---------

Co-authored-by: Jacklyn Biggin <hi@jacklyn.dev>
2024-08-02 20:12:06 +02:00
..
README.md Move checkout docs to main v2 (#49984) 2024-08-02 20:12:06 +02:00
additional-cart-checkout-inner-block-types.md Move checkout docs to main v2 (#49984) 2024-08-02 20:12:06 +02:00
cart-line-items.md Move checkout docs to main v2 (#49984) 2024-08-02 20:12:06 +02:00
checkout-and-place-order-button.md Move checkout docs to main v2 (#49984) 2024-08-02 20:12:06 +02:00
coupons.md Move checkout docs to main v2 (#49984) 2024-08-02 20:12:06 +02:00
order-summary-items.md Move checkout docs to main v2 (#49984) 2024-08-02 20:12:06 +02:00
totals-footer-item.md Move checkout docs to main v2 (#49984) 2024-08-02 20:12:06 +02:00

README.md

category_title category_slug post_title
Available Filters cart-and-checkout-available-filters Cart and Checkout - Available Filters

This document lists the filters that are currently available to extensions and offers usage information for each one of them. Information on registering filters can be found on the Checkout - Filter Registry page.

Cart Line Items filters

The following Cart Line Items filters are available:

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

The following screenshot shows which parts the individual filters affect:

Cart Line Items

Order Summary Items filters

The following Order Summary Items filters are available:

  • cartItemClass
  • cartItemPrice
  • itemName
  • subtotalPriceFormat

The following screenshot shows which parts the individual filters affect:

Order Summary Items

The following Totals Footer Item filter is available:

  • totalLabel
  • totalValue

Checkout and place order button filters

The following Checkout and place order button filters are available:

  • proceedToCheckoutButtonLabel
  • proceedToCheckoutButtonLink
  • placeOrderButtonLabel

Coupon filters

The following Coupon filters are available:

  • coupons
  • showApplyCouponNotice
  • showRemoveCouponNotice

Additional Cart and Checkout inner block types filter

The following Additional Cart and Checkout inner block types filter is available:

  • additionalCartCheckoutInnerBlockTypes

Combined filters

Filters can also be combined. The following example shows how to combine some of the available filters.

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const isOrderSummaryContext = ( args ) => args?.context === 'summary';

const modifyCartItemClass = ( defaultValue, extensions, args ) => {
	if ( isOrderSummaryContext( args ) ) {
		return 'my-custom-class';
	}
	return defaultValue;
};

const modifyCartItemPrice = ( defaultValue, extensions, args ) => {
	if ( isOrderSummaryContext( args ) ) {
		return '<price/> for all items';
	}
	return defaultValue;
};

const modifyItemName = ( defaultValue, extensions, args ) => {
	if ( isOrderSummaryContext( args ) ) {
		return `${ defaultValue }`;
	}
	return defaultValue;
};

const modifySubtotalPriceFormat = ( defaultValue, extensions, args ) => {
	if ( isOrderSummaryContext( args ) ) {
		return '<price/> per item';
	}
	return defaultValue;
};

registerCheckoutFilters( 'example-extension', {
	cartItemClass: modifyCartItemClass,
	cartItemPrice: modifyCartItemPrice,
	itemName: modifyItemName,
	subtotalPriceFormat: modifySubtotalPriceFormat,
} );

Troubleshooting

If you are logged in to the store as an administrator, you should be shown an error like this if your filter is not working correctly. The error will also be shown in your console.

Troubleshooting