Guide
Lovable to WooCommerce: Turn Pages Into a Store
Lovable builds a React app, so its "shop" is layout, not commerce. To sell, you move the design to WordPress and let WooCommerce handle products, cart and checkout. Our converter maps Lovable product listings and product pages to WooCommerce markup and copies the cart link, then you add real products, payments, tax and shipping in WordPress. Anything driven by React state, Supabase or an API does not come across and has to be rebuilt with plugins.
What a Lovable store actually is
A Lovable project is React and TypeScript with Tailwind CSS and shadcn/ui. A product grid there is a loop over an array in your code, or a fetch from a service you wired up. A product page is a route with a title, some images, a price string and a button.
None of that is a store in the commerce sense. There is no order record, no stock count, no tax table, no payment processor, no emails after purchase. If you added a checkout through an external service or Supabase, that lives outside the exported code and does not travel with it.
WooCommerce supplies all of those parts. It stores products as a post type, handles variations and stock, calculates tax and shipping, runs the cart and checkout, takes payment through gateways, and sends order emails. So the sensible split is: keep the Lovable design, hand the commerce to WooCommerce.
What converts from Lovable to WooCommerce
Our converter reads the Lovable ZIP or GitHub repository and writes a WordPress block theme. For shops, it recognises product listings and product pages and converts them, and it keeps the cart link in the header. The design tokens land in theme.json, so prices, buttons and cards keep your Tailwind type scale and colors.
The rest of the page converts like any other Lovable page: sections, grids and flex rows become columns blocks, cards and headings keep their structure, images are copied into the theme, Google Fonts are declared, and header navigation is rebuilt as a real menu. Per-page titles and descriptions from TanStack Start heads are written to Yoast, Rank Math or SEOPress.
- Product listings become a WooCommerce listing layout instead of a hard-coded React grid.
- Product pages convert with gallery area, title, price and add-to-cart position in place.
- Cart link in the header is kept and points at the WooCommerce cart.
- Palette and fonts move into
theme.json, so WooCommerce output inherits your colors. - Images and logo are copied into the theme folder, not hot-linked from Lovable.
What you have to build yourself
Be clear about the gap before you start. The converter rebuilds layout and content. It does not create your catalogue, and it cannot move data that was never in the code.
Anything that depended on custom React state or event handlers is gone by design: quantity steppers, filter buttons, mini-cart drawers, variant pickers that swapped images on click. In WordPress those behaviours come from WooCommerce itself or from plugins, not from your old JavaScript. Supabase, authentication, dashboards and API calls are not converted either.
Carousels, tabs and modals are approximated in their default state, so a product gallery slider arrives as a static set of images. Absolutely positioned decorations, canvas, Lottie and third-party widgets are left out. The full list is on supported features.
- Products are created in WordPress, by hand or by CSV import.
- Prices, stock and variations are product data, not theme markup.
- Payments need a WooCommerce gateway and an account with the provider.
- Tax and shipping are configured in WooCommerce settings for your regions.
- Accounts and orders come from WooCommerce, not from your old auth code.
From Lovable project to a working store
Here is the order we recommend. Do the conversion first, then the commerce setup, then the content. That way you see your own design while you enter products.
Set up locally or on a staging site and tick Settings → Reading → "Discourage search engines from indexing this site" while you work. Uncheck it before launch.
- Get the code out. Use GitHub sync on any plan, or "Download codebase" for a ZIP on a paid plan. See how to export Lovable code.
- Convert the project. Open the converter, upload the ZIP or connect the repository, and let it build the block theme.
- Review side by side. The review screen shows the converted site next to the original in WordPress Playground, in your browser.
- Install the theme. In WordPress go to
Appearance → Themes → Add New → Upload Theme → Activate. Pages are created on activation and the front page is set. - Install WooCommerce from the plugin directory and run its setup wizard: store address, currency, payments, tax, shipping.
- Add products with images, prices, stock and categories, then check the shop and product templates in
Appearance → Editor. - Test a real order end to end in a sandbox or test mode before you take live payments.
Fitting the design around WooCommerce templates
WooCommerce renders shop, product, cart and checkout pages through its own templates. In a block theme you edit them in the Site Editor at Appearance → Editor → Templates. Your converted header and footer template parts appear on those pages automatically, so the store feels like the rest of the site straight away.
Expect small differences on the product page. Lovable gave you a layout drawn by hand; WooCommerce gives you blocks for gallery, title, price, add to cart, description and related products. The order and spacing are yours to arrange, but the pieces are fixed. We think it is better to accept the WooCommerce structure and restyle it than to recreate a static copy that cannot sell.
Styling is mostly theme.json work. Colors, fonts and spacing you set there apply to WooCommerce blocks too, because they use the same design tokens. If you need per-element tweaks, use the Styles panel in the Site Editor rather than editing plugin templates.
If the converted pages need corrections, every account includes two free AI-fix attempts. The fix agent reads the source project, measures both pages and edits the theme; instructions are up to 2,000 characters and each fix runs up to 20 tool steps. Credits beyond that are on pricing.
Launch checks for a Lovable WooCommerce store
Commerce has more ways to fail quietly than a brochure site. Walk this list before you point the domain.
Keep an eye on SEO as well. Product pages need unique titles and descriptions, and WooCommerce output should be reachable at clean URLs. Set the structure in Settings → Permalinks and edit slugs per page. For the background on what crawlers saw on the Lovable side, read is Lovable good for SEO.
- Test checkout with a test payment, then with one real small order.
- Order emails arrive for both you and the customer, and not in spam.
- Tax and shipping produce the totals you expect for each region you sell to.
- Stock decreases after an order and sold-out products behave correctly.
- Cart and checkout pages exist and are set in WooCommerce settings.
- Mobile layout works; WordPress stacks columns, so re-check product grids.
- Indexing is on: uncheck "Discourage search engines from indexing this site".
- Redirects from
public/_redirectscarried over, so old Lovable URLs still resolve.
When to skip the conversion
If your Lovable project is a real application, with logins, dashboards and API calls, converting it to a theme is the wrong move. Those screens are reported, not converted. Keep the app where it is and build the shop separately.
If you only ever planned to sell two or three items, a hosted checkout link on the existing Lovable site may be enough. Keep it on Lovable hosting and skip WordPress until the catalogue grows.
The conversion pays off when you want a catalogue, orders, customer accounts and content in one place, with your Lovable design intact. For a wider comparison, see Lovable vs WordPress. For WooCommerce features and settings beyond what we list here, check the WooCommerce documentation at woocommerce.com, and for Lovable specifics check Lovable's docs.
FAQ
Does Lovable have WooCommerce built in?
No. Lovable builds React and TypeScript apps with Tailwind CSS and shadcn/ui, so a shop there is layout and sample data. WooCommerce is a WordPress plugin and runs on WordPress. To use it you move the Lovable design into a WordPress theme and install WooCommerce there.
Do my Lovable products become WooCommerce products automatically?
No. The converter maps product listings and product pages to WooCommerce layout and keeps the cart link, but it does not create catalogue data. You add products, prices, stock and variations in WordPress by hand or by CSV import. The design is ready before you start typing.
What parts of a Lovable shop are not converted?
Custom React state and event handlers are not converted, so filters, quantity steppers and mini-cart drawers have to come from WooCommerce or plugins. Supabase, authentication, dashboards, API calls and third-party widgets are also left out. Carousels, tabs and modals arrive in their default state only.
Can I keep my Lovable design on WooCommerce pages?
Mostly, yes. Your header and footer template parts and the palette and fonts in theme.json apply to WooCommerce pages too. The product, cart and checkout templates use WooCommerce blocks, so the structure is fixed, but you can rearrange and restyle them in Appearance then Editor.
How much does the conversion cost?
Conversion, review and the theme download are free, and every account includes two free AI-fix attempts. Paid plans add credits and saved projects: Starter is $20 for 666 credits and one saved project, Studio is $60 for 2000 credits and five saved projects. WooCommerce itself is a separate WordPress plugin.