ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Search
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
Lektüre: So erstellen Sie benutzerdefinierte WooCommerce-Produktseiten
Aktie
Benachrichtigung Zeig mehr
Neuesten Nachrichten
So fügen Sie Siri-Vorschläge zum Startbildschirm auf dem iPhone hinzu (2023)
Wie man
MacBook Pro (2023) vs. iPad Pro (2022): Was ist der Unterschied?
Gegen
macOS: So verwenden Sie Schnellaktionen im Finder
Wie man
Verwenden Sie Haptic Touch, um schnelle Aktionen auf dem iPhone auszuführen (2023)
Wie man
iOS 16.4 Beta: So aktivieren Sie die Sprachisolation für Mobiltelefonanrufe
Wie man
Aa
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Aa
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
Search
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Folge uns
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren > Blog > Tipps > So erstellen Sie benutzerdefinierte WooCommerce-Produktseiten
Tipps

So erstellen Sie benutzerdefinierte WooCommerce-Produktseiten

Zuletzt aktualisiert: November 13, 2021 11:24 am
ThemeLocal vor 1 Jahr 10 Minuten Mindestlesezeit
Aktie
10 Minuten Mindestlesezeit
Aktie

Möchten Sie erfahren, wie Sie Ihre WooCommerce-Produktseiten einfach anpassen können? Wenn Sie einen Online-Shop betreiben, möchten Sie wahrscheinlich sicherstellen, dass Ihre Einzelproduktseiten gut aussehen, richtig organisiert sind und zu Ihrem Branding passen. Dies kann schwierig sein, wenn Sie sich nur auf WooCommerce und Ihr Theme verlassen, um Änderungen vorzunehmen, da Sie mehr oder weniger beim Standardlayout festsitzen.

Contents
1. Bearbeiten Sie das kosmetische Styling Ihrer ProduktseitenWooCommerce-FarbenGelbBleistiftCSS-Held2. Neue Elemente zu Produktlisten hinzufügenWooCommerce Einzelproduktseiten-AnpasserBenutzerdefinierte Produktregisterkarten für WooCommerceProduktvideo für WooCommerce3. Erstellen Sie vollständig kundenspezifische ProdukteToolsetErstellen Sie Ihre Vorlage mit dynamischem Inhalt und vollständig benutzerdefiniertem DesignWählen Sie bestimmte Anzeigekriterien für Ihre VorlagenPassen Sie Ihren WooCommerce-Shop mit noch mehr Funktionalität weiter anDie Auswahl der richtigen WooCommerce-Tools für Sie

Standard-WooCommerce-Produkt

Stattdessen können Sie andere Plugins verwenden, um Folgendes zu tun:

  • Zusätzliche Inhaltselemente hinzufügen
  • Schriftarten und Farben ändern
  • Änderungen an der Seitenstruktur vornehmen
  • Oder passen Sie Ihre Produktseiten sogar komplett von Grund auf an

…alles ohne Codierung!

Einige Ideen für vollständig benutzerdefinierte Produktvorlagen:

Beispiele für maßgeschneiderte WooCommerce-Produkte

Finden Sie unten das perfekte Plugin, um Ihre Produktseiten an Ihre Bedürfnisse anzupassen!

1. Bearbeiten Sie das kosmetische Styling Ihrer Produktseiten

Hier sind einige großartige Plugins, wenn Sie nur nach ein paar kleinen kosmetischen Optimierungen suchen, z. B. Änderungen an Ihren Schriftarten, Farben oder Änderungen an einzelnen Elementen.

WooCommerce-Farben

WooCommerce-Farben

Infos & DownloadDemo ansehen

Mit WooCommerce Colors können Sie die Farben verschiedener WooCommerce-Elemente wie die Schaltfläche „In den Warenkorb“, den Produktpreis und mehr anpassen. Sie können diese Änderungen mit dem nativen WordPress Customizer vornehmen.

WooCommerce Colors-Plugin

Ändern der Farbe der Schaltfläche „In den Warenkorb“ mit dem WooCommerce Colors-Plugin

Dies ist ein einfaches, unkompliziertes Plugin, das keine CSS-Kenntnisse erfordert. Sie können jedoch nur die Farben anpassen, und Sie können einige Farben je nach Thema möglicherweise nicht überschreiben.

Preis: Kostenlos

GelbBleistift

Infos & DownloadDemo ansehen

