So bearbeiten und passen Sie Ihre WooCommerce-Produktseiten an

Die Produktseite ist entscheidend für den Verkaufsprozess. Hier entscheidet der Käufer, ob er fortfahren und den Artikel kaufen oder ohne Rückgabegarantie gehen möchte. Ihr Ziel als Online-Shop-Inhaber ist es, Website-Besucher auf Ihre Produktseiten zu bringen und sie dann die letzten Schritte in den Warenkorb legen und zur Kasse gehen zu lassen.

Zu diesem Zweck ist es wichtig, dass Ihre Produktseiten den zu verkaufenden Artikel bestmöglich bewerben. Die WooCommerce-Standardproduktvorlage ist sauber und professionell und bietet Ihnen eine solide Grundlage für Ihre Seite, auf der Sie mit den folgenden Methoden aufbauen können.

So optimieren Sie Ihre WooCommerce-Produktseitenvorlage

Es gibt eine Reihe von Möglichkeiten, wie Sie Ihre WooCommerce-Produktseiten oder -Vorlagen anpassen können. Einige Methoden sind in WooCommerce enthalten. Für andere benötigen Sie eine Erweiterung. Sie können auch den Site-Editor verwenden oder Anpassungen manuell vornehmen. Schauen wir uns jede Option genauer an.

So passen Sie Ihre WooCommerce-Produktseite mit integrierten Funktionen an

Viele Produktseitenoptimierungen können ohne Add-Ons oder Codierung durchgeführt werden. Hochwertige Fotos, aussagekräftige Beschreibungen und wichtige Produktinformationen erleichtern dem Besucher den Kauf des Produkts.

Aktivieren Sie Rezensionen und Bewertungen, um Vertrauen aufzubauen. Richten Sie verwandte Produkte, Cross-Sells und Up-Sells ein, um die durchschnittliche Bestellgröße zu erhöhen und es für Kunden einfacher zu machen, neue Artikel zu entdecken. Fügen Sie Kundenreferenzen in Ihre Produktbeschreibungen oder Registerkarten für soziale Beweise ein.

Sobald Sie Ihren Seiteninhalt optimiert haben, können Sie Ihre Produktseiten weiter verbessern, indem Sie WooCommerce-Erweiterungen verwenden, Ihre Produktseitenvorlage mit dem Site-Editor bearbeiten und sie manuell mit Code und Hooks anpassen.

So passen Sie Ihre Produktseite mit WooCommerce-Erweiterungen an

Eine Erweiterung ist ein WordPress-Plugin, das speziell entwickelt wurde, um WooCommerce-Shops zusätzliche Funktionen bereitzustellen. Nachfolgend finden Sie einige WooCommerce-Erweiterungen, mit denen Sie zusätzliche Produktinformationen bereitstellen, das Einkaufserlebnis verbessern und Ihre Seite über die Standardfunktionen hinaus erweitern können. Noch mehr Erweiterungen zur weiteren Anpassung finden Sie in der offiziellen WooCommerce-Erweiterungsbibliothek.

1. Erweiterte Produktvariation für WooCommerce

Variable Produkte sind Artikel mit Optionen wie Größe und Farbe – Entscheidungen, die der Käufer vor dem Bezahlen trifft. Am Frontend zeigt WooCommerce ein Dropdown-Menü für jedes Attribut (wie Größe oder Farbe) mit einer Liste der verfügbaren Varianten darunter an (wie Klein, Mittel oder Groß).

Für einen visuelleren Ansatz können Sie mit Advanced Product Variation for WooCommerce Produktvariationen mit Mustern (Farben, Bildern und Text), Galerien und Tabellen präsentieren. Sie können sogar Videos in Ihre Farbfelder einfügen.

Variationsmuster werden basierend auf den von Ihnen konfigurierten Einstellungen auf der Produktseite oder der Hauptseite des Shops angezeigt. Sie können Muster erstellen, indem Sie vorhandene Produktbilder und vorgestellte Bilder nutzen.

Sie können auch das Layout der Produktgalerie anpassen, indem Sie es von seiner Standardposition unter dem vorgestellten Bild auf die linke Seite verschieben.

Erfahren Sie mehr über erweiterte Produktvariationen für WooCommerce.

