E-Commerce Website aufbauen: Online-Shop Guide 2025

<?php
// functions.php - Custom Product Fields
add_action('woocommerce_product_options_general_product_data', 'add_custom_fields');
function add_custom_fields() {
    woocommerce_wp_text_input([
        'id' => '_lieferzeit',
        'label' => 'Lieferzeit',
        'placeholder' => 'z.B. 2-3 Werktage',
        'desc_tip' => true,
        'description' => 'Geschätzte Lieferzeit'
    ]);
 
    woocommerce_wp_text_input([
        'id' => '_garantie',
        'label' => 'Garantie',
        'placeholder' => 'z.B. 2 Jahre',
        'type' => 'text'
    ]);
}
 
// Felder speichern
add_action('woocommerce_process_product_meta', 'save_custom_fields');
function save_custom_fields($post_id) {
    update_post_meta($post_id, '_lieferzeit', $_POST['_lieferzeit']);
    update_post_meta($post_id, '_garantie', $_POST['_garantie']);
}

// app/checkout/page.jsx
'use client'
 
import { useState } from 'react'
import { useCart } from '@/hooks/useCart'
 
const checkoutSteps = ['Warenkorb', 'Adresse', 'Zahlung', 'Bestätigung']
 
export default function CheckoutPage() {
  const [currentStep, setCurrentStep] = useState(0)
  const { cart, total } = useCart()
 
  return (
    <div className="mx-auto max-w-4xl px-4 py-8">
      {/* Progress Indicator */}
      <div className="mb-8 flex justify-between">
        {checkoutSteps.map((step, index) => (
          <div
            key={step}
            className={`flex-1 text-center ${
              index <= currentStep ? 'text-primary' : 'text-gray-400'
            }`}
          >
            <div
              className={`mx-auto mb-2 flex h-8 w-8 items-center justify-center rounded-full ${
                index <= currentStep ? 'bg-primary text-white' : 'bg-gray-200'
              }`}
            >
              {index + 1}
            </div>
            <p className="text-sm">{step}</p>
          </div>
        ))}
      </div>
 
      {/* Step Content */}
      {currentStep === 0 && <WarenkorbStep />}
      {currentStep === 1 && <AdresseStep />}
      {currentStep === 2 && <ZahlungStep />}
      {currentStep === 3 && <BestatigungStep />}
 
      {/* Navigation */}
      <div className="mt-8 flex justify-between">
        {currentStep > 0 && (
          <button
            onClick={() => setCurrentStep(currentStep - 1)}
            className="rounded border px-6 py-2"
          >
            Zurück
          </button>
        )}
 
        {currentStep < 3 && (
          <button
            onClick={() => setCurrentStep(currentStep + 1)}
            className="bg-primary ml-auto rounded px-6 py-2 text-white"
          >
            Weiter
          </button>
        )}
      </div>
    </div>
  )
}

// app/api/checkout/route.js
import Stripe from 'stripe'
 
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)
 
export async function POST(request) {
  const { items } = await request.json()
 
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card', 'sepa_debit', 'sofort'],
    line_items: items.map((item) => ({
      price_data: {
        currency: 'eur',
        product_data: {
          name: item.name,
          images: [item.image],
        },
        unit_amount: item.price * 100, // Cent
      },
      quantity: item.quantity,
    })),
    mode: 'payment',
    success_url: `${process.env.NEXT_PUBLIC_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/cart`,
  })
 
  return Response.json({ url: session.url })
}

// lib/shipping.js
export function calculateShipping(cart, postalCode) {
  const totalWeight = cart.reduce((sum, item) => sum + item.weight * item.quantity, 0)
  const cartTotal = cart.reduce((sum, item) => sum + item.price * item.quantity, 0)
 
  // Kostenloser Versand ab 50€
  if (cartTotal >= 50) {
    return 0
  }
 
  // Gewichtsbasiert
  if (totalWeight < 2000) {
    // <2kg
    return 4.99
  } else if (totalWeight < 5000) {
    // <5kg
    return 6.99
  } else {
    return 9.99
  }
}

// E-Mail nach 1 Stunde
Subject: Dein Warenkorb wartet auf dich 🛒
 
Hi [Name],
 
du hast Produkte in deinem Warenkorb gelassen. Möchtest du deinen Einkauf abschließen?
 
[Produkte anzeigen]
 
// E-Mail nach 24 Stunden mit Rabatt
Subject: 10% Rabatt auf deinen Warenkorb 🎁
 
Hi [Name],
 
wir schenken dir 10% Rabatt, wenn du heute bestellst!
 
Code: COMEBACK10
 
[Jetzt bestellen]

// app/produkte/[slug]/page.jsx
export async function generateMetadata({ params }) {
  const product = await getProduct(params.slug)
 
  return {
    title: `${product.name} kaufen | ${product.brand} | Shop-Name`,
    description: `${product.name} von ${product.brand} ✓ ${product.price}€ ✓ Kostenloser Versand ab 50€ ✓ 30 Tage Rückgaberecht. Jetzt bestellen!`,
    openGraph: {
      title: product.name,
      description: product.shortDescription,
      images: product.images,
      type: 'product',
    },
  }
}
 
export default function ProductPage({ product }) {
  return (
    <>
      {/* Strukturdaten */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'Product',
            name: product.name,
            image: product.images,
            description: product.description,
            brand: {
              '@type': 'Brand',
              name: product.brand,
            },
            offers: {
              '@type': 'Offer',
              price: product.price,
              priceCurrency: 'EUR',
              availability: product.inStock
                ? 'https://schema.org/InStock'
                : 'https://schema.org/OutOfStock',
              seller: {
                '@type': 'Organization',
                name: 'Shop-Name',
              },
            },
            aggregateRating: {
              '@type': 'AggregateRating',
              ratingValue: product.averageRating,
              reviewCount: product.reviewCount,
            },
          }),
        }}
      />
 
      {/* Produktseite */}
    </>
  )
}