Storefront to Next.js: Migrating a WooCommerce Store Without Losing a Sale

Storefront owns the paint, WooCommerce owns the shop

Before anyone quotes a migration, sort the store into two piles. The first pile belongs to the Storefront theme: templates, a stylesheet, Customizer settings and whatever your developer put in a child theme. The second belongs to WooCommerce and its extensions: the products, the people who bought them, the money they paid and the money they will pay next month. The first pile is small and gets rebuilt. The second pile is large and gets moved, record by record, with nothing left on the floor.

Read the table bottom to top and you have the risk order. A misplaced font is an afternoon. A missed subscription renewal is a refund, an apology and a customer who now reads your emails with suspicion. The WooCommerce to Next.js guide covers the store side for any theme; this page adds what is particular to Storefront.

A theme on critical fixes, and a block theme in beta

Nobody has to leave Storefront this month. It still works, and WooCommerce still ships fixes: version 4.6.2 arrived on December 9, 2025 and cured product page timeouts on WordPress 6.9. But the repository's STOREFRONT_STATUS.md limits work to critical bugs, broad-impact bugs, compatibility and release fixes, and most enhancement requests are closed. The readme still says tested up to WordPress 6.5 and WooCommerce 8.8, two numbers that look older every time WooCommerce ships a release. Our Storefront vs Next.js comparison weighs that status in full.

That distinction decides the whole project. Swapping Storefront for Purple keeps every order, extension and plugin where it is and changes the paint. Moving to Next.js changes the building. If you are unsure which problem you have, a free site audit of the live store will tell you before anybody spends money on the wrong one.

Read the child theme before anyone writes code

Storefront was built to be customized through hooks rather than template overrides, so a mature store's personality usually sits in one file: the child theme's functions.php. That file is a map of every decision a previous developer made, and it is short enough to read in an hour. We list every add_action and remove_action call, because each one is a feature the new store must either reproduce or deliberately drop.

• storefront_header changes. Moved logos, extra search bars, a removed secondary menu or a phone number squeezed beside the cart. These become plain header component props.
• storefront_before_content and storefront_homepage changes. Promo bars, trust badges and the homepage sections that template-homepage.php assembles. Each turns into a section the owner can edit.
• WooCommerce hooks in the same file. Snippets that reorder the single product summary, add a size chart or hide a field at checkout. These are business rules, so they get written down and tested, not guessed.
• Customizer theme mods. Header background, link and button colors. Export them so the new design starts from your real values rather than someone's memory of them.
• Paid Storefront add-ons. If an older extension changed layouts, note what it did on the page; the extension itself does not come along.

Anything odd you find here has often caused a ticket already. If the header vanished or styles refused to change, our guides to a Storefront header that is not showing and Storefront CSS that will not update explain the usual culprits, which helps separate deliberate customization from accumulated patches.

Catalog, customers, orders, subscriptions: moving what carries money

Products and categories

Export every product type the store uses: simple, variable, grouped and any type an extension added. Variations carry their own SKUs, prices, stock and images, so they travel as children of the parent product, never flattened. Categories keep their hierarchy and slugs, because those slugs are URLs Google already knows. Attributes, tags, reviews and gallery images go too. Before import we count everything on both sides, because a catalog that arrives with 1,204 variations instead of 1,206 looks fine until someone orders a medium in teal.

Customers and their passwords

Customer records move with names, emails and saved addresses. Passwords cannot be decrypted, by design, so there are two honest options: import WordPress's password hashes and check them on each customer's first login, or send a polite set-your-password email at launch. The first is invisible to shoppers. The second is simpler and also cleans out dormant accounts.

Order history

Older stores keep orders in the WordPress posts table; newer ones use WooCommerce's high-performance order storage. Some run both in sync, which is where HPOS sync problems come from, so confirm which copy is authoritative before exporting. Orders arrive as history: line items, totals, tax, shipping, notes and status, with original order numbers kept so your accountant and your customers' emails still agree.

Subscriptions and saved cards

Card numbers are not stored in WordPress. Your gateway holds them and WooCommerce keeps references to customers and payment methods. Keep the same processor account and those references can be mapped to the new store, so renewals continue without anyone retyping a card. Switch processors and some customers will have to re-enter payment details. Either way, the cutover is timed around the renewal calendar. If renewals already misfire, read WooCommerce subscriptions not renewing before migrating a fault along with the data.

The Storefront store move in eleven steps

This is the order we follow, built around one rule: the old store keeps taking orders until the new one has proved it can.

1. 1

   Inventory the stack

   List Storefront version, child theme files, WooCommerce version, every extension and what each one does at checkout, in emails or on product pages.

2. 2

   Crawl every live URL

   Products, categories, tags, pages, posts, and the cart, checkout and my-account endpoints. Pull the most visited and most linked pages from analytics and Search Console.

3. 3

   Export the catalog

   Products, variations, categories, attributes, images and reviews, with counts recorded so the import can be checked line by line.

