So passen Sie Ihre WooCommerce-Produktseite an
Veröffentlicht: 2022-10-18Die Produktseiten auf jeder E-Commerce-Website werden als wichtigster Teil gefordert. Denn es enthält alle Details zu einem Produkt in geordneter Form mit Zusatzinformationen wie verwandten Produkten etc.
Die standardmäßige WooCommerce -Produktseite eignet sich gut für die grundlegende Produktschnellansicht , das Hinzufügen zum Warenkorb und andere grundlegende Funktionen, aber dies reicht in der modernen wettbewerbsorientierten E-Commerce-Umgebung einfach nicht aus. Die Produktseite spielt in jeder von WooCommerce erstellten Geschäftsplattform als eine der wichtigsten Seiten eine entscheidende Rolle. Die Standardseite schneidet es jedoch einfach nicht.
Die Bedeutung der Anpassung von Produktseiten kann nicht genug betont werden.
Durch die Anpassung Ihrer Produktseiten bieten Sie Ihren Kunden im Wesentlichen ein einzigartiges Einkaufserlebnis, das auch für die Besucherbindung und die Steigerung der Verkaufszahlen wichtig ist.
In diesem Beitrag führen wir Sie durch den Prozess, wie Sie einen WooCommerce-Produktseiten-Editor und benutzerdefinierte WooCommerce-Widgets verwenden, um attraktive Produktseiten zu erstellen, und vieles mehr.
Inhaltsverzeichnis
Erforderliche Tools zum Anpassen der WooCommerce-Produktseite?
In erster Linie müssen Sie die neueste Version von WordPress auf Ihrem Server installiert haben, und darüber hinaus muss das WooCommerce-Plugin installiert sein, um alle Funktionen der Shop-/Shop-Seite zu berücksichtigen.
Sie benötigen außerdem ein funktionsorientiertes E- Commerce-WordPress-Theme und nicht zuletzt ein WooCommerce Elementor Shop Builder - Plugin. Mit dem Elementor-Shop-Builder-Plugin können Sie einzelne Shop-Seiten und das Marktplatz-Produktraster, die Produktliste, Produktvergleichsblöcke usw. vollständig steuern und anpassen.
So passen Sie die WooCommerce-Produktseite an
Wir hoffen, dass Sie eine funktionierende Installation von WordPress und ein funktionierendes E-Commerce-Thema bereits auf Ihrem Server installiert haben. Lassen Sie uns nun Schritt für Schritt den Prozess der Produktseitenanpassung durchgehen, beginnend mit zusätzlichen WordPress-Ressourcen und -Tools, die erforderlich sind.
Schritt 1: Installation eines Elementor WooCommerce-Add-on-Plugins
In diesem Live-Beispiel zum Anpassen einer WooCommerce-Produktseite mit verschiedenen Elementen und WooCommerce-Produktvariationsmustern, die den Kunden auf einer modernen Produktseite präsentiert werden sollen, verwenden wir etwas Ähnliches wie den visuellen Komponisten des WooCommerce-Produktseitenerstellers – genannt ShopReady.
Der Shop-Builder ShopReady Elementor ist ein erstaunliches, allumfassendes gebündeltes Tool zum Erstellen robuster E-Commerce-Shop-Websites. Das Plugin enthält über 105 professionell gestaltete Widgets mit anwendungsfallspezifischen Funktionen und Tools. Mit diesem E-Commerce-Plugin können Sie beispielsweise einen funktionalen WooCommerce-Produktfilter erstellen, der Produkte nach Preis, Größe, Gewicht, Farbe, Bewertung, Versand usw. filtern kann.
Um mit diesem WooCommerce-Addon-Plugin zu beginnen, laden Sie es zunächst herunter. Melden Sie sich dazu bei Ihrem WordPress-Dashboard an, gehen Sie zu Und klicken Sie auf die Schaltfläche Installieren .
Warten Sie bis zur erfolgreichen Installation des Plugins und klicken Sie auf Aktivieren .
Das ShopReady-Menü wird in Ihrem WordPress-Dashboard angezeigt. Von hier aus haben Sie Zugriff auf alle Widgets, Module und voreingestellten Inhalte, die vom Shop-Seiten-Customizer-Plugin bereitgestellt werden.
Über dieses einfache Menü können Sie Widgets aktivieren/deaktivieren, Vorlagen erstellen und API-Schlüssel für verschiedene Funktionen einfügen.
Ein weiteres großartiges Feature dieses Plugins ist der Währungsumschalter für die WooCommerce-Fähigkeit. Um diese Funktion zu aktivieren, müssen Sie die nachstehenden Anweisungen befolgen.
Um Ihren von Exchangerate erstellten Währungs-API-Schlüssel hinzuzufügen , klicken Sie auf die Registerkarte API.
Melden Sie sich bei Ihrem Exchangerate-Konto-Dashboard an und kopieren Sie Ihren API-Schlüssel, um ihn zu erhalten. Gehen Sie nach dem Einfügen Ihres API-Schlüssels zu Ihrem WordPress-Dashboard > ShopReady > API und klicken Sie auf Schritt 2: Verwenden Sie eine voreingestellte Produktseitenvorlage oder erstellen Sie eine von Grund auf neu
Der nächste Schritt besteht darin, mit der Arbeit an einer Produktseite zu beginnen, aber vorher müssen Sie Produkte zu Ihrer WooCommerce-Website hinzufügen. Wenn Sie nicht wissen, wie das geht, können Sie dieser Anleitung folgen – So fügen Sie WooCommerce-Produkte schnell hinzu .
Um nun mit dem Anpassen einer Seite für eine Produktpräsentation zu beginnen, verwenden Sie den ShopReady – WooCommerce Builder, um eine einfache Produktseite zu erstellen, indem Sie zum Plugin-Dashboard gehen und auf die Registerkarte Vorlagen klicken . Aktivieren Sie die Kategorie Produktvorlage und suchen Sie nach der Einrichtung eines einzelnen Produkts. Klicken Sie nun auf das Bearbeitungssymbol.
Und Sie werden zum Bildschirm des Elementor-Editors weitergeleitet. Um nun mit dem Anpassen der Seite zu beginnen, klicken Sie auf das Plus-Symbol, um Elementor-Abschnitte hinzuzufügen. Es gibt verschiedene Arten von Elementor-Abschnitten, die Sie Ihrer Seite hinzufügen können, je nachdem, wie Ihre Seite aussehen soll und welche Widgets Sie verwenden möchten.
Schritt 3: Anpassung der WooCommerce-Produktseite mit Elementor-Widgets
- Hinzufügen eines Produkttitels
Da Sie nun eine grundlegende Elementor-Abschnittsstruktur für Ihre WooCommerce-Produktseite platziert haben, können Sie damit beginnen, einen Produkttitel hinzuzufügen. Dazu müssen Sie das Produkttitel-Widget per Drag-and-Drop auf die Produktseite ziehen.
Und um den entsprechenden Produkttitel anzuzeigen, klicken Sie auf die Registerkarte Inhalt , und darunter finden Sie die Editor-Aktualisierungsoptionen . Wählen Sie den entsprechenden Produkttitel aus der Option Demoprodukt aus .
Sie müssen die entsprechenden Produktinformationen aus dem WooCommerce-Produkt-Dashboard hinzufügen oder bearbeiten , damit diese Daten den entsprechenden Produkttitel anzeigen.
- Hinzufügen eines empfohlenen Bildes zur Produktseite
Als nächstes benötigen Sie Ihre Produktbildgalerie und Ihr Funktionsbild für Ihr Produkt. Zu diesem Zweck können Sie eines der zahlreichen Bild-Widgets verwenden, die vom All-in-One-Elementor-Addon für E-Commerce bereitgestellt werden.
In diesem Beispiel verwenden wir das ShopReady-Thumbnail mit Zoom-Widget, es tut, was sein Titel vermuten lässt. Mit diesem Widget können Sie Ihren Kunden eine WooCommerce-Produkt-Hover-Zoom-Version Ihres Produktbilds zeigen, wenn sie mit der Maus über Ihr Produktbild fahren.
Wie zuvor können Sie das richtige Produktbild aus der Option „ Demo -Produkt“ auf der Registerkarte „ Inhalt “ auswählen.
- Hinzufügen eines Blocks für das Preisgestaltungs-Widget
Ein weiterer wichtiger Punkt auf Ihrer E-Commerce-Produktseite ist der Produktpreisblock. Dazu müssen Sie die WooCommerce-Produktattribute mit den richtigen Updates aktualisieren und das ShopReady- Preis - Widget verwenden, das unter dem Produkttitel platziert werden muss.
Um den korrekten Preis anzuzeigen, wählen Sie den Produkttitel aus der Option Demoprodukt auf der Registerkarte Inhalt aus .
- Produktbeschreibung hinzufügen
Sie haben auch die Möglichkeit, mithilfe dieses Produktbeschreibungs-Widgets für WooCommerce-Produkt-Add-Ons hochgradig anpassbare Produktbeschreibungen hinzuzufügen . Auf der Registerkarte „Stil“ haben Sie die Möglichkeit, anzupassen, wie die Produktbeschreibung der Masse angezeigt wird.
- Hinzufügen der „In den Warenkorb“-Funktion
In den Warenkorb legen ist eine weitere sehr wichtige Funktion, die es Ihren Kunden ermöglicht, mehrere Produkte auf ihrer Warenkorbseite zu haben, bevor sie zur Kassenseite gehen.
Um auf Ihrer E-Commerce-Shop-Seite eine robuste „In den Warenkorb“-Funktion zu haben , können Sie das ShopReady „In den Warenkorb“-Widget verwenden. Mit diesem Widget können Sie Ihren Kunden ermöglichen, die Produktmenge ihres Warenkorbs direkt aus dem Block „In den Warenkorb“ zu erhöhen und zu verringern.
Sie können auch Ihre Elementor-In-den-Warenkorb-Schaltfläche über die Typografie, Farbe, Hintergrund, Rand, Polsterung usw. des WooCommerce-Produktstils auf der Registerkarte Elementor-Stil anpassen.
- Hinzufügen von Metadaten zur Produktseite
Um Ihren Kunden ein besseres Einkaufserlebnis zu bieten, sollten Sie einen WooCommerce-Produktfilter implementieren, der die Metadaten und Produktattribute verwendet, die Sie beim Hinzufügen von Produkten zu WooCommerce hinzugefügt haben .
Um diese Daten auf Ihrer Produktseite anzuzeigen, suchen Sie nach dem ShopReady-Meta -Widget und legen Sie es unter der Schaltfläche „In den Warenkorb“ ab.
Ihre Produkt-Tags und Metadaten sollten korrekt angezeigt werden, wenn Sie den richtigen Produkttitel aus der Option „ Demo-Produkt “ auf der Registerkarte „ Inhalt “ auswählen.
- Hinzufügen von Social Media Share Buttons zur Produktseite
Ihre Kunden können Ihre Produktbeiträge auch direkt von Ihrer WooCommerce-Produktseite aus in sozialen Medien teilen, indem sie einen einfachen Social-Media-Share-Button-Block verwenden. Welche Sie erstellen können, indem Sie einfach das Drag-and-Drop-Widget Elementor Social Share verwenden.
Der Block kann mit beliebigen Social-Media-Symbolen, Text und gemeinsam nutzbaren Links direkt auf der Registerkarte „ Inhalt “ angepasst werden. Und kann auch angepasst werden, um das Aussehen der Social-Share-Blöcke auf der Registerkarte „Elementor- Stil “ zu ändern.
Und Sie sind mit den Grundlagen der Anpassung von WooCommerce-Produktseiten fertig.
Schritt 4: Hinzufügen verwandter Produkte zur WooCommerce-Produktseite
Eine großartige Möglichkeit, den Online-Verkauf zu steigern, besteht darin, verwandte Produkte auf Ihrer Produktseite zu präsentieren, indem Sie das WooCommerce-Produkt-Add-ons Related Product-Widget verwenden. Mit dem ShopReady Related Products - Widget können Sie einen beeindruckenden Produkt-Slider-Block in Abschnitten erstellen.
Um das Widget zu verwenden, müssen Sie es nur per Drag & Drop unter den Einzelproduktblock ziehen und jedes Produkt einzeln auswählen, das Sie auf Ihrer Einzelproduktseite präsentieren möchten.
Abschließend
Wir hoffen, dass dieser informative Leitfaden Ihnen geholfen hat, ein breiteres Verständnis der Anpassung von WooCommerce-Produktseitenvorlagen zu erlangen und wie Sie diese erstaunlichen Tools nutzen können, um Ihre E-Commerce-Website mit besseren Funktionen aufzupeppen.
Mit WooCommerce-Popup-Produktdetails zur Produktvergleichstabelle kann ShopReady alles liefern, was ein E-Commerce-Marktplatz benötigt. Wenn Sie Fragen zu diesem Thema haben, wenden Sie sich bitte an den Kommentarbereich unten.