Checkout and place order button

The following Checkout and place order button filters are available:

• proceedToCheckoutButtonLabel
• proceedToCheckoutButtonLink
• placeOrderButtonLabel

The following objects are shared between the filters:

• Cart object
• Cart Item object

proceedToCheckoutButtonLabel

Description

The proceedToCheckoutButtonLabel filter allows change the label of the "Proceed to checkout" button.

Parameters

• defaultValue string (default: Proceed to Checkout) - The label of the "Proceed to checkout" button.
• 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.

Returns

• string - The label of the "Proceed to checkout" button.

Code examples

Basic example

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyProceedToCheckoutButtonLabel = (
	defaultValue,
	extensions,
	args
) => {
	if ( ! args?.cart.items ) {
		return defaultValue;
	}

	return 'Go to checkout';
};

registerCheckoutFilters( 'example-extension', {
	proceedToCheckoutButtonLabel: modifyProceedToCheckoutButtonLabel,
} );

Advanced example

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyProceedToCheckoutButtonLabel = (
	defaultValue,
	extensions,
	args
) => {
	if ( ! args?.cart.items ) {
		return defaultValue;
	}

	const isSunglassesInCart = args?.cart.items.some(
		( item ) => item.name === 'Sunglasses'
	);

	if ( isSunglassesInCart ) {
		return '😎 Proceed to checkout 😎';
	}

	return defaultValue;
};

registerCheckoutFilters( 'example-extension', {
	proceedToCheckoutButtonLabel: modifyProceedToCheckoutButtonLabel,
} );

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

Screenshots

Before	After

proceedToCheckoutButtonLink

Description

The proceedToCheckoutButtonLink filter allows change the link of the "Proceed to checkout" button.

Parameters

• defaultValue string (default: /checkout) - The link of the "Proceed to checkout" button.
• 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.

Returns

• string - The link of the "Proceed to checkout" button.

Code examples

Basic example

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyProceedToCheckoutButtonLink = (
	defaultValue,
	extensions,
	args
) => {
	if ( ! args?.cart.items ) {
		return defaultValue;
	}

	return '/custom-checkout';
};

registerCheckoutFilters( 'example-extension', {
	proceedToCheckoutButtonLink: modifyProceedToCheckoutButtonLink,
} );

Advanced example

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyProceedToCheckoutButtonLink = (
	defaultValue,
	extensions,
	args
) => {
	if ( ! args?.cart.items ) {
		return defaultValue;
	}

	const isSunglassesInCart = args?.cart.items.some(
		( item ) => item.name === 'Sunglasses'
	);

	if ( isSunglassesInCart ) {
		return '/custom-checkout';
	}

	return defaultValue;
};

registerCheckoutFilters( 'example-extension', {
	proceedToCheckoutButtonLink: modifyProceedToCheckoutButtonLink,
} );

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

Screenshots

Before	After

placeOrderButtonLabel

Description

The placeOrderButtonLabel filter allows change the label of the "Place order" button.

Parameters

• defaultValue (type: string, default: Place order) - The label of the "Place order" button.
• extensions object (default: {}) - The extensions object.

Returns

• string - The label of the "Place order" button.

Code example

const { registerCheckoutFilters } = window.wc.blocksCheckout;

const modifyPlaceOrderButtonLabel = ( defaultValue, extensions ) => {
	return '😎 Pay now 😎';
};

registerCheckoutFilters( 'example-extension', {
	placeOrderButtonLabel: modifyPlaceOrderButtonLabel,
} );

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.
• coupons array - The coupons array.
• crossSells array - The cross sell items array.
• errors array - The errors array.
• extensions object (default: {}) - The extensions object.
• fees array - The fees array.
• hasCalculatedShipping boolean - Whether the cart has calculated shipping.
• items array - The cart items array with cart item objects, see Cart Item object.
• itemsCount number - The number of items in the cart.
• itemsWeight number - The total weight of the cart items.
• needsPayment boolean - Whether the cart needs payment.
• needsShipping boolean - Whether the cart needs shipping.
• paymentMethods array - The payment methods array.
• paymentRequirements array - The payment requirements array.
• shippingAddress object - The shipping address object with the same keys as the billing address object.
• shippingRates array - The shipping rates array.
• totals object - The 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 of objects with the following keys:
    • name string - The tax name.
    • price string - The tax price.
    • rate string - The tax rate.
  • total_discount string - The total discount.
  • total_discount_tax string - The total discount tax.
  • total_fee string - The total fee.
  • total_fee_tax string - The total fee 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.

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.