D'SKIN — WordPress to Astro Migration

The Challenge

D’SKIN, a Chilean natural cosmetics brand, had an existing WordPress + WooCommerce site that was showing its age. The client needed a faster, more modern web presence while retaining the ability to manage content easily and keep their e-commerce functionality intact.

The main goals were:

• Dramatically improve page speed and Core Web Vitals
• Provide a visual content editing experience for the marketing team
• Maintain WooCommerce for product management and checkout
• Support bilingual content (Spanish/English)
• Modern, premium aesthetic that reflects the brand’s natural skincare identity

The Solution

I architected a hybrid approach: Astro for the frontend with TinaCMS for visual content editing, while keeping WordPress + WooCommerce as a headless backend for product data and checkout.

┌─────────────────┐   ┌──────────────┐   ┌─────────────────┐
│  Astro Site     │──▶│   TinaCMS    │──▶│  Static Build   │
│  (Frontend)     │   │  (Content)   │   │   (Vercel)      │
└─────────────────┘   └──────────────┘   └─────────────────┘
        │
        ▼
┌─────────────────┐
│   WordPress     │
│   WooCommerce   │
│   (Products)    │
└─────────────────┘

Key Features Implemented

Bilingual Support (ES/EN) — Full i18n implementation with Spanish as default, English routes at /en/* with complete translation, separate content collections per language (26+ blog posts each), localized UI elements, dates, currency formatting, navigation, and SEO meta tags per language.

Visual Content Management with TinaCMS — Real-time split-view preview editing, with editable sections and visual indicators: home page hero slider (4 configurable products), Best Sellers section with WooCommerce integration, About page with team gallery, treatment services catalog, and blog posts with rich-text editing.

E-commerce Integration — Product catalog fetched from WooCommerce REST API in real-time, client-side cart drawer with localStorage persistence, multi-product cart transfer to WooCommerce checkout, SSO authentication between Astro and WordPress (HMAC-SHA256 signed tokens), stock status and pricing synced automatically, with a fallback mechanism if the API is unavailable.

Interactive Components — Cart drawer (380px sidebar desktop, full-width mobile), hero slider with configurable products, Google Reviews carousel, dynamic Instagram feed, WhatsApp floating button, and smooth scrolling with Lenis.

Performance Optimizations — Static site generation with Astro’s partial hydration, React components that only hydrate when needed (client:load, client:visible), images optimized and served via Vercel’s edge CDN, and Lighthouse scores consistently 95+.

Results

The migration delivered significant improvements:

• Page Load Time: From 4.2s to under 1s (LCP)
• Lighthouse Score: From 62 to 98 (Performance)
• Content Updates: From developer-dependent to self-service visual editing
• Hosting Costs: Reduced by 60% moving to Vercel

The client’s marketing team can now update blog posts, treatment descriptions, product showcases, and page content without any technical assistance, while the site loads nearly instantly for visitors.

Technical Highlights

TinaCMS Visual Editing — Custom React wrappers enable real-time preview with the useTina() hook.

WooCommerce API Integration — Real-time product data with graceful fallbacks (getBestSellers(), getProductsByIds(), Chilean price formatting).

Cart Transfer System — A custom WordPress plugin handles multi-product cart transfer with SSO: signed tokens (valid 5 minutes) with a shared secret, automatic user session creation on WordPress, and a seamless checkout experience.

This project demonstrates how a traditional WordPress site can be modernized with a headless architecture, combining the best of static site performance with the flexibility of a visual CMS and the robustness of WooCommerce for e-commerce.