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.

Technical Architecture

┌─────────────────┐     ┌──────────────┐     ┌─────────────────┐
│   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, and navigation
• SEO meta tags per language

Visual Content Management with TinaCMS

• Real-time split-view preview editing
• Editable sections with visual indicators:
  • Home page hero slider (4 configurable products)
  • Best Sellers section with WooCommerce integration
  • About page with team gallery
  • Treatment services catalog
  • 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
• Fallback mechanism if API is unavailable

Interactive Components

• Cart drawer (380px sidebar desktop, full-width mobile)
• Hero slider with configurable products
• Google Reviews carousel
• Dynamic Instagram feed integration
• WhatsApp floating button
• Smooth scrolling with Lenis

Performance Optimizations

• Static site generation with Astro’s partial hydration
• React components only hydrate when needed (client:load, client:visible)
• Images optimized and served via Vercel’s edge CDN
• 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 useTina() hook:

// Visual editing wrapper example
export default function BestSellersWrapper({ query, variables, data, products }) {
  const { data: tinaData } = useTina({ query, variables, data });
  return (
    <section data-tina-field={tinaField(bestSellers, 'title')}>
      {/* Editable content with visual indicators */}
    </section>
  );
}

WooCommerce API Integration

Real-time product data with graceful fallbacks:

// Fetch best-selling products
const products = await getBestSellers(3);

// Fetch specific products by ID
const products = await getProductsByIds([7183, 7176, 7868]);

// Format price in Chilean format
formatPrice(21990); // "$21.990"

Cart Transfer System

Custom WordPress plugin handles multi-product cart transfer with SSO:

• Signed tokens (valid 5 minutes) with shared secret
• Automatic user session creation on WordPress
• Seamless checkout experience

Tech Stack

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.