In a recent Business Bloomer Club Slack thread, a WooCommerce developer sought advice on the best way to migrate an existing WooCommerce site to a new design and theme.
Unlike typical migrations, this one required extra care as the live site had ongoing new orders, customers, and product updates, along with a loyalty program. Given the complexity, the goal was to migrate only the theme, design settings, and additional plugins without overwriting any live data.
Here’s a step-by-step guide to minimize downtime and avoid common issues.
Step 1: Prepare a Fresh Staging Environment
Start by creating a fresh staging site that mirrors the current live site, including the latest products, orders, and customer data. This can often be done through your hosting provider’s staging tool or with a migration plugin like WP Migrate DB or Duplicator.
- Why this step matters: This staging site will serve as your final testing environment before going live, ensuring any new design or theme settings do not impact existing data.
Step 2: Transfer the New Theme and Design Settings
Once the staging environment is up, transfer the new theme and design settings from your development site to this fresh staging site.
- Export and Import Theme Settings: Many themes and page builders like Beaver Builder offer built-in tools for exporting and importing settings. Use these tools to transfer your customized design settings.
- Migrate Custom CSS and Functions: If you added custom CSS or PHP code in
functions.php, copy these changes over to the staging site. - Install New Plugins: Add any additional plugins used in the new design. Be sure to configure them to match the setup on the dev site.
- Testing Tip: Once transferred, test the staging site to ensure that everything functions as expected, including the new design elements and plugins.
Step 3: Sync Content Between Live and Staging
To bring the staging site up to date with recent live-site activity, selectively sync specific data, focusing on products, orders, customers, and loyalty points.
- WooCommerce Orders and Customers: Use a plugin like WP All Import or WooCommerce Customer/Order/Coupon Export to import the latest orders and customer data from the live site.
- Products and Stock Levels: If products have been modified, export them from the live site and import them into staging, overwriting older entries as necessary.
- Loyalty Program Data: Check if your loyalty program plugin has an export/import feature. Some plugins, such as WooCommerce Points and Rewards, allow you to export points data.
- Why this step matters: Syncing ensures your staging site has all recent updates, so what you see and test there will match the final live site.
Step 4: Final Testing and Go-Live Preparation
With all settings, content, and data in sync, thoroughly test the staging site. Pay particular attention to the following:
- Checkout Process: Test a complete purchase flow to ensure the new design hasn’t disrupted payment or shipping options.
- Loyalty Program: Verify that points or rewards programs are still intact and functioning.
- Product Display: Ensure all products, categories, and images display correctly under the new theme.
If everything looks good, prepare for the final migration to the live site. It’s wise to schedule this during off-peak hours to minimize disruption.
Step 5: Migrating the Staging Site to Production
For the final go-live, you can either:
- Overwrite the live site with the staging site using a migration tool, ensuring that the live data (orders, products, customers) remains untouched, or
- Manually apply the new theme and settings to the live site if the risk of overwriting is high.
Conclusion
Migrating a WooCommerce site to a new theme while preserving live data requires careful planning and testing. Using a staging site to refine the new design, syncing updated content, and performing rigorous tests ensures a smooth transition. With these steps, you can confidently deploy a new design without disrupting ongoing orders, products, or loyalty programs.
