So passen Sie WooCommerce-Produktseiten an (Steigern Sie den Umsatz im Jahr 2025)

Veröffentlicht: 2024-11-23

Fühlen sich Ihre WooCommerce-Produktseiten allgemein oder enttäuschend? Die Personalisierung dieser Seiten ist wichtig, um ein ansprechendes Einkaufserlebnis zu schaffen, das bei Ihren Kunden Anklang findet. Mit Tools wie Divi können Sie Ihre Produktseiten ganz einfach so umgestalten, dass sie sich von der Masse abheben und genau das liefern, was Kunden brauchen, um sichere Kaufentscheidungen zu treffen.

In diesem Leitfaden führen wir Sie durch die wesentlichen Schritte zur Anpassung von WooCommerce-Produktseiten, vom Hinzufügen funktionaler Verbesserungen bis hin zur Anpassung des Designs für eine bessere Benutzerfreundlichkeit. Am Ende erfahren Sie, wie Sie Ihre Produktseiten am einfachsten effektiver gestalten und die Kundenzufriedenheit steigern können.

Inhaltsverzeichnis
  • 1 Warum sollten Sie Ihre WooCommerce-Produktseite anpassen?
  • 2 Methoden zum Anpassen von WooCommerce-Produktseiten
    • 2.1 1. Verwendung des Standard-WordPress-Editors und der WooCommerce-Blöcke
    • 2.2 2. Verwendung eines WooCommerce Builders wie Divi
  • 3 Warum eignet sich Divi perfekt zum Anpassen von WooCommerce-Produktseiten?
    • 3.1 1. Professionell gestaltete Produktseitenvorlagen
    • 3.2 2. Native WooCommerce-Module zum Hinzufügen benutzerdefinierter Funktionalität
    • 3.3 3. Divi Theme Builder zum schnellen Vornehmen von Änderungen auf Site-Ebene
    • 3.4 4. Integrierte Marketing-Tools zur Optimierung von Produktseiten
    • 3.5 5. Divi Quick Sites zum Generieren einer Markenproduktseitenvorlage
  • 4 Anpassen von WooCommerce-Produktseiten mit Divi
    • 4.1 1. Erstellen Sie eine Produktseitenvorlage
    • 4.2 2. Importieren Sie eine vorgefertigte Produktseitenvorlage
    • 4.3 3. Passen Sie Ihre Produktseitenvorlage an
    • 4.4 4. Speichern Sie die Änderungen und zeigen Sie eine Vorschau Ihrer Produktseite an
  • 5 weitere Möglichkeiten zur Verbesserung Ihrer WooCommerce-Produktseiten
  • 6 Tools, die zum Erstellen von WooCommerce-Produktseiten erforderlich sind
  • 7 Divi + WooCommerce ist die ultimative E-Commerce-Lösung
  • 8 FAQs zum Anpassen von WooCommerce-Produktseiten

Warum sollten Sie Ihre WooCommerce-Produktseite anpassen?

Auf Ihren Produktseiten entscheiden potenzielle Käufer über den Kauf – und sind damit einer der wichtigsten Teile Ihres Online-Shops. Eine gut angepasste Produktseite kann die Wahrnehmung Ihrer Angebote durch Kunden verändern und ihr Einkaufserlebnis verbessern. Deshalb ist es wichtig:

  • Verbesserte Benutzererfahrung: Eine gut gestaltete und angepasste Produktseite erleichtert es Kunden, die benötigten Informationen schnell zu finden, verbessert ihr Einkaufserlebnis insgesamt und regt zum Entdecken anderer Produkte an.
  • Erhöhte Konversionsraten: Produktseiten, die auf die Bedürfnisse Ihrer Zielgruppe zugeschnitten sind – mit klaren Handlungsaufforderungen, Cross-Selling-Möglichkeiten und optisch ansprechenden Layouts – können zu höheren Verkäufen und weniger abgebrochenen Warenkörben führen.
  • Verbesserte Produktpräsentation: Durch die Anpassung Ihrer Produktseiten können Sie Funktionen, Vorteile und visuelle Elemente präsentieren, die potenziellen Käufern helfen, fundierte Entscheidungen zu treffen und sich bei ihren Einkäufen sicher zu fühlen.
  • Unterstützung dynamischer Verkaufsstrategien: Das Hinzufügen von individuellem Upselling, personalisierten Angeboten und Bewertungen schafft Vertrauen und ermutigt Kunden, mehr in ihren Einkaufswagen zu legen.

Indem Sie sich auf Benutzerfreundlichkeit, Relevanz und Kundenbedürfnisse konzentrieren, können Sie einfache Produktseiten in leistungsstarke Tools verwandeln, die den Umsatz und die Kundenbindung steigern.

Methoden zum Anpassen von WooCommerce-Produktseiten

