WooCommerce Layout Broken: Templates, Columns and the Two Kinds of Checkout

What a broken shop looks like from the front counter

Shop faults are rarely total. The catalog loads but the products sit in one long column. The single product page shows the gallery on top of the description. The cart has no styling, or the checkout fields lost their two-column layout and the order summary slid below the payment buttons. A notice appears in the dashboard about outdated template files. Each of these points at a different layer, so write down exactly which page type is broken and when it started before changing a setting.

Logged-in and logged-out views matter here too. Cart, checkout and account pages must never be cached, and a cache that serves an old version of them can look like a layout fault and behave like a payment fault. If the problem is orders not completing rather than looks, go straight to WooCommerce checkout not working.

Outdated template overrides, the number one suspect

WooCommerce builds shop pages from PHP template files in its plugin folder. A classic theme can override any of them by placing its own copy in a woocommerce folder inside the theme, and child themes can do the same. When WooCommerce updates its originals, the theme's copies keep their old markup, and pages built from them lose classes, hooks or fields the new WooCommerce expects.

WooCommerce reports this itself. Go to WooCommerce, Status, System Status and scroll to the end, where it lists the templates your theme or child theme overrides and warns about any that are out of date. WooCommerce's developer documentation says it cannot fix these automatically because every theme is coded differently. Flatsome users see the classic version of this as the notice 'Your theme contains outdated copies of some WooCommerce template files'. Hello Elementor users have reported deprecated-template warnings after WooCommerce updates.

• Overrides in the parent theme: update the theme. The vendor ships updated copies once it supports your WooCommerce version.
• Overrides in your child theme: nobody will update them for you. Back up the old file, copy the current template from the WooCommerce plugin, and reapply your changes by hand.
• Overrides you no longer need: delete them from the child theme so WooCommerce's own templates take over.

Block templates and PHP templates are different machines

There are now two ways a WooCommerce page gets drawn. Classic themes use the PHP templates above, styled by the theme and controlled through the Customizer or the theme's own panel. Block themes use block templates edited in the Site Editor: Single Product, Product Catalog, Cart, Checkout and so on. Ollie ships its own WooCommerce block templates. Twenty Twenty-Five and Twenty Twenty-Four ship none and rely on the ones WooCommerce provides.

Problems start at the boundary. A store that moves from a classic theme to a block theme loses its PHP overrides and Customizer shop settings, because the block theme ignores them. A block template customized in the Site Editor is saved in the database for that theme, so a theme switch or update can leave an old customized template in charge while the theme ships a newer one. Check which system you are on: if Appearance shows Editor rather than Customize, open the shop templates there and look for ones marked as customized. Resetting a customized template restores the theme's version, so copy anything you need first.

Shop columns that ignore the setting

WooCommerce's Customizer panel, under WooCommerce, Product Catalog, has 'Products per row' and 'Rows per page'. Many themes override those with their own controls, and WooCommerce's own documentation warns that some themes are coded so its column snippets have no effect. That is why changing the number does nothing on some sites.

On phones, many themes force two columns or one regardless of the desktop number. That is a design decision, not a fault.

Cart and checkout: blocks or shortcodes

Since WooCommerce 8.3, new installations get the block-based Cart and Checkout by default. Stores that were already running kept their shortcode pages, and the shortcodes remain available. That means two stores on the same theme can have completely different checkouts. Theme features aimed at the classic checkout, such as Astra Pro's two-step checkout or the distraction-free checkout in GP Premium, are built for one system, and some extensions add fields that only appear in one.

Check by editing the Checkout page. A single Checkout block means the block version; a shortcode block containing woocommerce_checkout means the classic one. If someone switched between them, or a builder replaced both with its own checkout layout, styling and extra fields can vanish. Builders add a third option: Divi's checkout modules, Avada's and WoodMart's layout builders and Bricks' Checkout elements each draw their own version. Pick one system per page and remove the others. See Flatsome checkout issues for a theme-specific case.

Putting the shop back together

1. 1

   Back up and note versions

   Take a full backup and record the WooCommerce, theme, child theme and builder versions, plus the date the layout broke.

2. 2

   Check System Status

   In WooCommerce, Status, System Status, read the template override list at the end. Outdated templates are the first thing to fix.

3. 3

   Clear caches and exclusions

   Clear every cache layer and confirm cart, checkout and account pages are excluded from page caching and from script optimization.

4. 4

   Identify the template system

   Decide whether the broken page is drawn by a PHP template, a block template or a builder layout. Fix it in that system only.

5. 5

   Update or replace overrides

   Update the theme for parent overrides. Rebuild child theme overrides from the current WooCommerce originals, or delete the ones you no longer need.

6. 6

   Test the pair on staging

   If it still fails, test the theme with WooCommerce alone on staging, then add plugins back until the fault returns.

7. 7

   Run a test order

   Place a real test order on every payment method before you call the shop fixed.

Theme-specific shop fixes

Some shop breakages are tied to one theme and one release. Blocksy's 2.1.50 update scrambled the single product layout for some stores, with the gallery overlapping and details pushed below; rolling back fixed it. Storefront 4.6.2 fixed product pages timing out on WordPress 6.9 in a specific case involving hidden products with shared publish dates. If your theme is listed, its own page uses its real settings:

• Blocksy WooCommerce layout broken and Kadence WooCommerce layout broken.
• Neve WooCommerce layout broken and OceanWP WooCommerce layout broken.
• Storefront WooCommerce layout broken, for the theme built by WooCommerce's own developers.
• WoodMart WooCommerce issues and Porto WooCommerce issues for the store-focused themes.

Variations that stopped appearing are usually a separate fault: see WooCommerce variations not showing.

Stopping the next update from breaking the store

Keep child theme overrides to the minimum; every copied template is a file you must maintain by hand forever. Prefer hooks and filters for small changes. Check System Status after every WooCommerce update, and update WooCommerce, the theme and the builder on staging first, with a test order before going live. Our WooCommerce website repair team and hosting and maintenance plans do exactly this.

Stores that need this every month are running into the architecture. WooCommerce, a theme with its own overrides and a builder with its own layouts make three owners of one product page. A Next.js store, or Athena CMS with its built-in e-commerce, puts the shop in one codebase that is tested before release. It costs more to build and suits stores where the shop is the business. Compare them in WooCommerce vs Next.js ecommerce, and see our ecommerce development work. Other symptoms are in the troubleshooting hub.