WooCommerce-Produktseite anpassen: so gestaltet ihr sie individuell

Die Standard-Produktseite von WooCommerce funktioniert, aber sie sieht aus wie bei allen anderen. Wer die WooCommerce-Produktseite anpassen und individuell gestalten will, hat mehr Spielraum als viele denken. Dieser Beitrag zeigt die drei Wege, die Elemente, auf die es ankommt, und die Pflichtangaben, die ihr nicht vergessen dürft. Stand: Oktober 2026.

Drei Wege, die Produktseite anzupassen

1. Block-Editor und Produktvorlage. WooCommerce baut Produktseiten aus Blöcken. Ihr bearbeitet die Vorlage im Website-Editor von WordPress: Reihenfolge der Elemente, Abstände, Farben, Schriften. Das ist der schnellste Weg und braucht keinen Code. Er passt, wenn euer Theme Blöcke unterstützt.

2. Page Builder. Mit Elementor oder Bricks gestaltet ihr die Vorlage visuell und mit mehr Freiheit: eigene Abschnitte, Tabs, Vergleichstabellen, Videos. Wir bauen Shops gern mit Bricks, weil sich Design und Daten sauber verbinden lassen. Wie wir Elementor und Bricks vergleichen, steht im Beitrag Elementor oder Bricks.

3. Code im Theme. Wenn eure Produktseite eigene Logik braucht, etwa einen Konfigurator, berechnete Felder oder Abhängigkeiten zwischen Varianten, führt kein Weg an Entwicklung vorbei. Das ist der aufwendigste, aber flexibelste Weg.

Faustregel: Fangt mit dem Block-Editor an, nehmt einen Page Builder, wenn das Design mehr verlangt, und programmiert nur, was sich nicht anders lösen lässt.

Schritt für Schritt: die Produktvorlage im Block-Editor bearbeiten

So geht ihr vor, wenn euer Theme Blöcke unterstützt:

1. In WordPress unter „Design“ den Website-Editor öffnen und bei den Vorlagen die Vorlage „Einzelnes Produkt“ wählen.
2. Die Blöcke prüfen, die WooCommerce mitbringt: Produktbilder, Titel, Preis, Kurzbeschreibung, „In den Warenkorb“, Produktdetails mit Tabs, ähnliche Produkte.
3. Reihenfolge und Spalten anpassen. Bilder links, Kaufbereich rechts ist üblich, auf dem Handy folgen Bilder, Titel, Preis, Button untereinander.
4. Abstände, Farben und Schriften im Stilbereich des Themes festlegen, damit alle Produkte gleich aussehen.
5. Eigene Abschnitte ergänzen: ein Hinweis auf Versand, ein Block mit Rückgabeinfos, eine Reihe mit Vorteilen.
6. Auf Handy, Tablet und Desktop prüfen, mit einem Produkt mit vielen Varianten und einem ohne.
7. Erst dann veröffentlichen. Wer eine Vorlage ändert, ändert alle Produkte gleichzeitig.

Für einzelne Produkte, die anders aussehen sollen, legt ihr eine eigene Vorlage an und weist sie nur diesen Produkten zu.

Varianten, Verfügbarkeit und Lieferzeit

Bei Produkten mit Größen oder Farben entscheidet die Variantenauswahl, ob jemand kauft. Zeigt nicht verfügbare Varianten sichtbar an, statt sie zu verstecken, und nennt, wann sie wieder lieferbar sind. Der Preis und das Bild sollten sich mit der Auswahl ändern. Bei Produkten, die nicht sofort lieferbar sind, gehört die Lieferzeit neben den Preis, nicht ins Kleingedruckte am Seitenende. Das ist auch rechtlich sinnvoll, siehe weiter unten.

Bei Shops mit besonderen Wünschen stoßen die Standardfelder an Grenzen. In Shopify lösen wir das über Metafelder, in WooCommerce über eigene Produktfelder. Für Bettina Barty, einen Shopify-Shop für Körperpflege, steuern solche Felder zum Beispiel Streichpreise, Hinweise am Produktbild und eine Probenfunktion. Das Prinzip ist in beiden Systemen gleich: Die Information steckt einmal im Produkt, und die Vorlage zeigt sie überall gleich an.

Bilder und Video: der größte Hebel

Kund:innen können das Produkt nicht anfassen. Bilder ersetzen das.

• Mehrere Ansichten: Vorderseite, Rückseite, Detail, das Produkt im Einsatz, ein Größenvergleich.
• Video für Produkte, die erklärt werden müssen. Kurz, ohne Ton verständlich, lokal eingebunden statt über Fremdanbieter.
• Einheitlicher Look: gleiche Hintergründe, gleiche Ausschnitte, gleiches Seitenverhältnis. Das wirkt ruhig und hochwertig.
• Technik: Bilder in passender Größe und modernem Format wie WebP oder AVIF. WooCommerce lädt Produktbilder seit Version 10.6 standardmäßig verzögert nach (Lazy Loading). Das erste, sichtbare Bild sollte davon ausgenommen sein, sonst startet die Seite langsamer.

Ladezeit und Core Web Vitals

Eine schöne Seite, die langsam lädt, verkauft schlecht. Google misst drei Werte aus echten Nutzungsdaten:

• LCP (Ladezeit des größten Elements): unter 2,5 Sekunden
• INP (Reaktionszeit auf Eingaben): unter 200 Millisekunden
• CLS (Verschiebungen im Layout): unter 0,1