Die Anpassung Ihrer WooCommerce-Produktseiten ist von entscheidender Bedeutung, aber ebenso wichtig ist die Art und Weise, wie Sie dies tun. Schauen wir uns einige häufig verwendete Methoden zum Anpassen von WooCommerce-Produktseiten an.

Stellen Sie vor dem Anpassen Ihrer Produktseite sicher, dass mindestens ein Produkt veröffentlicht ist. Wenn Sie Ihre Produkte bereits hinzugefügt haben, großartig! Wenn nicht, können Sie dies tun, indem Sie zu Produkte > Neu hinzufügen gehen.

Produkte hinzufügen

Geben Sie einen Titel, eine Beschreibung, ein Produktbild und einen Verkaufspreis ein. Wenn Sie fertig sind, klicken Sie auf „Veröffentlichen“ . Wenn Sie das Produkt ansehen, sieht die nicht angepasste Produktseite im Frontend wie folgt aus:

nicht angepasste Produktliste

Derzeit sieht es schlicht und gewöhnlich aus. Lassen Sie es uns anpassen, damit es hervorsticht.

1. Verwendung des Standard-WordPress-Editors und der WooCommerce-Blöcke

Die Drag-and-Drop-Oberfläche von WordPress Gutenberg hat das Erstellen von Seitenlayouts mithilfe von Blöcken vereinfacht. Sein Blockeditor enthält außerdem viele WooCommerce-Blöcke, die das Design vereinfachen, sodass Sie den Code nicht anfassen müssen.

Beachten Sie, dass Sie nur dann auf den WordPress-Site-Editor zugreifen können, wenn Sie ein Block-Theme installiert haben, was bedeutet, dass es mit älteren klassischen Themes nicht funktioniert. In diesem Beispiel verwenden wir das Theme „Twenty Twenty-Four“, um die WooCommerce-Produktseite anzupassen.

Gehen Sie in Ihrem WordPress-Dashboard zu „Darstellung“ > „Editor“ , um auf den Site-Editor zuzugreifen.

Erscheinungsredakteur

Der nächste Bildschirm ist der Site-Editor von WordPress, mit dem Sie Änderungen durch Ziehen und Ablegen von Blöcken vornehmen können. Gehen Sie zu Vorlagen .

Vorlagen

Wählen Sie WooCommerce und wählen Sie „Einzelprodukt“ aus der Liste der Vorlagen aus.

Wählen Sie Woocommerce für ein einzelnes Produkt

Sie können die Produktseitenvorlage jetzt mithilfe dynamischer WooCommerce-Blöcke bearbeiten. Da es sich um eine WooCommerce-Vorlage handelt, werden Ihre Änderungen in allen Produkten widergespiegelt.

Bearbeiten der Produktvorlage mit Woocommerce-Blöcken

Klicken Sie auf ein Element, um dessen Bearbeitungsoptionen anzuzeigen. Im daraufhin angezeigten Mini-Einstellungsfeld können Sie nach oben/unten, nach links/rechts navigieren, ziehen und die Ausrichtung ändern. Wechseln Sie in der rechten Seitenleiste zu „Stile“ , um Schriftarten, Farben und andere Elementoptionen anzupassen.

Bearbeitungsmöglichkeiten

Um weitere WooCommerce-Blöcke hinzuzufügen, klicken Sie auf die Plus-Schaltfläche und scrollen Sie nach unten zum Abschnitt WooCommerce.

Woocommerce-Blöcke hinzufügen

Hier finden Sie viele WooCommerce-Blöcke, wie zum Beispiel „Featured Product“ , um bestimmte Produkte anzuzeigen, oder „Product Gallery“, um Ihre Produkte in wunderschönen Fotos zu präsentieren. Diese Blöcke helfen Ihnen beim Entwerfen einer guten Produktseite. Allerdings sind Sie hinsichtlich der Anpassungsmöglichkeiten eingeschränkt.

Mit dem Site Editor können Sie nur grundlegende Einstellungen wie Farben und Schriftarten bearbeiten. Und wenn Sie eine erweiterte Anpassung und erweiterte Funktionalität wünschen, sind Sie auf zwei Optionen angewiesen:

  • Benutzerdefiniertes CSS/Codierung: Sie können den Stil Ihrer Blöcke jederzeit mithilfe von CSS anpassen. Und wenn Sie ein Webentwickler sind, der sich mit der Bearbeitung Ihrer Website-Themendateien auskennt, dann legen Sie los. Andernfalls ist es möglicherweise eine gute Idee, Kerndateien nicht zu berühren, da dies Ihre Website beschädigen könnte.
  • WooCommerce-Erweiterungen: Im WooCommerce Marketplace finden Sie tolle Add-ons, um die Funktionalität Ihrer Produktseiten zu erweitern. Zum Beispiel Produktvideo für WooCommerce, um Ihre Produkte in Videos zu präsentieren, und Produkt-Add-ons, um zusätzliche Optionen wie Geschenkverpackungen hinzuzufügen.

