Commit 45f6521607 for woocommerce
commit 45f6521607c092964e4d92b45755799ff175ec23
Author: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Tue Jul 1 10:39:39 2025 +0100
Move additional order summary to checkout actions block (#59154)
* Remove additional order summary to checkout actions block
* Add changelog
* Ensure small and mobile styles apply
* Add correct deps to useSelect
* Fix dependency imports
* Use mixins instead of large/mobile class names
diff --git a/plugins/woocommerce/changelog/fix-order-summary-terms-block b/plugins/woocommerce/changelog/fix-order-summary-terms-block
new file mode 100644
index 0000000000..2ff428ceaa
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-order-summary-terms-block
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Prevent order summary moving below place order button when terms and conditions block is moved
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx
index 9cd0b9de7e..d9fd061d38 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx
@@ -17,6 +17,7 @@ import { applyCheckoutFilter } from '@woocommerce/blocks-checkout';
*/
import { defaultPlaceOrderButtonLabel } from './constants';
import './style.scss';
+import { CheckoutOrderSummarySlot } from '../checkout-order-summary-block/slotfills';
export type BlockAttributes = {
cartPageId: number;
@@ -54,6 +55,7 @@ const Block = ( {
return (
<div className={ clsx( 'wc-block-checkout__actions', className ) }>
+ <CheckoutOrderSummarySlot />
<StoreNoticesContainer
context={ noticeContexts.CHECKOUT_ACTIONS }
/>
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/style.scss
index 5848ee06cd..3f5801d796 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/style.scss
@@ -55,8 +55,16 @@
}
}
-.is-mobile {
+@include cart-checkout-small-container {
.wc-block-checkout__actions {
+ padding-top: $gap-larger;
+ }
+}
+
+@include cart-checkout-mobile-container {
+ .wc-block-checkout__actions {
+ padding-top: $gap-larger;
+
.wc-block-checkout__actions_row {
flex-direction: column-reverse;
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/style.scss
index a35a7d5dac..5a227c6c03 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/style.scss
@@ -80,7 +80,7 @@
border: none;
&.checkout-order-summary-block-fill-wrapper {
- padding-top: $gap-larger;
+ padding-bottom: $gap-larger;
}
.wc-block-components-checkout-order-summary__title {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx
index 3d872fafe3..6446e3318d 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx
@@ -14,7 +14,6 @@ import { validationStore } from '@woocommerce/block-data';
* Internal dependencies
*/
import { termsConsentDefaultText, termsCheckboxDefaultText } from './constants';
-import { CheckoutOrderSummarySlot } from '../checkout-order-summary-block/slotfills';
const FrontendBlock = ( {
text,
@@ -37,11 +36,14 @@ const FrontendBlock = ( {
const { setValidationErrors, clearValidationError } =
useDispatch( validationStore );
- const error = useSelect( ( select ) => {
- return select( validationStore ).getValidationError(
- validationErrorId
- );
- } );
+ const error = useSelect(
+ ( select ) => {
+ return select( validationStore ).getValidationError(
+ validationErrorId
+ );
+ },
+ [ validationErrorId ]
+ );
const hasError = !! ( error?.message && ! error?.hidden );
// Track validation errors for this input.
@@ -75,7 +77,6 @@ const FrontendBlock = ( {
return (
<>
- <CheckoutOrderSummarySlot />
<div
className={ clsx(
'wc-block-checkout__terms',