2. WooCommerce-Tab-Manager

Registerkarten der WooCommerce-Produktseite werden unter der Schaltfläche „Zum Warenkorb hinzufügen“ angezeigt und ermöglichen es Ihnen, zusätzliche Informationen zu präsentieren, während Schlüsselelemente wie Titel und Preis „above the fold“ bleiben.

Diese zusätzlichen Informationen können Produktmaterialien und Inhaltsstoffe, Gewichte und Abmessungen, Größentabellen, Preistabellen, Lieferzeiten, Versandkosten, Anleitungsvideos – alles beinhalten das wird dem Kunden helfen, sich beim Kauf sicher zu fühlen.

Mit WooCommerce Tab Manager können Sie die Standardregisterkarten – Lange Beschreibung, Zusätzliche Informationen und Bewertungen – umbenennen, neu anordnen und entfernen und diesen Abschnitt anpassen, indem Sie Ihre eigenen globalen, kategorieweiten und produktspezifischen Registerkarten erstellen.

Verwenden Sie das Plugin, um eine standardmäßige Tab-Reihenfolge festzulegen, die auf Produktebene überschrieben werden kann. Mit einer Drag-and-Drop-Oberfläche müssen Sie keine Designdateien ändern oder in den Code einsteigen.

Wenn Sie bereits über andere Plugins benutzerdefinierte Registerkarten haben, erkennt WooCommerce Tab Manager diese und gibt Ihnen die Möglichkeit, sie ein- oder auszublenden. Ein großer Vorteil dieses Plugins besteht darin, dass der Inhalt Ihrer Registerkarten in den Suchergebnissen Ihrer Website enthalten ist.

Erfahren Sie mehr über den WooCommerce-Tab-Manager.

3. Produkt-FAQs

Häufig gestellte Fragen oder FAQs sind eine benutzerfreundliche Möglichkeit, Produktinformationen zu organisieren und Ihren Besuchern zu präsentieren. Mit der Produkt-FAQ-Erweiterung können Sie für jedes Produkt einen eigenen FAQ-Tab mit unbegrenzten Fragen und Antworten hinzufügen.

Das Plugin funktioniert mit allen Produkttypen und fügt einen FAQ-Bereich hinzu, wenn Sie eine Produktseite erstellen oder bearbeiten.

Auf dem Frontend werden die FAQs im Ziehharmonika-Stil mit Animation angezeigt.

Erfahren Sie mehr über Produkt-FAQs.

4. Verbundprodukte

Mit Composite Products können Ihre Kunden Bausätze oder konfigurierbare Produkte bauen.

Für jedes zusammengesetzte Produkt gestatten Sie den Kunden, zwischen einer vordefinierten Auswahl aus dem vorhandenen Inventar zu wählen. Sie können bestimmten Auswahlen zusätzliche Gebühren zuweisen und bestimmte Kategorien als optional zulassen.

Beispielsweise kann eine Halskette Optionen für die Kette (Silber, Gold), den Stein (Rubin, Granat, Smaragd) und einen optionalen Anhänger (mehrere Formoptionen) enthalten.

Für jeden der Bausteine ​​des Kits – Kette, Stein und Anhänger – können Sie SKUs auswählen, aus denen der Kunde wählen kann, oder ihn eine Option aus einer ganzen Produktkategorie auswählen lassen.

Mit der bedingten Logik können Sie Optionen basierend auf früheren Entscheidungen ein- oder ausblenden (z. B. ist das rote Hemd in bestimmten Größen nicht verfügbar), und die Nachverfolgung auf Komponentenebene unterstützt eine erweiterte Bestandsverwaltung. Wenn Sie eine große Anzahl von Optionen haben, können Sie Ansichten mit Sortierung, Filterung und Paginierung für einfacheres Einkaufen erstellen.

Erfahren Sie mehr über Composite-Produkte.

5. Produktzusätze

Mit der Produkt-Add-Ons-Erweiterung können Ihre Käufer ihre Einkäufe durch kostenlose und kostenpflichtige Extras anpassen und verbessern.