WooCommerce-Erweiterungen sind gut, solange Sie sie nicht übermäßig verwenden. Die Installation zu vieler Plugins kann Ihre Website aufblähen und verlangsamen. Verwenden Sie daher einige ausgewählte (siehe unsere Empfehlungen unten), um die Produktseiten zu verbessern.

Wenn Sie nach einer optimierten Lösung zum Anpassen von Produktvorlagen suchen, sind einige Premium-Blockthemen mit zahlreichen integrierten Funktionen verfügbar, sodass Sie sich nicht so stark auf kostspielige Add-ons verlassen müssen.

2. Verwendung eines WooCommerce Builders wie Divi

Wenn Ihnen die Einschränkungen des Standardblockeditors für Ihre WooCommerce-Seiten nicht gefallen, können Sie einen WooCommerce Builder verwenden. WooCommerce-Builder sind Seitenersteller für WooCommerce-Sites. Sie bieten robustere Anpassungsfunktionen und Integration mit WooCommerce als typische WordPress-Themes.

Divi eignet sich perfekt für den Aufbau von WooCommerce-Shops, da es einen intuitiven Drag-and-Drop-Builder für Anfängerfreundlichkeit, dynamische WooCommerce-Inhaltselemente für die Funktionalität und beeindruckende vorgefertigte Produktseitenlayouts bietet, die das Entwerfen von Produktseiten mit hoher Conversion-Rate mühelos machen. Damit können Sie atemberaubende Produktseiten (und ganze Online-Shops) erstellen, ohne eine einzige Codezeile zu berühren oder Plugins von Drittanbietern zu installieren, um Funktionen hinzuzufügen.

Divi verfügt über Tools, die Ihre Arbeit erheblich vereinfachen. Möchten Sie einen gebrandeten Online-Shop erstellen, ohne eine Zeile Code zu berühren? Divi Quick Sites wird es innerhalb von zwei Minuten für Sie entwerfen. Sie möchten keine Produktseite von Grund auf erstellen oder anpassen? Bitten Sie Divi AI, ein Seitenlayout, eine Produktbeschreibung und Bilder zu erstellen, die zu Ihrer Marke passen.

Beginnen Sie mit Divi

Warum eignet sich Divi perfekt zum Anpassen von WooCommerce-Produktseiten?

Divi Woocommerce Builder

Divi bietet alles, was Sie zum Erstellen einer einzigartigen und gebrandeten WooCommerce-Produktseite benötigen. Sie können jeden Zentimeter Ihrer Website anpassen und Funktionen hinzufügen, ohne befürchten zu müssen, dass Ihre Website mit Add-ons von Drittanbietern aufgebläht wird. Aus folgenden Gründen ist es besonders effektiv, WooCommerce-Seiten anzupassen:

1. Professionell gestaltete Produktseitenvorlagen

Wenn Sie nicht gerne von Grund auf neu erstellen, erspart Ihnen Divi den Aufwand, indem es Ihnen beeindruckende vorgefertigte Produktseitenlayouts bietet. Sie können diese Layouts mit einem Klick in Ihre Produktseite importieren und geringfügige Änderungen vornehmen, um sie an Ihre Marke anzupassen, und das war’s. Wählen Sie aus verschiedenen Branchen und kombinieren Sie Layouts, um eine einzigartige Produktseitenvorlage zu erstellen.

Divi-Produktseitenlayouts

2. Native WooCommerce-Module zum Hinzufügen benutzerdefinierter Funktionen

Divi verfügt über verschiedene WooCommerce-Elemente, die Zeit sparen und die Erstellung individueller WooCommerce-Module von Grund auf vermeiden. Fügen Sie Produktregisterkarten hinzu, um zusätzliche Informationen anzuzeigen und den Versand mit Woo Shipping Information zu vereinfachen. Erstellen Sie verwandte Produkte oder „Gefällt mir“ -Abschnitte mit den WooCommerce-Produkt-Upsell- und Woo-Cross-Sells -Elementen.

native E-Commerce-Elemente

Sie erhalten außerdem Zugriff auf über 200 Divi-Elemente mit dynamischen Inhaltsfunktionen, mit denen Sie personalisierte Produktseiten erstellen und das Einkaufserlebnis ganz einfach verbessern können.

3. Divi Theme Builder, um Änderungen auf Site-Ebene schnell vorzunehmen

Es ist nicht erforderlich, jede Produktseite anzupassen, um produktspezifische Informationen hinzuzufügen. Mit dem Divi Theme Builder können Sie Produktvorlagen auf Website-Ebene erstellen. Wenn Sie also Änderungen an der Vorlage vornehmen, werden diese auch dynamisch auf allen Produktseiten angezeigt.

