So passen Sie WooCommerce-Produktseiten an

Veröffentlicht: 2020-07-17

Ihre Produkte sind einzigartig – die Produktseiten, auf denen sie präsentiert werden, sollten es auch sein. Die standardmäßige WooCommerce-Produktseitenvorlage eignet sich hervorragend für viele Online-Shops, aber Sie möchten vielleicht etwas, das den individuellen Stil und die Vorteile Ihrer Produkte widerspiegelt.

Dank einiger Erweiterungen von WooCommerce (und einer Kernfunktion von WooCommerce) müssen Sie kein Entwickler sein, um Produktseiten Ihren eigenen Stempel aufzudrücken.

Produkt-Add-Ons

Die Produkt-Add-Ons-Erweiterung fügt Ihren Produktseiten weitere Felder hinzu, damit Käufer ihre Einkäufe anpassen können. Gestalten Sie Optionen mithilfe von Textfeldern, Kontrollkästchen oder Dropdown-Menüs und fügen Sie Variationen mit Beispielbildern hinzu – fügen Sie sie für einzelne Produkte oder für Ihren gesamten Katalog hinzu.

Produktzusätze in Aktion, mit Geschenkverpackungsoption

Perfekt für: E-Commerce-Shops, die zusätzliche Optionen wie Geschenkverpackung und Monogramme anbieten.

  • Wenn Sie ein Bekleidungsgeschäft sind, das Stickereien anbietet, lassen Sie Kunden den Text eingeben, den sie besticken möchten, bevor sie zur Kasse gehen, damit Sie sich nach dem Kauf nicht darum kümmern müssen.
  • Wenn Sie Akzentkissen verkaufen, bieten Sie Optionen für Stoff, Größe oder Stil an.
  • Wenn Sie Schmuck verkaufen, lassen Sie Kunden das Zitat auswählen, das sie auf das Stück gravieren möchten.
  • Wenn Sie verschenkbare Produkte anbieten, fügen Sie Optionen für die Geschenkverpackung oder ein Dankesschreiben hinzu.
  • Wenn Sie Elektronik verkaufen, ermöglichen Sie Käufern, eine Garantie zum Schutz ihres Artikels zu erwerben.
  • Wenn Sie eine gemeinnützige Organisation sind, lassen Sie Personen, die Sie unterstützen, beim Kauf von Waren eine Spende beilegen.

Wählen Sie, ob Sie für jedes Add-on eine Gebühr erheben oder kostenlose Anpassungen anbieten möchten. Es ist eine flexible Möglichkeit, Käufern die Optionen zu bieten, die sie benötigen.

Erfahren Sie mehr über Produkt-Add-Ons.

Variationsmuster und Fotos

Wenn Ihr Produkt Farb- oder Musterabweichungen aufweist, möchten Käufer diese in Aktion sehen. Die Erweiterung Variation Swatches and Photos zeigt Variationen – Stile, Größen, Muster, Farben usw. – mit einem Bild oder Farbmuster an, um Kunden eine bessere Vorstellung davon zu geben, was genau sie kaufen, und das Design Ihrer Produktseiten zu verbessern.

Perfekt für: E-Commerce-Shops mit variablen Produkten.

  • Wenn Sie T-Shirts verkaufen, zeigen Sie Farboptionen an.
  • Wenn Sie Brillen verkaufen, zeigen Sie alle Rahmenoptionen.
  • Wenn Sie Schmuck verkaufen, heben Sie die Anhänger hervor, aus denen Kunden wählen können.
  • Wenn Sie Skateboards verkaufen, fügen Sie Bilder der Muster hinzu, die Sie anbieten.

Erfahren Sie mehr über Variationsmuster und Fotos und sehen Sie es in Aktion.

WooCommerce 360-Bild

Mit WooCommerce 360 ​​Image können Sie Produktseiten eine dynamische, benutzerdefinierte 360-Grad-Bilddrehung hinzufügen, damit Käufer Produktdetails genauer betrachten können. Fügen Sie einer Produktgalerie eine Gruppe von Bildern hinzu, und das vorgestellte Bild wird durch ein schönes 360-Grad-Bild ersetzt, das Kunden drehen können, um alle Aspekte des Produkts zu sehen. Es ist auch vollständig responsiv, sodass Käufer auf Mobilgeräten die gleiche großartige Erfahrung machen.

Perfekt für: E-Commerce-Shops, die Kunden ein Erlebnis wie das physische Halten eines Produkts bieten möchten.

  • Wenn Sie Möbel verkaufen, können Kunden ihren Stil aus allen Blickwinkeln verstehen.
  • Wenn Sie Autoteile verkaufen, können Kunden die für sie wichtigen Details aus der Nähe betrachten.
  • Wenn Sie Uhren verkaufen, können Kunden jede Nuance, Gravur und jedes Merkmal heranzoomen.

Erfahren Sie mehr über WooCommerce 360-Bild.

Produktvideo für WooCommerce

Videos sind eine wirkungsvolle Möglichkeit, Ihre Produkte in Aktion zu präsentieren. Verwenden Sie die Produktvideo für WooCommerce-Erweiterung, um Videos zu Ihrer Produktbildgalerie hinzuzufügen oder vorgestellte Bilder durch Videos zu ersetzen. Laden Sie die Videos in Ihre WordPress-Medienbibliothek hoch oder betten Sie sie von Drittanbieterdiensten wie Vimeo oder YouTube ein.

