woocommerce shop

Wie man benutzerdefinierte WooCommerce Produktseiten erstellt – 11blog

Willst du lernen, wie du deine WooCommerce-Produktseiten einfach anpassen kannst? Wenn du einen Online-Shop betreibst, möchtest du wahrscheinlich sicherstellen, dass deine einzelnen Produktseiten gut aussehen, richtig organisiert sind und zu deinem Branding passen. Das kann schwierig sein, wenn du dich nur auf WooCommerce und dein Theme verlässt, um Änderungen vorzunehmen, weil du mehr oder weniger auf das Standardlayout festgelegt bist.

Anstattdessen kannst du andere Plugins verwenden, um Dinge zu tun wie:

  • Hinzufügen von zusätzlichen Inhaltselementen
  • Schriftarten und Farben ändern
  • Änderungen an der Seitenstruktur vornehmen
  • Oder sogar deine Produktseiten komplett von Grund auf anpassen

…alles ohne Programmierung!

Ein paar Ideen für vollständig angepasste Produktvorlagen:

Finde unten das perfekte Plugin, um deine Produktseiten nach deinen Wünschen anzupassen!

1. Bearbeite das kosmetische Styling deiner Produktseiten

Hier sind einige großartige Plugins, wenn du nur ein paar kleine kosmetische Anpassungen brauchst, wie z.B. Änderungen an deinen Schriften, Farben oder Änderungen an einzelnen Elementen.

WooCommerce Farben

Info & Download
Die Demo ansehen

WooCommerce Colors ermöglicht es dir, die Farben verschiedener WooCommerce-Elemente wie den Add to Cart-Button, den Produktpreis und mehr anzupassen. Du kannst diese Änderungen über den nativen WordPress Customizer vornehmen.

Ändern der Farbe des Add to Cart Buttons mit dem WooCommerce Colors Plugin

Dies ist ein einfaches, unkompliziertes Plugin, das keine CSS-Kenntnisse erfordert. Allerdings erlaubt es dir nur, die Farben anzupassen, und je nach deinem Theme kannst du einige Farben nicht überschreiben.

Preis: Kostenlos

YellowPencil

Info & Download
Die Demo ansehen

YellowPencil erlaubt es dir, deine Schriftarten, Farben, Schriftgrößen, Abstände zwischen den Elementen zu ändern und sogar animierte visuelle Effekte auf dem Frontend deiner Seite hinzuzufügen. Es gibt viele Styling-Optionen in der kostenlosen Version, aber Yellow Pencil Pro fügt erweiterte Optionen für Verläufe, Animationen, benutzerdefinierte Schriftarten, Farbpaletten, Hintergrundbilder und mehr hinzu.

Ändern der Schriftart des Titels einer Produktseite, der Preisfarbe und der Farbe des Buttons mit dem YellowPencil Plugin

YellowPencil funktioniert auf jeder Seite deiner Website – nicht nur auf deinen Produktseiten. Es generiert automatisch CSS-Code für deine Seite, während du ihn verwendest, und speichert ihn in deiner Datenbank und nicht in deiner Theme-Datei. Dies stellt sicher, dass du deine Änderungen nicht verlierst, wenn du dein Theme aktualisierst.

YellowPencil erlaubt es dir, Elemente in deinem Template neu anzuordnen, aber du kannst keine neuen Elemente hinzufügen. Somit bist du auf die Elemente beschränkt, die bereits in der Standard-Einzelproduktvorlage vorhanden sind.

Preis: Kostenlos, mit kostenpflichtigen Upgrade-Optionen

CSS Hero

Info & Download.
Die Demo ansehen

Was es macht: CSS Hero ist ein visueller Editor, der es dir erlaubt, Styling-Änderungen an deiner Seite vorzunehmen, indem er das CSS automatisch anpasst, während du visuelle Änderungen vornimmst.

Ändern der Farbe des Add to Cart Buttons mit dem CSS Hero Plugin