Dies ist ein Lebensretter in Situationen, in denen Sie Hunderte von Produktlisten haben. Anstatt Produktseiten für jedes neue Produkt zu entwickeln und anzupassen, erstellen Sie einfach eine Vorlage „Alle Produkte“ und passen sie an, um standortweite, einheitliche Änderungen vorzunehmen und diese auf allen Produktseiten anzuzeigen.

Divi Theme Builder-Vorlagen

4. Integrierte Marketingtools zur Optimierung von Produktseiten

Divi verfügt über unglaubliche Marketing-Tools als integrierte Funktionen, mit denen Sie die Konversionsraten Ihrer Produktseite steigern können. Mit Divi Leads können Sie beispielsweise Split-Tests durchführen und einen Gewinner aus zwei Elementen auswählen. Sie können Tests zwischen ganzen Produktseiten, Überschriften, Beschreibungskopien, CTAs oder anderen Komponenten durchführen.

Ebenso können Sie mit den Bedingungsoptionen personalisierte Upsells und Cross-Selling-Angebote erstellen, z. B. indem Sie Benutzern, die Produkte in ihren Warenkorb gelegt, den Kauf jedoch noch nicht abgeschlossen haben, ein Rabattcode-Banner anzeigen.

E-Mail-Opt-in-Popup mit Bloom

Sie erhalten außerdem Premium-Plugins wie Bloom, um hochkonvertierende E-Mail-Opt-Ins zu erstellen, und Monarch, um mehr Traffic und Verkäufe zu vermarkten und zu steigern. Vergessen Sie nicht, viele andere integrierte Funktionen wie die Sticky Options von Divi auszuprobieren, mit denen Sie Sticky-Elemente auf Ihrer Produktseite erstellen können. Fügen Sie beispielsweise einen Sticky CTA zu Ihrer Produktseite hinzu, damit diese sichtbar bleibt, während Kunden scrollen, um Conversions zu unterstützen.

Sie können auch das Countdown-Timer-Modul von Divi verwenden, um die Dringlichkeit von Werbeangeboten auf Ihrer Produktseite und mehr zu erhöhen.

Entdecken Sie die Marketing-Tools von Divi

5. Divi Quick Sites zum Generieren einer Markenproduktseitenvorlage

Sie möchten Ihren Cursor nicht bewegen, um eine Produktseitenvorlage zu erstellen? Das ist nicht nötig, denn mit Divi Quick Sites ist die Erstellung brandneuer Websites von Grund auf ein Kinderspiel.

Das Beste daran ist, dass WooCommerce auf Websites, die mit Divi Quick Sites erstellt wurden, automatisch installiert ist. Das bedeutet, dass Sie beim Erstellen Ihres Online-Shops WooCommerce mit relevanten Seitenvorlagen konfigurieren, wenn Sie die Shop- Option aktivieren. Dazu gehören gebrandete Shop-, Warenkorb-, Checkout- und Produktseitenvorlagen .

Holen Sie sich Divi + WooCommerce

Anpassen von WooCommerce-Produktseiten mit Divi

Dieses Tutorial konzentriert sich auf das Anpassen einer WooCommerce-Produktseite. Wenn Sie jedoch ein Anfänger sind und Ihren Online-Shop mit WooCommerce von Grund auf aufbauen, sollten Sie mit unserem Leitfaden zum Einrichten eines E-Commerce-Shops beginnen.

Um dieses Tutorial durchführen zu können, muss das Divi-Theme in Ihrem Online-Shop installiert und aktiv sein.

Die jährliche Divi-Mitgliedschaft kostet 89 US-Dollar, Sie können sie jedoch gegen eine einmalige Zahlung von 249 US-Dollar ein Leben lang erhalten. Nachdem Sie Divi gekauft haben, melden Sie sich mit Ihren Elegant Themes-Anmeldeinformationen an und laden Sie die Divi.zip-Datei herunter. Laden Sie den ZIP-Ordner auf die Registerkarte „WordPress -Darstellung“ > „Themen“ > „Neu hinzufügen “ hoch. Aktivieren Sie dann Ihre Divi-Lizenz und fertig. Hier ist ein Schritt-für-Schritt-Video-Tutorial zur Installation und Aktivierung von Divi:

Holen Sie sich Divi + WooCommerce

Als nächstes haben wir in der Einleitung versprochen, wie man eine WooCommerce-Produktseite am einfachsten anpassen kann. Hier ist es:

1. Erstellen Sie eine Produktseitenvorlage

Sobald Sie Divi auf Ihrem WordPress-Dashboard installiert und aktiviert haben, können Sie jede WooCommerce-Seite anpassen, einschließlich der einfach aussehenden Produktseiten. Suchen Sie nach der Schaltfläche „Divi Builder verwenden“ .

Bearbeiten Sie Woocommerce-Seiten mit Divi