YellowPencil ermöglicht es Ihnen, Ihre Schriftarten, Farben, Schriftgrößen, Abstände zwischen Elementen zu ändern und sogar animierte visuelle Effekte auf dem Frontend Ihrer Site hinzuzufügen. Es gibt viele Styling-Optionen in der kostenlosen Version, aber Yellow Pencil Pro fügt erweiterte Optionen für Farbverläufe, Animationen, benutzerdefinierte Schriftarten, Farbpaletten, Hintergrundbilder und mehr hinzu.

YellowPencil-Plugin

Ändern der Titelschrift, Preisfarbe und Schaltflächenfarbe einer Produktseite mit dem YellowPencil-Plugin

YellowPencil funktioniert auf jeder Seite Ihrer Website – nicht nur auf Ihren Produktseiten. Es generiert automatisch CSS-Code für Ihre Website, während Sie sie verwenden, und speichert ihn in Ihrer Datenbank statt in Ihrer Designdatei. Dadurch wird sichergestellt, dass Sie Ihre Änderungen nicht verlieren, wenn Sie Ihre Designs aktualisieren.

YellowPencil ermöglicht es Ihnen, Elemente in Ihrer Vorlage neu anzuordnen, aber Sie können keine neuen Elemente hinzufügen. Daher sind Sie auf die Elemente beschränkt, die bereits in der Standardvorlage für ein einzelnes Produkt vorhanden sind.

Preis: Kostenlos, mit kostenpflichtigen Upgrade-Optionen

CSS-Held

CSS Hero Live CSS Editor-Plugin

Info & DownloadDemo ansehen

Was es macht: CSS Hero ist ein visueller Editor, mit dem Sie Änderungen am Stil Ihrer Website vornehmen können, indem Sie das CSS automatisch anpassen, wenn Sie visuelle Änderungen vornehmen.

CSS Hero-Plugin

Ändern der Farbe der Schaltfläche „In den Warenkorb“ mit dem CSS Hero-Plugin

Passen Sie die Elemente Ihrer Vorlage an, indem Sie Farben, Schriftarten, responsive Breakpoints und mehr ändern. Sie können auch Elemente ausblenden oder den Stil bestimmter Elemente speichern, um sie an anderen Stellen auf Ihrer Site wiederzuverwenden.

Sie können jedoch keine neuen Elemente neu anordnen oder neue Elemente hinzufügen, sodass Sie auf das Layout und die Elemente beschränkt sind, die bereits in der Produktvorlage vorhanden sind.

Preis: Bezahlt, ab 29 USD pro Jahr

2. Neue Elemente zu Produktlisten hinzufügen

Wenn Sie Ihren Seiten zusätzliche Elemente hinzufügen möchten, z. B. Orte für zusätzliche Inhalte oder Produktvideos, bieten diese Plug-ins Möglichkeiten, diese Elemente zu Ihren einzelnen Produktseiten hinzuzufügen.

WooCommerce Einzelproduktseiten-Anpasser

WooCommerce Einzelproduktseiten-Anpasser

Infos & DownloadDemo ansehen

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

Sie können beispielsweise Informationen wie eine Größentabelle, Versandinformationen oder einen Link zu den Rückgaberichtlinien Ihres Shops hinzufügen. Diese Informationen werden dann für alle Ihre Produkte angezeigt.

Einzelproduktseiten-Anpasser

Dies ist ein sehr unkompliziertes und einfach zu bedienendes Plugin, das jedoch in seinen Möglichkeiten eingeschränkt ist. Sie können beispielsweise nicht auswählen, dass nur Informationen für einige Produkte angezeigt werden. Sie können Ihrer Vorlage auch keine anderen Elementtypen hinzufügen und keine der vorhandenen Elemente neu anordnen.

Preis: Kostenlos

Benutzerdefinierte Produktregisterkarten für WooCommerce

YIKES Custom Product Tabs für WooCommerce Free Plugin

Infos & DownloadDemo ansehen

Mit benutzerdefinierten Produktregisterkarten für WooCommerce können Sie Ihren Produktseiten zusätzliche Registerkarten mit Text, Bildern, HTML oder Shortcodes hinzufügen. Sie können dann auswählen, für welche Produkte die Informationen angezeigt werden sollen.

Sie können dieses Plugin verwenden, um zusätzliche Informationen zu Herstellern anzuzeigen, Ihre Rückgabebedingungen zu teilen oder zusätzliche Fotos hinzuzufügen, ohne die Produktseite zu überladen.

Benutzerdefinierte Produktregisterkarten für WooCommerce