Add-ons können Garantien, hochwertigere Materialien, bevorzugte Versandoptionen oder Personalisierungen wie individuelle Monogramme und Gravuren umfassen. Wenn Ihre Produkte häufig als Geschenk gekauft werden, können Sie eine Verpackungsoption oder ein Feld für Geschenknachrichten hinzufügen.

Gemeinnützige Organisationen könnten es Käufern ermöglichen, ihrem Kauf eine Spende beizufügen und die Spende zu Ehren von jemandem zu machen, indem sie einen Namen und eine Nachricht hinzufügen.

Wenn Sie WooCommerce-Buchungen haben, können Sie mit Produkt-Add-Ons Optionen für zusätzliche Dienstleistungen (Haarspülung nach dem Haarschnitt) oder VIP-Upgrades für spezielle Sitzplätze und Zugang erstellen. Es funktioniert auch mit WooCommerce-Abonnements, sodass Sie Add-Ons zu Ihren Abonnementprodukten anbieten können.

Ihre Add-Ons können benutzerdefinierte Felder enthalten, die als Textfelder, Dropdowns, Kontrollkästchen, bildbasierte Auswahlen und benutzerdefinierte Preiseingaben für Artikel wie Trinkgelder und Spenden angezeigt werden. Diese Felder können auf Ihren gesamten Katalog angewendet oder bestimmten Produkten zugewiesen werden.

Sobald Sie Ihre Add-Ons eingerichtet haben, erscheinen sie auf den Produktseiten über der Schaltfläche „In den Warenkorb“ in der von Ihnen gewählten Reihenfolge.

Erfahren Sie mehr über Produkt-Add-ons.

Passen Sie Ihre Produktseite mit dem Site-Editor an

Mit Blockdesigns können Sie das Erscheinungsbild Ihrer Produktseite anpassen, indem Sie die Vorlage für eine einzelne Produktseite im Site-Editor bearbeiten. Gehen Sie im WordPress-Adminbereich zu Darstellung → Editor .  

Wählen Sie „Alle Vorlagen durchsuchen“ aus dem Dropdown-Menü oben in der Mitte der Seite. Wählen Sie die Vorlage Einzelprodukt aus der angezeigten Liste aus.

Das Standard-Seitenlayout enthält die Kopfzeile, die Fußzeile und den WooCommerce-Einzelproduktblock, der Produktinformationen, Preise und Bildelemente anzeigt.

Sie sollten Ihre Website sichern, bevor Sie Änderungen an Ihrer Produktseitenvorlage vornehmen. Bestimmte Änderungen – zum Beispiel das versehentliche Löschen des Einzelproduktblocks und Speichern – machen es Ihren Besuchern unmöglich, einzukaufen oder einzukaufen.

So bearbeiten Sie die Kopf- und Fußzeilenvorlagen für Einzelproduktseiten

Die Registerkarte Vorlage unter Einstellungen (das Zahnradsymbol oben rechts) enthält Links zum Verwalten der Kopf- und Fußzeile. Klicken Sie auf eine der Optionen, um diesen Teil der Seitenvorlage zu verwalten. Sie können auch direkt in einen Bereich der Vorlage klicken, um mit der Bearbeitung zu beginnen. Denken Sie daran, dass alle hier vorgenommenen Änderungen auf alle Produkte angewendet werden, die die Vorlage verwenden.

In der Kopfzeile können Sie den Seitentitel und die Links in Ihrem Hauptnavigationsmenü bearbeiten und sogar neue Blöcke hinzufügen, um Ihre Produktseite speziell anzupassen. Verwenden Sie diesen Bereich, um Bilder, Text und mehr hinzuzufügen, um die Verkaufskraft Ihrer Produktseite zu steigern. Sie können einen Werbe- oder Richtlinienhinweis oder ein Banner hinzufügen, um Käufer über ein aktuelles Sonderangebot oder darüber zu informieren, wie Sie ab einem bestimmten Bestellwert kostenlosen Versand erhalten.

Sie können etwas Ähnliches mit der Fußzeile der Produktseite machen. Fügen Sie beispielsweise eine Kundenreferenz oder Informationen zu einer Richtlinie zur Zufriedenheitsgarantie hinzu.

So passen Sie den Einzelprodukttext an