Mit dieser Option können Sie einzelne Produktseiten mithilfe des Drag-and-Drop-Builders von Divi anpassen. Allerdings wird es ewig dauern, jede Produktseite von Grund auf neu zu gestalten. Aber keine Sorge – Divi ermöglicht es Ihnen, die Produktseitenvorlage auf Site-Ebene anzupassen, sodass die Änderungen auf allen Produktseiten angezeigt werden. Erstellen Sie dazu eine Produktvorlage im Divi Theme Builder.

Gehen Sie zu Divi > Theme Builder und klicken Sie auf Neue Vorlage hinzufügen. (Sie werden diese vielen Vorlagen nicht auf Ihrem Bildschirm sehen, da Sie Divi gerade erst installiert haben.)

Erstellen Sie eine neue Theme-Builder-Vorlage

Da wir eine Produktvorlage entwerfen möchten, wählen Sie „Alle Produkte“ als Kategorie aus, für die Sie sie verwenden möchten.

Alle Produktkategorien

Jetzt können Sie auf den Drag-and-Drop-Builder von Divi zugreifen, um mit dem Divi Theme Builder eine Produktseitenvorlage zu entwerfen. Sobald Sie Ihre Vorlage erstellt und gespeichert haben, haben alle Ihre Produktseiten das Layout der Vorlage.

2. Importieren Sie eine vorgefertigte Produktseitenvorlage

Sie müssen nicht von Grund auf neu aufbauen, wenn Sie nicht wissen, wo Sie anfangen sollen. Wie bereits erwähnt, bietet Ihnen Divi Zugriff auf viele vorgefertigte Produktseitenvorlagen, es ist also an der Zeit, diese zu verwenden. Sie können eine vorgefertigte Vorlage ganz einfach importieren und anpassen, um sie an Ihre Marke anzupassen. Klicken Sie unten links in der Einstellungsleiste auf das Plus-Symbol und wählen Sie „Vorgefertigtes Layout“.

Wählen Sie ein vorgefertigtes Layout

Scrollen Sie durch und klicken Sie, um eine Vorschau des gewünschten Bilds anzuzeigen. Verwenden Sie die Suchleiste und Filter, um Ihre Suche zu verfeinern.

Wählen Sie eine Produktvorlage

Sobald Sie eines gefunden haben, klicken Sie auf „Dieses Layout verwenden“ und warten Sie, bis die Magie geschieht.

Klicken Sie auf „Layout verwenden“.

Der Divi Builder hat automatisch mit dem Import des Layouts auf Ihre Seite begonnen.

Importieren vorgefertigter Layoutvorlagen

Ihre Produktseitenvorlage ist fertig und sieht viel besser aus als die Standardproduktseite von WooCommerce.

Vorschau der generierten Produktseitenvorlage

Sie müssen noch kleinere Optimierungen und Branding-Anpassungen vornehmen, um sie an andere Website-Seiten anzupassen.

Optional: Kein Fan eines vorgefertigten Layouts? Sie können auch die Option „Mit KI erstellen“ verwenden und Divi AI anweisen, eine einzigartige Produktseitenvorlage zu entwerfen.

Mit Divi AI bauen

3. Passen Sie Ihre Produktseitenvorlage an

Beginnen wir damit, sicherzustellen, dass wir über die notwendigen Elemente einer Produktseite mit hoher Conversion-Rate verfügen. Überprüfen Sie beispielsweise, ob Sie auf Ihrer Seite Upsells, Cross-Selling-Angebote und Testimonials platziert haben, um Kunden zu ermutigen, weitere Produkte in ihren Warenkorb zu legen.

Verwendung der nativen WooCommerce-Module von Divi

Das Beste an der Verwendung von Divi für WooCommerce sind die nativen WooCommerce-Elemente, die einfach anzupassen sind und Ihnen Geld beim Kauf von Plugins oder Add-ons von Drittanbietern sparen. Hier sind die WooCommerce-Module von Divi, die Sie benötigen, um sicherzustellen, dass Ihre Produktseitenvorlage Folgendes enthält:

  • Woo-Produktbilder: Um Ihre Produktbilder in schönen Layouts anzuzeigen.
  • Woo-Produkttitel: Zur dynamischen Anzeige Ihrer Produkttitel.
  • Woo Produktbeschreibung: Präsentieren Sie eine kurze Produktbeschreibung unter dem Titel. Sehen Sie sich Woo Product Meta und Woo Product Information an, um zusätzliche Informationen hinzuzufügen.
  • Woo-Produktregisterkarten: Zeigt vollständige Produktdetails, Bewertungen und zusätzliche Informationen an.
  • Woo Product Add to Cart: Kunden können Produkte schnell in ihren Warenkorb legen. (Sie können auch Bewertungen mit Woo Product Ratings hinzufügen. )
  • Woo Breadcrumbs: Helfen Sie Benutzern, sich in Ihrem Shop zurechtzufinden.
  • Erfahrungsberichte: Bauen Sie Glaubwürdigkeit auf, indem Sie Kundenfeedback präsentieren.
  • Werben Sie für Cross-Sells: So erstellen Sie Abschnitte, die „Personen, die auch gekauft haben“ sind.
  • Woo Product Upsell: Um Angebote anzubieten und Kunden zum Kauf zu ermutigen.