Auch dieses Plugin hat einen sehr fokussierten Zweck. Es ist mit diesem Plugin nicht möglich, einen anderen Teil Ihrer Produktvorlagen anzupassen, außer Registerkarten mit zusätzlichem Inhalt hinzuzufügen.

Wenn Sie produktspezifische Inhalte in Ihren Tabs anzeigen möchten, z. B. Größentabellen pro Produkt, können Sie dies nicht durch dynamisches Einblenden von Produktinformationen tun. Stattdessen müssen Sie für jedes Produkt individuelle Registerkarten mit den spezifischen Inhalten erstellen und diese dem richtigen Produkt hinzufügen.

Preis: Kostenlos, mit einer kostenpflichtigen Pro-Version

Produktvideo für WooCommerce

Produktvideo für WooCommerce

Infos & DownloadDemo ansehen

Mit Produktvideo für WooCommerce können Sie Ihren Produktseiten oder Ihrer Produktgalerie Videos hinzufügen. Sie können YouTube-, Vimeo-, Dailymotion-, Metacafe- oder Facebook-Videos einbetten oder Ihre eigenen hochladen. Es bietet auch mehrere Anzeigeoptionen: in einem Popup, auf Ihrer Seite und im Vollbildmodus.

Produktvideo für WooCommerce

Das Plugin gibt Ihnen viel Kontrolle darüber, wie Ihr Video angezeigt wird. Sie können die Abmessungen Ihres Videos anpassen, die automatische Wiedergabe aktivieren, das Video in einer Schleife abspielen und ein bestimmtes Miniaturbild hochladen.

Wie bei den anderen Plugins in dieser Kategorie sind die Funktionen dieses Plugins auf Videos beschränkt. Sie können mit diesem Plugin keinen anderen Teil der Produktvorlage anpassen.

Preis: Bezahlt, derzeit $49

3. Erstellen Sie vollständig kundenspezifische Produkte

Wenn Sie nach Produktseiten suchen, die für Sie völlig einzigartig sind, können Sie vollständig benutzerdefinierte Seiten – und ganze Websites – erstellen, mit denen Sie Stil, Seitenlayout und mehr festlegen können.

Toolset

Toolset benutzerdefinierte WooCommerce-Felder

Info & DownloadDemo ansehen

Toolset gibt Ihnen die Möglichkeit, Ihre Produktvorlagen komplett von Grund auf mit dem gewünschten Layout, Styling und Seitenelementen zu erstellen, alles ohne Codierung.

Preis: Bezahlt, Pläne ab 69 $

Erstellen Sie Ihre Vorlage mit dynamischem Inhalt und vollständig benutzerdefiniertem Design

Mit Toolset können Sie Ihre Produktvorlage ganz einfach mit WooCommerce- und Toolset-Blöcken erstellen und diese Blöcke mit dynamischen Inhalten füllen. Das bedeutet, dass Sie die Vorlage nur einmal entwerfen müssen, und je nach Produkt werden automatisch der richtige Produktname, die Beschreibung, der Preis, die Bewertungen und mehr übernommen.

Sobald Ihre Produktvorlage erstellt wurde, können Sie die Fülle an Styling-Optionen verwenden, um sie genau so aussehen zu lassen, wie Sie es möchten, ohne an Standardoptionen gebunden zu sein.

Toolset benutzerdefinierte Produktvorlage

Wählen Sie bestimmte Anzeigekriterien für Ihre Vorlagen

Sie können auch verschiedene Vorlagen für verschiedene Kriterien entwerfen: Sie können beispielsweise verschiedene Vorlagen für nicht vorrätige Artikel, für verschiedene Produktkategorien oder -attribute erstellen und sogar Prioritäten zuweisen, falls mehrere Vorlagen auf ein Produkt zutreffen.

Toolset-Vorlage für nicht vorrätige Produkte

Passen Sie Ihren WooCommerce-Shop mit noch mehr Funktionalität weiter an

Beliebte Page Builder wie Elementor Pro, Divi und WPBakery bieten auch 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 verwendet werden.

Toolset passen Sie Ihren WooCommerce-Shop an

