Fix WoodMart layout shift on mobile storefronts

CLS in WoodMart usually traces to a handful of elements: promo bars and notice banners that push content down, product images without explicit dimensions, sticky headers that resize on scroll, variation swatches that reflow, and web fonts that swap after first paint. Each nudges the layout after the shopper has already started reading.

Most CLS is fixed by making the browser reserve the right space before content arrives:

• Set explicit width/height (or aspect-ratio) on every product image
• Reserve height for banners, sliders and sticky headers
• Preload the primary web font and use font-display: optional/swap deliberately
• Size ad and embed slots before they load

If the shifts come from a few images missing dimensions or one late-loading banner, that's fixable within the current theme — no migration required. The free audit measures your field CLS and tells you whether it's a handful of fixes or a structural theme issue.

When shift comes from builder-generated markup, deeply nested sections and scripts that inject content late, patching individual elements becomes whack-a-mole. A Next.js storefront renders predictable components with reserved space by construction, so layout is stable from first paint.

The CLS you see in a single lab run is only half the story. A lot of WoodMart's shift happens after an interaction: opening the mini-cart drawer pushes the page, applying an AJAX filter resizes the product grid and jumps the scroll, tapping a swatch reflows the gallery, and 'load more' extends the list under the footer. These do not always appear in one lab load, so they have to be found by actually using the store on a phone. Reserving space for these dynamic regions, and swapping their contents without resizing the container, is what fixes the shift shoppers really feel.

• Reserve space for the mini-cart drawer and off-canvas panels
• Make AJAX filter results swap without resizing the grid container
• Stop swatch selection from reflowing the gallery or product card
• Test shift by interacting with the page, not only by loading it

CLS is not just a score; on a phone it directly costs conversions. When a late banner or ad slot pushes the layout down just as the shopper reaches for 'add to cart', the tap lands on the wrong thing, and a mis-tap at the moment of intent erodes trust in the store. This is why the buy button, price and primary actions are the elements whose space must be reserved first — stability there protects the exact interactions that turn a visit into an order.

The mechanics of holding a layout still are worth knowing, because they are cheap once applied consistently. Every image and video gets explicit width and height attributes or a CSS aspect-ratio, so the browser reserves the box before the media arrives. Containers that will fill with async content — banners, ad slots, review blocks — get a min-height. Web fonts use size-adjust and a matched fallback so the swap does not resize text. And late-injected elements animate in without pushing their neighbours. Applied across the templates, these turn CLS from a recurring surprise into a solved property of the components.

• width/height or aspect-ratio on every image and video
• min-height for containers that fill with async content
• size-adjust and a matched fallback font to avoid text reflow
• Animate late elements in without shifting neighbours

We map the visible storefront, recreate the layout with components that reserve their own space, keep media dimensions under control, and verify CLS in the field on staging. WooCommerce stays the backend; only the rendering layer that causes the shift is replaced.