Divi bietet viele weitere hervorragende Inhaltsmodule, um den Online-Shop-Aufbau zu vereinfachen. Sie müssen kein Geld für Plugins ausgeben, wenn Sie sie als integrierte Elemente und Funktionen in Divi kostenlos erhalten können. So sieht ein vorgefertigtes Produktseitenlayout mit den WooCommerce-Modulen von Divi aus:

Vorgefertigtes Produktseitenlayout mit Divi-Modulen

In unserem Beispiel habe ich mit Divi Quick Sites in zwei Minuten einen neuen Online-Shop erstellt . Ich verwende die Vorlage für die WooCommerce-Produktseite, um Ihnen den Anpassungsprozess zu zeigen.

Wenn diese Elemente noch nicht in Ihrer Produktseitenvorlage enthalten sind, fügen Sie sie hinzu. Um ein Modul hinzuzufügen, bewegen Sie den Mauszeiger über das Element, nach dem Sie ein neues hinzufügen möchten, und klicken Sie auf das Plus-Symbol. Um mehr Verkäufe zu fördern, fügen wir nach den Erfahrungsberichten einen Abschnitt hinzu, der Ihnen vielleicht auch gefällt. Dazu müssen wir das Woo Product Upsell -Element hinzufügen.

Die von Ihnen hinzugefügten Module replizieren die Stile Ihrer gespeicherten globalen Elemente, sodass Sie sich nicht darum kümmern müssen, das Branding für jedes Modul einzeln zu ändern. Sie können die Einstellungen jedoch bei Bedarf problemlos anpassen.

Bewegen Sie dazu den Mauszeiger über das Element und klicken Sie auf das Zahnradsymbol (Einstellungen). Das Einstellungsfenster wird mit drei Abschnitten angezeigt: Inhalt (um den Inhalt des Elements zu ändern), Design (um Schriftarten, Farben, Größe und mehr zu bearbeiten) und Erweitert (um benutzerdefiniertes CSS zu bearbeiten, Bedingungen hinzuzufügen usw.)

Bearbeiten von Moduleinstellungen

Verwenden Sie den dynamischen Inhalt von Divi, um Daten für bestimmte Produkte abzurufen

Die nativen WooCommerce-Module von Divi sind standardmäßig dynamisch, das heißt, sie beziehen produktspezifische Informationen aus den richtigen Elementen, ohne dass Sie diese manuell eingeben müssen. Sie können jedoch auch die Einstellungen für dynamische Inhalte in bestimmten Elementen ändern, um das Benutzererlebnis noch individueller zu gestalten.

Sie könnten beispielsweise zusätzliche produktspezifische Details anzeigen, um Käufern dabei zu helfen, fundierte Entscheidungen zu treffen, oder Rabattangebote für ausgewählte Termine anbieten. Fügen Sie zunächst das Element hinzu und bewegen Sie den Mauszeiger über verschiedene Einstellungen, um die Option für dynamischen Inhalt zu finden:

Symbol für dynamischen Inhalt

Versuchen wir, einen Countdown-Timer hinzuzufügen, damit beim Ausführen von Verkäufen der Produkttitel dynamisch für verschiedene Produkte angezeigt wird. So geht's:

Nachdem Sie die Änderungen gespeichert und eine Ihrer Produktseiten angezeigt haben, sehen Sie den Countdown-Timer mit dem Produktnamen im Titel.

Produktname Titel

Verwenden von Bedingungen zur Personalisierung von Inhalten basierend auf dem Benutzerverhalten

Mit den Bedingungen von Divi können Sie bestimmte Inhalte basierend auf Benutzerinteraktionen ein- oder ausblenden. Beispielsweise können Sie Upsell-Angebote nur wiederkehrenden Besuchern oder Benutzern anzeigen, die Produkte in ihren Warenkorb gelegt, den Kauf aber noch nicht abgeschlossen haben. So können Sie Benutzern, die ihren Warenkorb eingerichtet haben, den Abschnitt „Das könnte Ihnen auch gefallen“ anzeigen:

Die Konditionenoptionen von Divi können beim Aufbau einzigartiger Einkaufserlebnisse eine entscheidende Rolle spielen. Beispielsweise können Sie eingeloggten Benutzern unterschiedliche Produktseitenabschnitte anzeigen und nicht Gastbenutzern.

Profi-Tipp: Heben Sie Neuheiten für Stammkunden und Bestseller für Neubesucher hervor. Wenn ein Benutzer die Produktseite mehrmals besucht, aber nicht gekauft hat, können Sie ein personalisiertes Rabattbanner anzeigen, um die Konvertierung zu fördern.