4. 4

   Rebuild the design in code

   Turn Customizer values into tokens and the child theme's hook changes into components, then build product, category, cart and account pages against real data.

5. 5

   Connect the same payment processor

   Wire checkout to your existing gateway account in test mode, with tax and shipping rules rebuilt from WooCommerce's settings.

6. 6

   Import customers and order history

   Bring in accounts, addresses and past orders, then spot-check a sample of customers who have bought many times.

7. 7

   Stage the subscriptions

   Map each active subscription to its payment reference and next renewal date, and pick a cutover window clear of the renewal peak.

8. 8

   Write the redirect map

   Every old URL that changes gets a permanent redirect to its closest new match, checked in bulk before launch.

9. 9

   Run test orders

   Buy simple and variable products, apply coupons, trigger refunds and confirm every order email lands.

10. 10

    Sync the last-minute changes

    Freeze catalog edits, re-export orders and customers created since the first import, then switch DNS.

11. 11

    Watch the first month

    Monitor Search Console for crawl errors, checkout completion and renewal runs, and fix any stray redirect within the day.

Timing depends far more on extensions and subscriptions than on product count. Our pages on migration timelines and what a migration costs show how those drivers turn into a schedule and a fixed quote.

The third option

Athena CMS, with AI agents on staff.

Not a theme and not a blank Next.js repo. The content system we put behind every custom site: plain fields, a real preview, every version kept, and AI agents that handle the chores a plugin only nags you about.

• PPicassoImages
• AApolloSite analysis
• AAresCompetitor watch
• PPrometheusContent holes
• AAtlasPage depth and structure
• DDelphiAI search visibility

ZDAOAand 12 more agents. Two come with Athena; the rest are monthly add-ons.

Meet the agentsTake the Athena tour

PPicassoWeekly · ImagesAApolloWeekly · Site analysis

Product URLs, cart links and the redirect map

WooCommerce stores usually follow the bases set on the Permalinks screen, commonly /product/ for items and /product-category/ for collections. The cheapest SEO decision you will ever make is to keep those paths in the new store. Next.js routes are written in code, so matching them is a one-time job, and a kept URL needs no redirect at all. Where you do want cleaner paths, the reasoning is in our URL structure guide.

• Product and category pages keep their slugs or redirect one to one, never to the homepage.
• Cart, checkout and my-account move to new routes, with redirects so bookmarked account links still work.
• Query-string links such as add-to-cart buttons in old emails and sorting parameters get handled on purpose, not left to 404.
• Image URLs under wp-content/uploads, including the resized copies with dimensions in their names, redirect where they rank in image search.
• Shopping feeds that point at product URLs get updated the day you launch, so ads do not land on redirects.

The full method lives in WordPress to Next.js redirects, and the rankings checklist in migrating without losing SEO. Product photography gets its own pass, since next/image resizes and serves modern formats from originals: see moving WordPress images.

Keeping WooCommerce in the back room

Some store owners ask whether they can keep WooCommerce for orders and put only the front end on Next.js. They can. WooCommerce has a REST API, so a Next.js storefront can read products and hand orders back while staff keep using the WooCommerce screens they know. It is a sensible bridge for a large store with complex fulfillment. It also keeps WordPress, its plugins and its update schedule alive behind the scenes, which is the stack many owners were trying to leave. We lay out the trade in keeping WordPress as the CMS.

For most Storefront shops, the cleaner answer is a full move with commerce built into the new site. That is what our Next.js development work delivers, and the reasoning for stores in particular is set out in WooCommerce vs Next.js ecommerce.

Running the shop after launch, with Athena at the counter

Storefront owners are used to the WooCommerce product screen, a wall of tabs and meta boxes that a dozen extensions have each added to. In Athena CMS, the product is a set of plain fields with a real preview, and every earlier version is kept, so last week's price is one click away. Built-in e-commerce means no extension to renew for the basics, and Stripe subscription billing covers repeat orders and memberships.

The agents take on what a busy shop never gets to. Picasso makes sure product images are described, sized and never missing. Demeter drafts seasonal offers for approval. Echo handles reviews. Argus watches for broken links, failing forms and slow pages, and Aegis checks daily for intrusions. The switch itself is described step by step at switching from WordPress, and our hosting and maintenance plans keep the new store updated, backed up and watched.

Change the paint and you have a new theme. Change the building and you have a new store.

When we would tell you to stay put

A store with forty products, steady sales and no complaints about speed does not need a rebuild. It needs current updates, a staged test before each WooCommerce release, and a look at what loads on each page; our Storefront speed guide and Storefront with WooCommerce cover that ground. If menus or layouts break in the meantime, start with the Storefront mobile menu fix or Storefront WooCommerce layout problems, and call our WooCommerce repair service when it is beyond a snippet.

Move when the store is a serious part of the business: ad spend riding on product page speed, custom pricing or bundles extensions cannot handle cleanly, or a plugin list that has become a second job. Browse the rest of the WordPress to Next.js guides, ask for a quote on a Next.js rebuild, and if cash flow matters, ecommerce financing spreads the cost.