Storefront WooCommerce Layout Broken: An Old Stylesheet Meets New Shop Markup

Shop symptoms, sorted by the page they hit

Write down where the damage is before you change anything. Storefront styles each kind of shop page through different rules, so the page that broke narrows the search faster than any plugin scan. Check a category page, a product page, the cart with something in it and the checkout, on a desktop and on a phone, logged out.

• Shop and category pages: products stacked in one column, uneven card heights, sorting and result count doubled or missing, pagination in an odd spot.
• Product pages: the gallery wider or narrower than last week, the summary pushed under the images, next and previous product links that load slowly or time out.
• Cart and checkout: fonts and buttons that do not match the rest of the store, a two-column checkout squeezed into a narrow strip, the bottom bar missing on phones.
• Homepage template: product rows missing, reordered, or styled unlike the shop page beside them.

If orders fail rather than look wrong, start with WooCommerce checkout not working. Variation dropdowns that vanished are a separate fault, covered in WooCommerce variations not showing. Everything below assumes the store still takes orders and simply looks wrong while it does.

Storefront dresses WooCommerce itself, which cuts both ways

Three choices in Storefront's code decide how a shop breaks. First, it filters woocommerce_enqueue_styles to an empty array, switching off WooCommerce's default stylesheets, and loads its own assets/css/woocommerce/woocommerce.css under the handle storefront-woocommerce-style. The look of every classic shop page depends on that one file, which changes only when Storefront ships a release. Second, version 4.6.2 contains no woocommerce template folder. The theme changes shop layout through hooks, never through copied templates.

Third, it rewires WooCommerce's hooks. It removes the default content wrappers and the woocommerce_sidebar output, moves the breadcrumb to storefront_before_content, places sorting, result count and pagination inside its own sorting wrappers above and below the product loop, moves the sale flash after the product title, and swaps in its own upsell function. A plugin that expects WooCommerce's stock positions can print its badge or button a few pixels, or a whole block, away from where its screenshots show.

It also declares the grid: three columns and four rows by default, up to six columns, 416 pixel single product images, 324 pixel catalog thumbnails, plus gallery zoom, lightbox and slider. Products per row and rows per page in Customizer, WooCommerce, Product Catalog are honored within those limits. The Storefront WooCommerce guide maps the rest of the hooks.

Stale headers and critical-fix-only status, in practice

Storefront's readme still says tested up to WordPress 6.5 and WooCommerce 8.8, and its style.css says WordPress 6.7. Current releases are WordPress 7.1.3 and WooCommerce 11.1.2. A header records what someone tested; it is not a switch, so nothing turns off when it goes stale. What changes is who does the testing, and on a Storefront store the answer is now you, on a staging copy.

The repository's status file says the theme is in active development, then limits work to critical bugs, broad-impact bugs, compatibility and release-process fixes. The 4.6.2 changelog shows the pattern: WordPress 6.9 changed a query, product pages with hidden neighbors sharing a publish date started timing out, and the fix shipped in December 2025. That query feeds Product Pagination, a setting under Customizer, Product Page, on by default. On an older Storefront, switching it off stops the timeout while you schedule the update. The Storefront speed guide covers the other slow spots on product pages.

Block cart, block checkout and the newer product grids

Since WooCommerce 8.3, new stores get the Cart and Checkout blocks by default, while existing stores keep whatever they had. On Storefront the two kinds look different, and the difference is expected. Classic shortcode pages are styled by Storefront's woocommerce.css. Block pages are styled mostly by WooCommerce's own block CSS. Storefront adds a short list of color rules, printed inline with its gutenberg-blocks stylesheet: block buttons take the Alternate button colors from Customizer, Buttons, and the cart's submit area, the order summary quantity badge and the price filter slider follow the theme's colors.

Two more block effects catch owners out. The handheld footer bar switches itself off on block cart and checkout pages, so phones lose the bottom bar there, as Storefront mobile menu not working explains. And Storefront's stylesheets cover the older product grid blocks, which use wc-block-grid classes, but contain no rules for the Product Collection block, so a homepage rebuilt with it can look nothing like the shop. To see which checkout you run, edit the Checkout page: a single Checkout block means blocks; a Shortcode block holding woocommerce_checkout means classic.

One sidebar widget can re-lay every product page

Storefront adds a storefront-full-width-content class to the body only when the Sidebar widget area is empty, and its stylesheets size the content column, the product gallery and the summary from that class. Add one widget, even a forgotten search box, and every product page shares its width with a sidebar, the gallery shrinks and the summary wraps. The same sidebar appears beside the cart and checkout, where a two-column Checkout block has far less room than it was designed for.

The fix is one of two. Empty the Sidebar widget area if the store does not need it, or set Cart and Checkout to the Full width page template, which drops the sidebar and has its own cart styles. The Layout setting in the Customizer only chooses whether the sidebar sits left or right; it does not remove it.

Suspects in order, with the proof for each

Work down the table and stop at the first row that proves out. The general mechanics, across themes, are in WooCommerce layout broken; if the fault began the day any theme or plugin updated, theme broke after update shows how to find the release responsible.

Repairing the shop on a staging copy

1. 1

   Copy the store

   Clone the live store to staging and switch off outgoing emails and live payments on the copy.

2. 2

   Record versions

   Note WordPress, WooCommerce, Storefront and child theme versions, and the date the layout broke.

3. 3

   Clear outdated templates

   For each child theme copy flagged in System Status, either delete it and make the change with a hook, or recopy the current file from WooCommerce's templates folder and reapply your edit.

4. 4

   Update Storefront to 4.6.2

   It carries the WordPress 6.9 product page timeout fix and the latest shop styling.

5. 5

   Settle the checkout type

   Keep the shortcode or move to blocks, but test payment, shipping and checkout field extensions first. Put Cart and Checkout on the Full width template either way.

6. 6

   Patch styling gaps in the child theme

   Add CSS for new WooCommerce markup or Product Collection grids, then raise the child theme's Version line so browsers fetch it; Storefront CSS not updating explains why.

7. 7

   Walk the purchase path

   Category, product, cart, checkout and the order email, on a desktop and a phone. Then push live and watch orders for a day.

When the shop keeps outgrowing its theme

On September 15, 2026 WooCommerce announced a beta of Purple, its first official block theme, with block templates for shop pages and a pattern library for stores. Its post says Storefront users may have needed extensions for product heroes, mini-carts or richer headers that a block theme handles in the editor. It says nothing about retiring Storefront. A beta is no home for a live checkout, and no hook-based change transfers, so test Purple on a copy once it reaches the Theme Directory. The Storefront review weighs staying against moving.

If the store keeps breaking because extensions, overrides and theme styles each claim the product page, the issue is the stack. A Next.js store builds catalog, cart and checkout as one tested codebase, and Athena CMS includes built-in e-commerce. It costs more up front. Storefront vs Next.js and Storefront to Next.js lay out the trade and the move; for a fix today, WooCommerce website repair and our theme troubleshooting service work on staging. More fixes live in the troubleshooting section.