Was meist hilft: Plugins ausmisten, die die Produktseite beschweren, Bilder verkleinern, Schriften lokal einbinden, Caching einrichten und Skripte nur laden, wo sie gebraucht werden. Die Werte seht ihr in der Google Search Console unter „Core Web Vitals“.

Aufbau der Seite: was wohin gehört

Im sichtbaren Bereich, ohne zu scrollen, gehören hin:

• Titel, Preis, Verfügbarkeit und Lieferzeit
• Varianten (Größe, Farbe) mit klarer Auswahl
• „In den Warenkorb“ als deutlichster Button der Seite
• ein Hinweis auf Versand und Rückgabe

Darunter folgen Beschreibung, technische Daten und Bewertungen.

Benutzerdefinierte Tabs halten lange Informationen übersichtlich: „Technische Daten“, „Lieferumfang“, „Pflege“, „Downloads“. Wichtig ist, dass jede Information im Tab pro Produkt pflegbar ist und nicht in einem Freitext verschwindet. Dann bleiben auch tausende Produkte gleichmäßig aufgebaut.

Vertrauen schaffen

• Bewertungen: Echte Bewertungen helfen mehr als jedes Siegel. Zeigt auch kritische, das macht die guten glaubwürdiger. Der Reviews-Block von WooCommerce unterstützt Antworten des Shops.
• Versand und Rückgabe in einem Satz direkt am Kaufbutton
• Bekannte Zahlungsarten mit Logos
• Siegel nur, wenn ihr sie wirklich habt

Pflichtangaben auf der Produktseite

In Deutschland sind einige Angaben vorgeschrieben. Die Produktseite ist der Ort dafür:

• Preis inklusive Mehrwertsteuer, Hinweis auf Versandkosten
• Lieferzeit
• Grundpreis bei Waren, die nach Gewicht, Volumen oder Länge verkauft werden
• seit der Produktsicherheitsverordnung (GPSR): Name, Anschrift und E-Mail-Adresse des Herstellers, bei Herstellern außerhalb der EU eine verantwortliche Person in der EU, eine Kennzeichnung des Produkts und gegebenenfalls Warnhinweise, jeweils direkt im Angebot

Mehr dazu in WooCommerce rechtssicher betreiben. Welche Angaben für euer Sortiment gelten, klärt eure Rechtsberatung.

Strukturierte Daten

Damit Google Preis, Verfügbarkeit und Bewertungen lesen kann, braucht die Produktseite strukturierte Daten nach schema.org (Typ „Product“). WooCommerce liefert eine Grundausstattung. Prüft sie mit dem Test für Rich Results von Google und achtet darauf, dass die Angaben mit der sichtbaren Seite übereinstimmen: aktueller Preis, richtige Verfügbarkeit, nur echte Bewertungen. Dieselben Daten helfen auch KI-Assistenten wie ChatGPT, Claude und Gemini, Produkte richtig einzuordnen.

Fünf Fehler auf Produktseiten

1. Zu viele Plugins für Kleinigkeiten. Jedes Plugin lädt Skripte auf jeder Produktseite. Ein Badge oder ein Tab braucht selten ein eigenes Plugin.
2. Bilder in Originalgröße. Ein Foto mit mehreren Megabyte verlangsamt die Seite, ohne dass der Besucher einen Unterschied sieht.
3. Beschreibung nur aus dem Herstellertext. Dieselben Sätze stehen bei zehn anderen Shops. Wer eigene Informationen ergänzt, ist für Google und KI-Assistenten interessanter.
4. Kaufbutton rutscht auf dem Handy nach unten. Prüft, dass „In den Warenkorb“ ohne langes Scrollen erreichbar ist.
5. Pflichtangaben fehlen oder stehen nur verlinkt. Grundpreis, Lieferzeit und GPSR-Angaben gehören in das Angebot selbst.

Testen, bevor ihr live geht

• Handy zuerst: Ein echtes Gerät, nicht nur die Vorschau. Variante wählen, in den Warenkorb legen, zur Kasse gehen.
• Geschwindigkeit: Mit dem Bericht „Core Web Vitals“ in der Search Console und einem Messwerkzeug wie PageSpeed Insights prüfen, ob LCP, INP und CLS im grünen Bereich liegen.
• Strukturierte Daten: Mit dem Test für Rich Results einzelne Produkte prüfen.
• Tastatur: Lässt sich alles ohne Maus bedienen? Das gehört zur Barrierefreiheit.
• Nach dem Livegang: Messt Absprungrate und Warenkorbrate der Produktseiten über einige Wochen, bevor ihr weiter ändert. Ein Umbau, der nicht gemessen wird, bleibt eine Vermutung.

Wann sich ein individueller Umbau lohnt

Wenn eure Produkte erklärungsbedürftig sind, wenn Kund:innen konfigurieren, vergleichen oder aus vielen Varianten wählen, oder wenn eure Conversion-Rate hinter dem Markt zurückbleibt. Bei medicross haben wir Onlineshop, Webdesign und SEO zusammen umgesetzt. Die Conversion-Rate stieg im ersten Jahr von 3,9 % auf 4,9 %.

Wenn ihr eure Produktseiten umbauen wollt, schaut auf die Seite WooCommerce-Agentur oder auf unser Angebot für E-Commerce. Wie ein Shop-Projekt insgesamt abläuft, steht in Onlineshop erstellen lassen.