Zeigen Sie individuelle Erfahrungsberichte für bestimmte Produkte an

Mit dem Woo-Produktbewertungsmodul von Divi können Sie produktspezifische Erfahrungsberichte präsentieren, die die Glaubwürdigkeit steigern und Vertrauen bei potenziellen Käufern aufbauen. Dies ist besonders nützlich für Produkte, die hervorragende Rückmeldungen oder Rezensionen erhalten haben. Stellen Sie sicher, dass Sie „Dieses Produkt“ auswählen, damit Bewertungen von bestimmten Produkten abgerufen werden.

produktspezifische Erfahrungsberichte

Profi-Tipp: Die Platzierung eines Testimonial -Moduls neben der Schaltfläche „In den Warenkorb“ kann das Vertrauen des Käufers in den Kauf stärken. Beachten Sie, dass das Testimonial -Modul nicht dynamisch ist. Sie müssen daher bestimmte Produktseiten mit Divi Builder bearbeiten, um Testimonials hinzuzufügen.

Hinzufügen von Testimonials zu bestimmten Produktseiten

Verwenden von Bloom zum Erstellen von Exit-Intent-Popups

Ihre Divi-Mitgliedschaft beinhaltet Bloom, das Premium-E-Mail-Opt-in-Plugin von Divi. Sie können Bloom verwenden, um Benutzer zu ermutigen, sich für Ihre E-Mail-Liste anzumelden, indem Sie einen Gutscheincode anbieten. Sie können Bloom auch für ein Exit-Intent-Popup einrichten, sodass, wenn Benutzer vor dem Verlassen kein Produkt in den Warenkorb legen oder keinen Kauf tätigen, ein Rabattcoupon angezeigt wird, der sie zum Abschluss des Kaufs ermutigt.

Exit-Intent-Popup mit Bloom

Divi bietet mehrere leistungsstarke Module zur Verbesserung der WooCommerce-Produktseiten. Der Countdown-Timer schafft Dringlichkeit für zeitlich begrenzte Verkäufe und sorgt so für schnellere Käufe. Das Modul „Preistabellen hebt Produktpakete oder Angebote hervor. Nutzen Sie den Slider , um Produktbilder dynamisch zu präsentieren. Das Modul „Produktregisterkarten“ organisiert Produktdetails, Rezensionen und Spezifikationen übersichtlich. Es gibt noch viel mehr. Probieren Sie also andere Module aus, um eine einzigartige WooCommerce-Produktseitenvorlage zu erstellen.

Beginnen Sie mit Divi

4. Speichern Sie die Änderungen und zeigen Sie eine Vorschau Ihrer Produktseite an

Wenn Sie mit Ihrem Design zufrieden sind, klicken Sie unten rechts im Divi Builder auf die Schaltfläche „Speichern“ .

Änderungen speichern

Sehen Sie sich eines Ihrer Produkte an, um zu sehen, wie es Ihren Kunden erscheint:

Beginnen Sie mit Divi

Weitere Möglichkeiten zur Verbesserung Ihrer WooCommerce-Produktseiten

Neben der Anpassung Ihrer WooCommerce-Produktseitenvorlage finden Sie hier einige wichtige Plugins und WooCommerce-Erweiterungen, mit denen Sie Ihre Produktseiten noch weiter optimieren können:

  • Divi AI: Generieren Sie mithilfe von KI hochkonvertierende Produktbeschreibungen, Titel und andere Texte.
  • EWWW: Optimieren Sie Ihre Produktbilder für schnellere Ladezeiten ohne Qualitätseinbußen und sorgen Sie so für ein reibungsloses Einkaufserlebnis für Benutzer.
  • Monarch: Fördern Sie das Teilen Ihrer Produktseiten in sozialen Netzwerken mit schönen Social-Media-Sharing-Schaltflächen und sorgen Sie so für mehr Traffic in Ihrem Shop.
  • Bloom: Sammeln Sie E-Mail-Leads direkt von Ihren Produktseiten, indem Sie im Austausch für E-Mail-Anmeldungen spezielle Rabatte oder Updates anbieten.
  • WooCommerce-Punkte und Prämien: Kunden können für abgeschlossene Einkäufe mit Punkten belohnt werden, die sie bei ihren nächsten Einkäufen gegen Rabatte einlösen können.
  • Produktvergleich für WooCommerce: Lassen Sie Ihre Kunden zwei ähnliche Produkte vergleichen und mit mehr Vertrauen kaufen.
  • Zusammen gekauft für WooCommerce: Erstellen Sie Abschnitte für häufig zusammen gekaufte Artikel, um mehr Artikel in den Warenkorb zu legen.

Erforderliche Tools zum Erstellen von WooCommerce-Produktseiten