Perfekt für: E-Commerce-Shops mit Produkten, die am besten in Aktion gezeigt werden

  • Wenn Sie Elektrowerkzeuge verkaufen, demonstrieren Sie die Größe des Werkzeugs und wie es funktioniert.
  • Wenn Sie Kleidung verkaufen, zeigen Sie, wie ein Artikel zu einer Vielzahl von Körpertypen passt und sich mit anderen Kleidungsstücken kombinieren lässt.
  • Wenn Sie Spielzeug verkaufen, fügen Sie Clips von Kindern, die mit Ihren Produkten spielen, und Erfahrungsberichte von glücklichen Eltern hinzu.

Erfahren Sie mehr über Produktvideos für WooCommerce.

Größentabelle für WooCommerce

Wenn Sie Produkte in verschiedenen Größen verkaufen, hilft eine Tabelle den Kunden zu verstehen, welche sie kaufen sollen, und reduziert die Anzahl der Rücksendungen. Die Erweiterung „Size Chart for WooCommerce“ fügt Produktseiten Größentabellen hinzu – laden Sie Ihre eigenen hoch oder erstellen Sie eine in Ihrem Dashboard. Sie können wählen, ob Diagramme in den Produktdetails oder als Pop-up angezeigt werden sollen.

Größentabelle in einem Popup

Perfekt für: E-Commerce-Shops, die Produkte in mehreren Größen verkaufen

Beispiele:

  • Wenn Sie T-Shirts verkaufen, fügen Sie eine Größentabelle mit Schulter-, Brust- und Körpermaßen hinzu.
  • Wenn Sie Möbel verkaufen, fügen Sie eine Größentabelle mit Längen-, Höhen- und Tiefenmaßen hinzu.
  • Wenn Sie Aufkleber verkaufen, fügen Sie eine Größentabelle mit Höhen- und Breitenangaben hinzu.

Erfahren Sie mehr über die Größentabelle für WooCommerce.

Produktempfehlungen

Upsells und Cross-Sells sind effektive Möglichkeiten, um die Warenkorbgröße der Kunden und Ihren Gesamtumsatz zu steigern. Verwenden Sie Produktempfehlungen, um Kunden mehr von dem zu zeigen, woran sie interessiert sind. Fügen Sie empfohlene Produkte hinzu, basierend auf beliebten, neuen, im Angebot befindlichen Produkten, was einen Look vervollständigt und mehr. Oder zeigen Sie sie basierend auf dem an, was sich bereits im Warenkorb Ihres Kunden befindet.

Produktempfehlungen unter einem Produkt

Perfekt für: E-Commerce-Shops mit mehr als einem Produkt

  • Wenn Sie Schuhe verkaufen, empfehlen Sie Socken oder Schnürsenkel.
  • Wenn Sie Ohrringe verkaufen, empfehlen Sie Armbänder und Halsketten aus derselben Kollektion.
  • Wenn Sie Spielzeug verkaufen, empfehlen Sie Puzzles, die denen ähneln, die ein Kunde in seinem Einkaufswagen hat.
  • Wenn Sie Pflanzen verkaufen, empfehlen Sie andere beliebte Sorten oder Bodenzusätze.

Erfahren Sie mehr über Produktempfehlungen.

Einfache CSS-Änderungen, keine Erweiterung erforderlich

CSS ist eine Programmiersprache, die das Design Ihrer Website steuert, von Schriftarten und Farben bis hin zu Schaltflächengrößen und Hintergründen. Wenn Sie über grundlegende CSS-Kenntnisse verfügen, navigieren Sie in Ihrem Dashboard zu Darstellung → Anpassen → Zusätzliches CSS und nehmen Sie die folgenden Änderungen vor:

Ändern Sie die Schriftgröße von Produkttiteln

Verwenden Sie den folgenden Code, um die Größe Ihrer Produkttitel auf 36 Pixel zu ändern. Ersetzen Sie die „36“ durch eine beliebige Zahl.

 .woocommerce div.product .product_title { font-size: 36px; }

Ändern Sie die Farbe von Produkttiteln

Ein Hex-Code ist ein sechsstelliger Code, der online für eine bestimmte Farbe steht. Verwenden Sie den folgenden Code, um die Farbe Ihres Produkttitels in den Hex-Code #FF5733 zu ändern. Ersetzen Sie den Hex-Code durch alles, was Sie möchten; Sie können die HTML-Farbauswahl verwenden, um den Code für jede gewünschte Farbe zu erhalten.

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

Machen Sie Variationsbezeichnungen fett

Verwenden Sie den folgenden Code, um Ihre Variationstitel in Fettdruck anzuzeigen.

 .woocommerce div.product form.cart .variations label { font-weight: bold; }

Variantenbezeichnungen kursiv darstellen

Verwenden Sie den folgenden Code, um Variationsbezeichnungen kursiv darzustellen.

 .woocommerce div.product form.cart .variations label { font-style: italic; }

Ändern Sie die Farben der Schaltfläche „Jetzt kaufen“:

Verwenden Sie diesen Code, um die Hintergrundfarbe Ihrer Schaltfläche "Jetzt kaufen" zu ändern. Verwenden Sie erneut die HTML-Farbauswahl, um den Hex-Code für die Farbe zu erhalten, die Sie verwenden möchten.

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

Beginnen Sie mit der Anpassung Ihrer Produktseiten

Bei WooCommerce dreht sich alles um Flexibilität und Anpassbarkeit, weshalb es alle Tools bietet, die Sie zum Bearbeiten des Designs und der Funktionalität von Produktseiten benötigen. Durch das Hinzufügen von Feldern, Videos, Größentabellen und mehr können Ihre Seiten so einzigartig sein wie die Produkte, die sie enthalten.

Sehen Sie sich unsere vollständige Erweiterungsbibliothek für noch mehr Optionen an.