Cart and Checkout Block Container Query Support in WooCommerce 10.0

As part of the performance improvements in the upcoming 10.0 release, WooCommerce now defines the top-level wrappers of both the Cart and Checkout blocks as CSS containers using container-type: inline-size.

.wp-block-woocommerce-checkout {
    margin: 0;
    padding-top: 24px;
    container-type: inline-size;
}

Developers can now use CSS Container Queries (@container) to style child components based on parent width, eliminating the need for classes like .is-large, which were added to the page with JavaScript after the DOM was loaded. Container queries are a new alternative to media queries that enable you to apply styles to an element based on certain attributes of its container element, rather than viewport size or other device characteristics.

Legacy classes remain for compatibility, but we recommend using the new mixin for cleaner styling and fewer layout shifts.

How to use new container queries

We’ve introduced new SCSS mixins as convenient helpers for targeting the same width breakpoints previously defined by classes like .is-large, .is-medium, .is-small and .is-mobile. These mixins make it easier to style inner content within the Cart and Checkout blocks based on the container width.

// Before, using JS generated CSS class
.is-large {
  .your-class {
    padding: 2rem;
  }
}

// After, using the container mixin
@include cart-checkout-large-container {
  .your-class {
      padding: 2rem;
  }
}

// After, using pure CSS
@container (min-width: 700px) {
  .your-class {
      padding: 2rem;
  }
}

Note: Container queries work as long as there isn’t another container in between the checkout blocks wrapper and the element being styled. If you define additional CSS containers in your theme or plugins, they may interfere with the container query behavior.

How can developers tell if they are affected?

This update is part of ongoing work to improve loading performance in the Checkout blocks. Starting with WooCommerce 10.0, the Checkout Order Summary now uses the new container mixins, and width-based CSS selectors have been removed from its styles.

If your plugin or theme interacts with the Checkout Order Summary area, we recommend reviewing your styles to catch any potential inconsistencies.

While the .is-large, .is-medium, .is-small, and .is-mobile classes are still present in the DOM, issues may arise due to CSS specificity , particularly if you’re using complex selectors that may now override or conflict with the new mixin-based styles.

What action do developers need to take if affected?

If you notice spacing issues or styling inconsistencies with your Order Summary feature, you can:

• Adjust your custom CSS specificity, or
• Refactor to use the new container mixins. This ensures your styles respond consistently to container width without relying on JavaScript-applied classes.

Going forward, all inner content of the Checkout blocks will use these mixins for styling to support a better loading performance without layout shifts.