Der Einzelproduktblock zeigt oben eine fettgedruckte Warnung: „Entfernen Sie diesen Block nicht! Das Entfernen dieser Sperre wird unbeabsichtigte Auswirkungen auf Ihren Shop haben.“ Nehmen Sie diese Botschaft ernst!

Sie können jedoch neue Blöcke um den Einzelproduktblock herum hinzufügen, um das Design Ihrer Produktseite vollständig anzupassen.

Verwenden Sie das +-Symbol, um Elemente über oder unter dem Block „Einzelprodukt“ hinzuzufügen, und fügen Sie dann alle Blöcke hinzu, mit denen Sie die Seite anpassen möchten.

Verwenden Sie einen Absatzblock, um aktuelle Angebote („Geben Sie 100 $ oder mehr für kostenlosen Versand aus“), eine Zufriedenheitsgarantie oder alles, was Besuchern bei der Kaufentscheidung hilft, einzubeziehen. Fügen Sie einen Videoblock hinzu, der einen Blick hinter die Kulissen Ihrer Prozesse gibt. Oder fügen Sie bestimmte empfohlene Produkte hinzu, die Sie bewerben möchten. Der Himmel ist hier die Grenze!

Und für jeden Block können Sie Einstellungen wie Hintergrundfarbe, Typografie und Abstände bearbeiten, um ihn wirklich zu Ihrem eigenen zu machen.

Passen Sie Ihre Produktseite manuell an (mit Code und Hooks)

Für erweiterte Optionen – ohne die Kosten oder Wartung von Plugins – können Sie Ihre Produktseite manuell mit Code und Hooks bearbeiten und anpassen.

Bevor Sie Änderungen an Ihren Dateien vornehmen, ist es wichtig, dass Sie sich die Zeit nehmen, WooCommerce zu sichern. Wenn Sie Jetpack VaultPress Backup verwenden, wird dies automatisch in Echtzeit für Sie erledigt. Wenn also eine Ihrer Änderungen dazu führt, dass Ihre Website ausfällt, können Sie mit nur wenigen Klicks ein Backup wiederherstellen, selbst wenn Sie keinen Zugriff auf Ihr WordPress-Dashboard haben.

Und Sie sollten auch ein untergeordnetes Thema verwenden, um diese Änderungen vorzunehmen. Andernfalls verlieren Sie möglicherweise alle Ihre Anpassungen, wenn Sie Ihr Design oder WooCommerce später aktualisieren. Eine weitere Option ist die Verwendung eines Plugins wie Code Snippets, mit dem Sie benutzerdefinierten Code zu Ihrer Website in Snippets hinzufügen können, die Sie nach Bedarf ein- und ausschalten können.

Passen Sie WooCommerce-Produktseiten mit Hooks an

Hooks ermöglichen es Websitebesitzern, Code hinzuzufügen und Seiten anzupassen, ohne die Gefahren, die mit der Bearbeitung von Kerndateien verbunden sind. Es gibt zwei Arten von Hooks: Aktionen und Filter. Mit Aktionen können Sie Code an bestimmten Stellen einfügen, während Filter es Ihnen ermöglichen, eine Variable zu manipulieren und zurückzugeben.

Sie können beispielsweise Aktionen verwenden, um ein neues Checkout-Feld hinzuzufügen, und dann Filter verwenden, um die Beschriftungen oder Platzhalter vorhandener Checkout-Felder zu ändern. Die Liste der verfügbaren WooCommerce-Hooks finden Sie hier.

Hier sind ein paar weitere Beispiele für Änderungen, die Sie mithilfe von Hooks an Ihren Produktseiten vornehmen können:

• Ändern Sie den Text der Schaltfläche „Zum Warenkorb hinzufügen“. Du könntest zum Beispiel stattdessen „Jetzt spenden“ sagen.
• WooCommerce-Breadcrumbs anpassen. Paniermehltrenner wechseln, Paniermehl ganz entfernen etc.
• Produktregisterkarten entfernen, umbenennen und neu anordnen. Fügen Sie beispielsweise eine Registerkarte Zutaten hinzu oder fügen Sie ein Video in eine der Registerkarten ein.

Passen Sie WooCommerce-Produktseiten mit CSS an