Passe die Elemente deines Templates an, indem du die Farben, Schriftarten, responsive Breakpoints und mehr änderst. Du kannst auch Elemente ausblenden oder das Styling bestimmter Elemente speichern, um sie an anderen Stellen auf deiner Seite wiederzuverwenden.

Du kannst allerdings keine neuen Elemente anordnen oder hinzufügen, du bist also auf das Layout und die Elemente beschränkt, die bereits in der Produktvorlage vorhanden sind.

Preis: Bezahlt, ab $29 pro Jahr

2. Neue Elemente zu Produktlisten hinzufügen

Wenn du zusätzliche Elemente zu deinen Seiten hinzufügen möchtest, wie z.B. Platz für zusätzliche Inhalte oder Produktvideos, bieten diese Plugins Möglichkeiten, diese Elemente zu deinen einzelnen Produktseiten hinzuzufügen.

WooCommerce Single Product Page Customizer

Info & Download
Die Demo ansehen

WooCommerce Single Product Page Customizer ermöglicht es dir, Felder mit benutzerdefiniertem Text oder HTML in deiner Produktvorlage hinzuzufügen und zu wählen, wo auf der Seite sie angezeigt werden sollen.

Du kannst z.B. Informationen wie eine Größenangabe für Kleidung, Versandinformationen oder einen Link zu den Rückgaberichtlinien deines Shops hinzufügen. Diese Informationen werden dann für alle deine Produkte angezeigt.

Dies ist ein sehr einfaches und leicht zu bedienendes Plugin, aber es ist eingeschränkt in dem, was du damit machen kannst. Du kannst zum Beispiel nicht auswählen, dass nur Informationen für bestimmte Produkte angezeigt werden. Du kannst auch keine anderen Arten von Elementen zu deiner Vorlage hinzufügen, und du kannst keine der vorhandenen Elemente neu anordnen.

Preis: Kostenlos

Benutzerdefinierte Produkttabs für WooCommerce

Info & Download.
Demo ansehen

Custom Product Tabs for WooCommerce ermöglicht es dir, zusätzliche Tabs aus Text, Bildern, HTML oder Shortcodes auf deinen Produktseiten hinzuzufügen. Du kannst dann auswählen, für welche Produkte die Informationen angezeigt werden sollen.

Du kannst dieses Plugin nutzen, um zusätzliche Informationen über Hersteller anzuzeigen, deine Rückgabebedingungen mitzuteilen oder zusätzliche Fotos hinzuzufügen, ohne die Produktseite zu überladen.

Auch dieses Plugin hat einen sehr fokussierten Zweck. Es ist nicht möglich, irgendeinen anderen Teil deiner Produktvorlagen mit diesem Plugin anzupassen, außer Tabs mit zusätzlichen Inhalten hinzuzufügen.

Wenn du produktspezifische Inhalte in deinen Tabs anzeigen möchtest, wie z.B. Größentabellen pro Produkt, wirst du das nicht tun können, indem du die Produktinformationen dynamisch einliest. Stattdessen musst du einzelne Tabs für jedes Produkt mit dem spezifischen Inhalt erstellen und sie dem richtigen Produkt hinzufügen.

Preis: Kostenlos, mit einer kostenpflichtigen Pro-Version

Produktvideo für WooCommerce

Info & Download
Demo ansehen

Product Video for WooCommerce ermöglicht es dir, Videos zu deinen Produktseiten oder deiner Produktgalerie hinzuzufügen. Du kannst wählen, ob du YouTube-, Vimeo-, Dailymotion-, Metacafe- oder Facebook-Videos einbetten oder deine eigenen hochladen möchtest. Außerdem bietet es mehrere Anzeigeoptionen: in einem Popup, innerhalb deiner Seite und im Vollbildmodus.

