“proceedToCheckoutButtonLabel” JavaScript filter not working

Hi @akawey,

I see you’re working with the checkout block filters, and it sounds like you’re experiencing some inconsistent behavior.

Before we dive deeper into troubleshooting, I should mention that custom code modifications like these fall outside our Support Policy. However, I’d be happy to help you understand what might be happening and point you toward some resources that could help resolve this.

Regarding your questions:

1. About the proceedToCheckoutButtonLabelfilter not working:

This filter is specifically meant for the “Proceed to checkout” button label shown in the Cart block or wherever the block uses that filter internally. However, not all blocks or contexts support this filter yet. The fact that your placeOrderButtonLabel filter works on the checkout page but proceedToCheckoutButtonLabel does not suggests that the Cart block version or context you’re using might not be properly hooking into this filter, or it might expect the filter registration at a different lifecycle stage. Also, ensure your script runs after the wc.blocksCheckout.registerCheckoutFilters is available and that your modifications are applied at the right time, but sometimes hooking into a document event like DOMContentLoaded or load helps when dealing with dynamic block rendering.

2. Delay before filter text appears:

Yes, there usually is a slight delay because the blocks render their initial UI and then apply JavaScript filters asynchronously. This is normal behavior since filters are applied after the initial render. Unfortunately, this means the default label can appear briefly before your custom label is injected via the filter. Currently, there isn’t a built-in way to make these filters fire instantly before render, as the block rendering is React-based and client-driven.

To address your situation:

• Ensure your custom JS registering filters runs after blocks are fully initialized, for example:

document.addEventListener( 'DOMContentLoaded', () => {
  if ( typeof window.wc !== 'undefined' && window.wc.blocksCheckout ) {
    const { registerCheckoutFilters } = window.wc.blocksCheckout;

    registerCheckoutFilters( "my-woo-hooks", {
      placeOrderButtonLabel: () => "Submit Request",
      proceedToCheckoutButtonLabel: () => "Confirm Selections"
    });
  }
});

• Double-check you are testing this on the actual Cart block or template that supports the proceedToCheckoutButtonLabel filter; the filter won’t affect other parts like the classic cart/checkout pages.

• If your theme or custom plugins override default cart blocks or buttons, try testing with a clean install and Twenty Twenty Five theme as you did.

For development issues, we strongly recommend our Codeable partners. Other great resources for this type of customization are our Developer Hub for technical documentation and hooks, and our Developer Slack Community where developers discuss solutions.

I hope that helps. Let us know if you need anything else.

Hi there!

Thank you for providing more information about the issue.

As my colleague mentioned earlier, customizations like this fall outside the scope of support we’re able to provide here. However, you may find the following guide helpful, as it explains how to use filters to change the button label:
https://developer.woocommerce.com/docs/block-development/extensible-blocks/cart-and-checkout-blocks/filters-in-cart-and-checkout/checkout-and-place-order-button/

If that does not work, For development-specific questions related to custom code, you can also ask your development questions in the  WooCommerce Community Slack