diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx
index da01127aee5..c21fb6dabec 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx
@@ -11,6 +11,9 @@ import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
import { noticeContexts } from '@woocommerce/base-context';
import { StoreNoticesContainer } from '@woocommerce/blocks-components';
import { applyCheckoutFilter } from '@woocommerce/blocks-checkout';
+import { CART_STORE_KEY } from '@woocommerce/block-data';
+import { useSelect } from '@wordpress/data';
+import { formatPrice } from '@woocommerce/price-format';
/**
* Internal dependencies
@@ -30,7 +33,15 @@ const Block = ( {
placeOrderButtonLabel: string;
} ): JSX.Element => {
const { paymentMethodButtonLabel } = useCheckoutSubmit();
- const label = applyCheckoutFilter( {
+
+ const cartTotals = useSelect( ( select ) => {
+ const store = select( CART_STORE_KEY );
+ return store.getCartTotals();
+ }, [] );
+
+ const totalPrice = formatPrice( cartTotals.total_price );
+
+ let label = applyCheckoutFilter( {
filterName: 'placeOrderButtonLabel',
defaultValue:
paymentMethodButtonLabel ||
@@ -38,6 +49,15 @@ const Block = ( {
defaultPlaceOrderButtonLabel,
} );
+ if ( label.includes( '' ) ) {
+ if ( cartTotals.total_price === '0' ) {
+ label = label.replace( '', '' );
+ label = label.replace( /[^a-zA-Z\s]/g, '' );
+ } else {
+ label = label.replace( '', totalPrice );
+ }
+ }
+
return (
'
+);
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/editable-button/index.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/editable-button/index.tsx
index b87fbe25731..595ec58dfb4 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/editable-button/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/editable-button/index.tsx
@@ -26,6 +26,13 @@ const EditableButton = ( {
value,
...props
}: EditableButtonProps ) => {
+ /**
+ * If the value contains a placeholder, e.g. "Place Order · ", we need to change it,
+ * e.g. to "Place Order · <price/>", to ensure it is displayed correctly. This reflects the
+ * default behaviour of the `RichText` component if we would type "" directly into it.
+ */
+ value = value.replace( /
{
page.getByRole( 'link', { name: 'Terug naar winkelwagen' } )
).toBeVisible();
- await expect(
- page.getByRole( 'button', { name: 'Bestel en betaal' } )
- ).toBeVisible();
+ /**
+ * @todo Uncomment and update when WooCommerce 9.0.0 is released and a translation for the new string is available.
+ * @see https://github.com/woocommerce/woocommerce/issues/47260
+ */
+ // await expect(
+ // page.getByRole( 'button', { name: 'Bestel en betaal' } )
+ // ).toBeVisible();
await expect(
page.getByRole( 'button', {
diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout.page.ts b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout.page.ts
index 31716c4f1fe..4c55c0479d8 100644
--- a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout.page.ts
+++ b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout.page.ts
@@ -196,7 +196,7 @@ export class CheckoutPage {
// your road?" field.
} );
await this.waitForCheckoutToFinishUpdating();
- await this.page.getByText( 'Place Order', { exact: true } ).click();
+ await this.page.getByText( 'Place Order' ).click();
if ( waitForRedirect ) {
await this.page.waitForURL( /order-received/ );
}
diff --git a/plugins/woocommerce/changelog/47083-update-46010-place-order-button-with-price b/plugins/woocommerce/changelog/47083-update-46010-place-order-button-with-price
new file mode 100644
index 00000000000..c9243cc6cb3
--- /dev/null
+++ b/plugins/woocommerce/changelog/47083-update-46010-place-order-button-with-price
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Display the total price in the place order button.
\ No newline at end of file