Sie können zum Beispiel:

  • Erstellen Sie Front-End-Formulare, mit denen Ihre Anbieter ihre Produkte zu Ihrer Website hinzufügen können
  • Erstellen Sie Post-Beziehungen, die es Ihnen ermöglichen, Ihre Produkte mit anderen Post-Typen (z. B. „Outfits“) zu verbinden.
  • Zeigen Sie Ihre Filialen auf einer Karte an
  • Fügen Sie leistungsstarke Such- und Filterfunktionen hinzu
  • Erstellen Sie zusätzliche benutzerdefinierte Felder, um Ihre Produkte weiter zu definieren

Toolset passen Sie Ihren WooCommerce-Shop an

Die Auswahl der richtigen WooCommerce-Tools für Sie

Wenn Ihnen die Optionen, die Ihnen durch WooCommerce oder Ihr Theme zur Verfügung stehen, nicht gefallen, gibt es keinen Mangel an kostenlosen und kostenpflichtigen Plugins, um Ihren Shop genau so zu gestalten, wie Sie es möchten.

Der Aufbau eines benutzerdefinierten WooCommerce-Shops muss nicht schwierig sein oder eine teure benutzerdefinierte Programmierung erfordern. Mit den Plugins in diesem Artikel können Sie fortschrittliche, schöne und funktionale WooCommerce-Shops erstellen – keine Codierung erforderlich!

Verwandter Beitrag

So fügen Sie Siri-Vorschläge zum Startbildschirm auf dem iPhone hinzu (2023)

macOS: So verwenden Sie Schnellaktionen im Finder

Verwenden Sie Haptic Touch, um schnelle Aktionen auf dem iPhone auszuführen (2023)

iOS 16.4 Beta: So aktivieren Sie die Sprachisolation für Mobiltelefonanrufe

So erstellen Sie ein GIF in Photoshop

MARKIERTE: benutzerdefinierte, erstellen, Sie, WooCommerceProduktseiten
ThemeLocal November 13, 2021
Teile diesen Artikel
Facebook Twitter Pinterest Whatsapp Whatsapp
Aktie
Was denkst du?
Liebe0
Traurig0
Glücklich0
Schläfrig0
Wütend0
kein Kommentar0
Zwinkern0
Vorheriger Artikel Die besten Beauty- und Salon-WordPress-Themes
Nächster Artikel Wie man PDF-Dateien in WordPress einbettet
Hinterlasse einen Kommentar

Schreibe einen Kommentar Antworten abbrechen

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

Berühmter Post

Das M1 MacBook Air ist wieder zu einem sehr verlockenden Preis erhältlich
Angebote
App Store funktioniert nicht? So beheben Sie häufige Probleme im App Store (2023)
Wie man
So ändern Sie den Hintergrund auf dem iPhone basierend auf der Tageszeit (2023)
Wie man
Bewertung: OWC ThunderBay 8 bietet hochvolumigen, leistungsstarken Mac-Speicher
Technische Bewertungen
Das Honor Magic 5 Lite ist mit einem unglaublichen Angebot auf den Markt gekommen
Angebote
WhatsApp vs. Signal: Welche Messaging-App ist besser?
Gegen

También podría gustarte

Wie man

So fügen Sie Siri-Vorschläge zum Startbildschirm auf dem iPhone hinzu (2023)

vor 17 Minuten 4 Minuten Mindestlesezeit
Wie man

macOS: So verwenden Sie Schnellaktionen im Finder

vor 4 Stunden 3 Minuten Mindestlesezeit
Wie man

Verwenden Sie Haptic Touch, um schnelle Aktionen auf dem iPhone auszuführen (2023)

vor 5 Stunden 4 Minuten Mindestlesezeit
Wie man

iOS 16.4 Beta: So aktivieren Sie die Sprachisolation für Mobiltelefonanrufe

vor 9 Stunden 3 Minuten Mindestlesezeit
Wie man

So erstellen Sie ein GIF in Photoshop

vor 12 Stunden 3 Minuten Mindestlesezeit
Gegen

Vollformat vs. APS-C: Welchen Kamerasensor sollten Sie wählen?

vor 13 Stunden 3 Minuten Mindestlesezeit
Wie man

SharePlay: So trainieren Sie mit Freunden mit Apple Fitness Plus

vor 13 Stunden 3 Minuten Mindestlesezeit
Angebote

Mit diesem SIM-Karten-Schnäppchen erhalten Sie 60 GB Daten für nur 10 £

vor 17 Stunden 2 Minuten Mindestlesezeit
Zeig mehr
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Folge uns

© 2022 Themelocal. Alle Rechte vorbehalten.

  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

Removed from reading list

Rückgängig machen
Welcome Back!

Sign in to your account

Passwort vergessen?