CSS ist eine Programmiersprache zur Steuerung von Designelementen (im Gegensatz zu JavaScript, das Aktionen steuert). Sie können es verwenden, um das Design Ihrer Produktseiten zu ändern. Sobald Sie die Grundlagen von CSS gelernt haben, können Sie alles anpassen, von Farben und Schriftarten bis hin zu Größen einzelner Elemente.

Sie können ganz einfach CSS-Code hinzufügen, indem Sie in Ihrem WordPress-Dashboard zu Aussehen → Anpassen → Zusätzliches CSS gehen. Wenn Sie beispielsweise die Schriftfarbe Ihrer Produkttitel ändern möchten, würden Sie den folgenden Code verwenden und den Hexadezimalcode der Farbe durch Ihren eigenen ersetzen:

 .woocommerce div.product .product_title { color: #222222; }

Wenn Sie die Farbe der Schaltfläche „Jetzt kaufen“ ändern möchten, würden Sie diesen Code verwenden und den Hex-Code wieder durch die Farbe Ihrer Wahl ersetzen:

 .woocommerce div.product .button {   background: #000000; }

Weitere Beispiele findest du in diesem Artikel von WooCommerce.

So steigern Sie die Ladegeschwindigkeit Ihrer Produktseite

Schnell ladende Websites sind sowohl für Besucher als auch für Suchmaschinen wichtig. Die Leute wollen nicht warten und Suchmaschinen wollen die Leute nicht auf leistungsschwache Websites schicken.

Es zählt buchstäblich jede Sekunde – eine Verzögerung der Ladezeit um eine Sekunde kann die Konversionsraten um 20 % reduzieren!

Jetpack Boost ist die beste Website-Geschwindigkeits- und Leistungsoptimierungslösung für WordPress. Es verfügt über einen schnellen und einfachen Einrichtungsprozess – kein Entwickler erforderlich – und bietet Ergebnisse, die die fünf besten Leistungs-Plugins in einem Kopf-an-Kopf-Test schlagen.

Nachdem Sie das kostenlose Plugin installiert haben, können Sie ein Audit durchführen und einen Bericht über Ihre aktuellen Website-Performance-Scores erhalten. Diese dienen als Benchmarks, die Sie verwenden können, um Verbesserungen an Ihren Core Web Vitals zu messen, Metriken, die Google verwendet, um die Benutzererfahrung und technische Leistung Ihrer Website zu messen.

Ein einfaches Dashboard erleichtert die Konfiguration von Optimierungsoptionen über Ein-Klick-Aktivierungen. Dies gibt Ihnen die Flexibilität, die Leistungsmodule einzeln zu testen und Jetpack Boost so zu konfigurieren, dass es perfekt in jedes Szenario passt.

Weitere Möglichkeiten zur Beschleunigung Ihrer Produktseiten finden Sie unter Neun Möglichkeiten zur Beschleunigung eines WooCommerce-Shops.

Häufig gestellte Fragen zum Anpassen von Produktseiten

Haben Sie noch Fragen? Sehen Sie sich unten die Antworten auf einige häufige an.

Was ist der beste Weg, um eine WooCommerce-Produktseite anzupassen?

Es gibt keinen einzigen besten Weg. Der beste Weg für Sie hängt von Ihrem Komfortniveau mit den verschiedenen Ansätzen ab.

Der Site-Editor gibt Ihnen die ganze Macht in die Hand, indem Sie Elemente ziehen und ablegen können, um Ihre eigene, personalisierte Produktseite zu erstellen, ohne überhaupt Code bearbeiten zu müssen. Dies ist eine hervorragende Lösung für Anfänger und Fortgeschrittene gleichermaßen!

Wenn Sie nach bestimmten zusätzlichen Funktionen suchen, sind WooCommerce-Erweiterungen eine großartige Option. Sie werden von WooCommerce geprüft und genehmigt und bieten Händlern erweiterte Anpassungsoptionen ohne benutzerdefinierten Code.

Manuelle Anpassung und Codierung bieten die größte Flexibilität, erfordern aber auch das meiste technische Wissen. Im Vergleich zur Verwendung von Blöcken oder Erweiterungen hat diese Methode die größte Chance, ein Problem zu verursachen oder sogar die Website zu beschädigen.

Sollte ich meine Website sichern, bevor ich die Produktseitenvorlage bearbeite?

Ja. Im Gegensatz zu Seiten und Beiträgen haben Websitevorlagen keinen Revisionsverlauf. Sichern Sie Ihre Website, bevor Sie Änderungen an Ihrer Produktseitenvorlage vornehmen, damit Sie sie bei Problemen schnell wiederherstellen können.

Jetpack VaultPress Backup ist ein Echtzeit-WordPress-Backup-Plugin, was bedeutet, dass Ihre Website nicht nur nach einem täglichen Zeitplan oder wenn Sie eine manuelle Kopie erstellen, gesichert wird. Stattdessen wird es jedes Mal automatisch gespeichert, wenn Sie eine Änderung an Ihrer Website vornehmen, ein Kunde eine Bestellung aufgibt oder ein Besucher einen Kommentar hinterlässt. Jedes Mal, wenn etwas Wichtiges passiert? Es ist gespeichert!

E-Commerce-Shops können es sich nicht leisten, Daten zu verlieren, insbesondere wenn diese Daten reale Kundenbestellungen darstellen. Geben Sie sich nicht mit Lösungen zufrieden, die Ihre Website nur gelegentlich speichern oder eine langwierige Kundendienstinteraktion erfordern, um Dinge wiederherzustellen, wenn ein Problem auftritt.

Mit Jetpack VaultPress Backup können Sie Ihre Website mit einem Klick wiederherstellen und schnell wieder online gehen. Mit der mobilen Jetpack-App können Sie jederzeit und überall wiederherstellen, selbst wenn die Website vollständig heruntergefahren ist.

Das Beste für Ladenbesitzer? Alle Ihre Kundendaten und Bestellungen sind geschützt und aktuell.

Was sind einige Best Practices zum Anpassen einer WooCommerce-Produktseite?

Unabhängig von der Methode, die Sie zum Bearbeiten und Anpassen Ihrer WooCommerce-Produktseite verwenden, befolgen Sie diese Best Practices, um sich selbst, Ihre Website und Ihre Kunden zu schützen.

Sichern Sie Ihre Website jedes Mal zuerst . Wenn Sie Standortcode hinzufügen oder aktualisieren, kann ein einzelner Fehler Probleme verursachen. Sie müssen bereit sein, die Website so schnell wie möglich wiederherzustellen, ohne eine einzige Bestellung zu verlieren. Jetpack VaultPress Backup ist die beste automatische Echtzeit-Backup-Lösung für WordPress.

Es ist für Sie erledigt, sodass Sie sich nicht einmal darum kümmern müssen, Ihre Website zu speichern, bevor Sie mit Änderungen experimentieren.

Nehmen Sie Ihre Codeänderungen außerhalb Ihrer übergeordneten Themendateien vor. Wenn Sie eine Design- oder Plug-in-Datei bearbeiten, werden diese Änderungen überschrieben und rückgängig gemacht, wenn das Design oder Plug-in das nächste Mal aktualisiert wird.

Es gibt mehrere Möglichkeiten, Ihrer Website Code hinzuzufügen, ohne die Design- oder Plug-in-Dateien direkt zu bearbeiten. Sie können das Code-Snippets-Plugin verwenden, um Elemente auf einer Seite hinzuzufügen, zu bearbeiten oder zu entfernen und Ihre Website über das Feld „Zusätzliches CSS“ im Design-Anpasser zu gestalten. Sie können auch ein untergeordnetes Thema erstellen. Wichtig ist, dass Sie Ihre Änderungen dort vornehmen, wo sie nicht von Theme- oder Plugin-Updates beeinflusst werden.

Behalten Sie die Geschwindigkeit im Auge. Unabhängig davon, wie Sie Ihre Produktseiten anpassen, möchten Sie sicherstellen, dass die Geschwindigkeit Ihrer Website nicht darunter leidet. Mit Jetpack Boost können Sie sofort Schlüsselbereiche verbessern, die sowohl die Benutzererfahrung als auch die Wahrnehmung Ihrer Websitequalität durch Google verbessern. Eine schnellere Website bedeutet, dass Kunden eher bleiben und Google Sie eher in den Suchergebnissen empfiehlt. Ein schneller Schub kann viel bewirken.