Empfohlenes Werkzeug Aufgabe
1 Divi WooCommerce Builder Passen Sie Produktseiten ohne Programmierung an
2 WooCommerce Fügen Sie Produkte und Zahlungsoptionen hinzu und erstellen Sie einen Online-Shop
3 Divi-Schnellseiten Erstellen Sie in wenigen Minuten eine komplette WooCommerce-Website mit anpassbaren Seiten und Vorlagen.
4 Divi KI Generieren Sie Produktbeschreibungen, Titel, Bilder und gesamte Layouts
5 EWWW Komprimieren Sie Produktbilder ohne Kompromisse bei der Qualität
6 Monarch Ermöglichen Sie Kunden, Produkte in sozialen Medien zu teilen
7 Blühen Erstellen Sie unwiderstehliche E-Mail-Optin-Formulare, um Benutzer zu ermutigen, sich für Ihre E-Mail-Liste anzumelden
8 WooCommerce-Punkte und Prämien Ermutigen Sie Kunden, mehr Produkte zu kaufen, indem Sie ihnen Prämienpunkte schenken
9 WooCoomerce-Produkte vergleichen Ermöglichen Sie Ihren Kunden, sichere Kaufentscheidungen zu treffen, indem Sie ihnen den Vergleich ähnlicher Produkte ermöglichen
10 Zusammen für WooCommerce gekauft Fügen Sie Upsell- und Cross-Selling-Angebote hinzu, indem Sie einen Abschnitt „Zusammengekauft“ erstellen
11 RankMath SEO Optimieren Sie Produktseiten für SEO und fördern Sie organische Käufer
12 Produkt-Add-ons für WooCommerce Bieten Sie besondere Optionen wie Geschenkverpackungen, besondere Nachrichten und mehr an.
13 Produktvideo für WooCommerce Steigern Sie den Umsatz, indem Sie Galerien und vorgestellte Videos zu Ihren Produktseiten hinzufügen

Divi + WooCommerce ist die ultimative E-Commerce-Lösung

Divi + WooCommerce ist eine leistungsstarke Kombination, die eine flexible, einsteigerfreundliche Lösung für die Erstellung von E-Commerce-Websites bietet. Die Anpassbarkeit von Divi perfektioniert die E-Commerce-Funktionalität von WooCommerce, sodass Sie ansprechende Produktseiten erstellen, für Conversions optimieren und außergewöhnliche Einkaufserlebnisse bieten können.

Holen Sie sich Divi + WooCommerce

FAQs zum Anpassen von WooCommerce-Produktseiten

Warum sollte ich meine WooCommerce-Produktseite anpassen?
Durch die Anpassung Ihrer Produktseite können Sie Ihre Marke differenzieren, das Benutzererlebnis verbessern und die Konversionsraten steigern. Außerdem können Sie einzigartige Elemente wie Upsells und Testimonials hinzufügen, um Ihren Shop hervorzuheben und gleichzeitig die Kundenzufriedenheit zu verbessern.
Benötige ich Programmierkenntnisse, um eine WooCommerce-Produktseite anzupassen?
Nein, Sie benötigen keine Programmierkenntnisse. Tools wie der Divi Builder ermöglichen es Ihnen, Ihre Produktseiten mit einer Drag-and-Drop-Oberfläche anzupassen, sodass auch Nicht-Entwickler problemlos ansprechende Designs erstellen können, ohne den Code zu berühren.
Welche Elemente sollte ich in eine benutzerdefinierte WooCommerce-Produktseite einbinden?
Zu den wesentlichen Elementen gehören Produktbilder, Beschreibungen, Schaltflächen zum Hinzufügen zum Warenkorb, Testimonials, Upsell-Abschnitte und Breadcrumbs. Diese tragen dazu bei, die Benutzererfahrung zu verbessern und mehr Käufe zu fördern.
Kann die Verwendung zu vieler Plugins meinen WooCommerce-Shop verlangsamen?
Ja, wenn Sie sich auf zu viele Plugins von Drittanbietern verlassen, kann dies die Leistung Ihrer Website beeinträchtigen und zu Kompatibilitätsproblemen führen. Stattdessen kann die Verwendung von Tools wie Divi, das native WooCommerce-Elemente enthält, den Bedarf an zusätzlichen Plugins reduzieren und die Geschwindigkeit aufrechterhalten.
Wie verbessert die Anpassung von Produktseiten die SEO?
Eine gut optimierte Produktseite ermöglicht eine bessere SEO durch die Einbindung von Produkt-Tags, Breadcrumbs, schlüsselwortreichen Beschreibungen und Alternativtexten. Dies trägt dazu bei, dass Ihre Seiten in den Suchmaschinen höher eingestuft werden, wodurch der organische Traffic und die Verkäufe gesteigert werden. Es wird außerdem empfohlen, SEO-Plugins wie RankMath zu installieren, um die Produktseiten von WooCommerce gut zu optimieren.