Das Plugin gibt dir eine Menge Kontrolle darüber, wie dein Video angezeigt wird. Du kannst die Abmessungen deines Videos anpassen, Autoplay aktivieren, das Video in einer Schleife abspielen und ein bestimmtes Thumbnail-Bild hochladen.

Wie bei den anderen Plugins in dieser Kategorie, sind die Funktionen dieses Plugins auf Videos beschränkt. Du kannst keinen anderen Teil der Produktvorlage mit diesem Plugin anpassen.

Preis: Bezahlt, derzeit $49

3. Vollständig angepasste Produkte erstellen

Wenn du nach Produktseiten suchst, die komplett einzigartig für dich sind, kannst du komplett benutzerdefinierte Seiten – und ganze Websites – erstellen, die es dir erlauben, das Styling, das Seitenlayout und mehr zu bestimmen.

Toolset

Info & Download
Die Demo ansehen

Toolset gibt dir die Möglichkeit, deine Produktvorlagen komplett von Grund auf mit dem Layout, dem Styling und den Seitenelementen zu erstellen, die du möchtest, ganz ohne Programmierung.

Preis: Bezahlt, Pläne ab $69

Baue dein Template mit dynamischen Inhalten und komplett individuellem Styling

Mit Toolset kannst du deine Produktvorlage ganz einfach mit WooCommerce- und Toolset-Blöcken erstellen und diese Blöcke mit dynamischen Inhalten füllen. Das bedeutet, dass du die Vorlage nur einmal entwerfen musst, und sie zieht je nach Produkt automatisch den richtigen Produktnamen, die Beschreibung, den Preis, die Bewertungen und mehr ein.

>

Sobald deine Produktvorlage erstellt ist, kannst du die Fülle an Styling-Optionen nutzen, um sie genau so aussehen zu lassen, wie du es möchtest, ohne an irgendwelche Standardoptionen gebunden zu sein.

Wählen Sie spezifische Anzeigekriterien für Ihre Vorlagen

Du kannst auch verschiedene Vorlagen für verschiedene Kriterien gestalten: zum Beispiel kannst du verschiedene Vorlagen für nicht vorrätige Artikel, für verschiedene Produktkategorien oder Attribute gestalten und sogar Prioritäten zuweisen, falls mehrere Vorlagen auf ein Produkt zutreffen.

Weitere Anpassung deines WooCommerce Stores mit noch mehr Funktionen

Populäre Page Builder wie Elementor Pro, Divi und WPBakery bieten ebenfalls Optionen zum Erstellen und Anpassen von WooCommerce Produktseiten. Die zusätzlichen Funktionen, die mit der Plugin-Suite von Toolset verfügbar sind, können speziell für WooCommerce-Shops oder andere Arten von Websites genutzt werden.

Du kannst zum Beispiel:

  • Front-End-Formulare erstellen, die es deinen Verkäufern ermöglichen, ihre Produkte auf deiner Seite hinzuzufügen
  • Erstelle Beitragsbeziehungen, die es dir ermöglichen, deine Produkte mit anderen Beitragstypen zu verbinden (wie z.B. “Outfits”)
  • Darstellung der Standorte deiner Geschäfte auf einer Karte
  • Füge leistungsstarke Such- und Filterfunktionen hinzu
  • Erstelle zusätzliche benutzerdefinierte Felder, um deine Produkte weiter zu definieren

Die Auswahl der richtigen WooCommerce Tools für dich

Wenn dir die Optionen, die dir über WooCommerce oder dein Theme zur Verfügung stehen, nicht gefallen, gibt es eine Vielzahl an kostenlosen und kostenpflichtigen Plugins, mit denen du deinen Shop genau so gestalten kannst, wie du es möchtest.

Einen WooCommerce-Shop nach deinen Wünschen zu erstellen, muss nicht schwierig sein oder eine teure Programmierung erfordern. Mit den Plugins in diesem Artikel kannst du fortschrittliche, schöne und funktionale WooCommerce Shops erstellen – ohne Programmierung!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.