Es gibt so viele Möglichkeiten, die WooCommerce-Produktseite über die Standard-WooCommerce-Seitenvorlage zu bearbeiten. Die Auswahl der richtigen Methode zum Anpassen der WooCommerce-Produktseiten kann schwierig sein.
Daher werde ich heute erläutern, wie die WooCommerce-Produktseite mit Page Buildern wie Divi oder Elementor, erweiterten Editoren wie dem Gutenberg-Editor auf Produktseiten und Bearbeitungsvorlagen für Produktseiten bearbeitet wird.
In diesem Artikel werde ich Ihnen Ihre Optionen zum Bearbeiten von WooCommerce-Produktseiten anbieten, ohne dass Sie irgendeine Form von Code kennen müssen - kein PHP, kein CSS, kein HTML!
So ändern Sie das Design der WooCommerce-Produktseite
Inhaltsverzeichnis
Bearbeiten der Produktseite mit dem Gutenberg Editor in WooCommerce
Wenn es darum geht, die WooCommerce-Produktseite mit dem anzupassen Gutenberg Editor Es ist bei weitem nicht so einfach, wie es sein sollte (und wird wahrscheinlich in Zukunft viel einfacher sein).
Dies liegt daran, dass Gutenberg standardmäßig nicht für Produktseiten in WooCommerce aktiviert ist.
Viele schlagen daher vor, „einen Code einzufügen“, der den Gutenberg-Editor auf den WooCommerce-Produktseiten aktiviert.
Dies ist ein "OK" -Vorschlag - aber wir HASSEN es, Code mit Leidenschaft zu bearbeiten. Gehen Sie nicht in die Nähe von CSS- oder Vorlagendateien der WooCommerce-Produktseite! Wir mögen es WIRKLICH nicht - und es ist ein rutschiger Hang, wenn Sie hier und da anfangen, Kleinigkeiten hinzuzufügen, die alle Arten von Chaos verursachen, wenn Verwalten von Konflikten und Updates auf WooCommerce-Websites.
PLUS wenn Sie dies tun, bedeutet dies immer noch, dass Sie keine Kontrolle über den vollständigen Seitencontainer haben. Stattdessen sind Sie auf den Seitencontainer beschränkt, der von der zugrunde liegenden Seitenvorlage bereitgestellt wird.
Bei WooCommerce Storefront Theme bedeutet dies, dass die Seitenleiste auf der Produktseite sichtbar ist (was unserer Meinung nach das Schlimmste am Storefront Theme ist, möglicherweise ein gezielter Schritt von WooCommerce, um Sie zum Kauf zu bewegen "Storefront Extensions Bundle" Dies ermöglicht Ihnen die Kontrolle über das Storefront-Thema, das WIRKLICH benötigt wird.
Es gibt jedoch eine Antwort, die über den WooCommerce Extensions Marketplace hinausgeht, wenn es darum geht, Gutenberg für Produktseiten in WooCommerce zu verwenden!
Produktseite bearbeiten mit WooBuilder (Gutenberg Editor)
WooBuilder von PootlePress überwindet diesen Mangel nicht nur für das Storefront-Thema, sondern für jedes Thema, das Sie für Ihren WooCommerce-Shop verwenden.
Wenn Sie also ein sinnvolles Thema haben, mit dem Sie die Seitenleiste auf Produktseiten in WooCommerce standardmäßig deaktivieren können (im Gegensatz zum Storefront-Thema!), Können Sie mit WooBuilder Ihre gesamte Produktseite mit Gutenberg-Blöcken und zusätzlichen Blöcken Ihres Drittanbieters gestalten Plugins oder das WooCommerce Blocks-Plugin wurden zu Ihren Gutenberg-Blockoptionen hinzugefügt.
Schauen Sie sich hier WooBuilder von PootlePress an.
Wir mögen es.
Es ist ein wenig teuer.
Aber für die zusätzliche Funktionalität lohnt es sich in vielen Fällen.
Wird Gutenberg Editor für Produktseiten in Zukunft in WooCommerce integriert?
Es ist auch sehr wahrscheinlich, dass Automattic (Die Jungs dahinter WooCommerce und WordPress) bringt den Gutenberg Editor zu WooCommerce
Möchten wir das kostenlose Storefront-Design von WooCommerce in Kombination mit dem Gutenberg-Editor für Produktseiten verwenden?
Wir verkaufen uns nicht wirklich für diese Idee - besonders wenn wir das beste Thema für WooCommerce-Shops verwenden, nämlich Divi by Elegant Themes….
Anpassen von WooCommerce-Produktseiten mit Divi Builder
Mit einem integrierten Seitenersteller, der für ALLE verwendet werden kann WordPress-Beitragstypen, einschließlich WooCommerce-Produktseiten mit anpassbaren Seitenvorlagen, die auch im Seitenersteller erstellt wurden! Es sind keine Codekenntnisse erforderlich, und Sie können ein äußerst individuelles Aussehen, Gefühl und Funktionieren haben WooCommerce-Shop.
Divi auschecken - Hier klicken
Beispiele für das Layout der Divi-Produktseite
Es ist erstaunlich, was Sie mit einem flexiblen Seitenersteller tun können, um ein hochkonvertierendes Produktseitendesign zu erstellen, das die Anzahl der Warenkörbe und Verkäufe erhöht - ich habe ein Ganzes zusammengestellt Liste der benutzerdefinierten WooCommerce-Produktseitendesigns mit Divi Builder um Ihr nächstes Produktseitendesign zu inspirieren.
WooCommerce-Produktseitenvorlage
Benutzerdefinierte Codierung von Produktseiten ist nicht jedermanns Sache. Wir erstellen Produktseitenvorlagen mit Divi und gelegentlich mit benutzerdefiniertem Code. Hier ist ein Beispiel für eine benutzerdefinierte Vorlage mit einigen grundlegenden Anpassungen, die einen großen Unterschied hinsichtlich Konvertierung, Geschwindigkeit und Anzeige auf Mobilgeräten bewirken.
Der reduzierte Abstand oben auf der Seite stellt sicher, dass die Schaltfläche "Zum Warenkorb hinzufügen" auf den meisten Desktop-Bildschirmen oben auf der Falte sichtbar ist. Außerdem bleibt die Schaltfläche "Zum Warenkorb hinzufügen" in einem EINZELNEN Bildlauf auf Mobilgeräten erhalten.
Die erhöhte Sterngröße für Bewertungen / Rezensionen wirkt sich viel stärker aus als der typische Ansatz, den die meisten Themen verfolgen.
Die Aufzählungsliste mit 3 Hauptverkaufsargumenten mit starken und prominenten Aufzählungszeichen im Symbolstil macht auf diese Punkte aufmerksam und bringt den Betrachter direkt zum Aufruf zum Hinzufügen zum Warenkorb.
Der weiße Bereich unter der Schaltfläche zum Hinzufügen zum Warenkorb ist zweckmäßig. Hier kann ein Popup- oder benutzerdefiniertes Angebotsbild eingeführt werden, um Cross-Selling- und Upselling-Bundles zu erstellen, ohne die Struktur der Seite auf Desktop und Mobile vollständig zu zerstören.
Nachdem das Layout mit Registerkarten entfernt wurde, können die Leser in einem zweispaltigen Layout gleichzeitig „unsere Beschreibung“ und „Kundenbewertungen“ auf dem Desktop anzeigen. Währenddessen gelangen Benutzer, die weiterhin über die Beschreibung hinaus scrollen, auf Mobilgeräten zu den Bewertungen, STATT, dass sie durch die Registerkarten klicken müssen.
Es ist ein viel natürlicherer Ablauf für Verkauf und Conversion, ohne dass der Kunde aktiv auswählen muss, um bestimmte Informationen oder Bewertungen zum Produkt zu lesen (er kann natürlich immer noch auf den Link „1 Bewertung“ unter den Sternen oben auf der Website klicken Seite und direkt zu den Kundenbewertungen gebracht werden.
Versuchen Sie, eine bestimmte Änderung an der WooCommerce-Produktseite vorzunehmen?
Wenn Sie unsere anderen Artikel zur Verbesserung der WooCommerce-Produktseite nicht gelesen haben, haben wir möglicherweise genau das, wonach Sie suchen.
Vielleicht versuchst du ...
Deaktivieren und entfernen Sie verwandte Produkte auf der Produktseite
Blenden Sie die Brotkrumen auf der Standard-WooCommerce-Produktseite aus
Blenden Sie die Kategorie- oder SKU-Bezeichnung in der Produktseitenvorlage aus
Entfernen Sie die Registerkarte Zusätzliche Informationen von der Produktseite in WooCommerce
Und wir haben eine Reihe weiterer Anleitungen, wie Sie alle Aspekte von bearbeiten können WooCommerce-Anpassung (ohne Code!) Schauen Sie sich unsere an WooCommerce-Anpassungshandbücher hier
Andere nützliche Artikel aus zukünftigen staatlichen Medien
Woo Produktseite Plugins & Themes
Verwenden von Gutenberg auf WooCommerce-Produktseiten
Beispiele für Woo-Produktseiten mit Divi Builder und Divi Theme
Deaktivieren Sie verwandte Produkte auf den WooCommerce-Produktseiten
Sie suchten nach:
Übergeordnetes Thema: Bearbeiten der Woocommerce-Produktseite
woocommerce Produktlayout ändern
woocommerce Produktseite bearbeiten
Elementor Produktseite
Woocommerce-Produktseitenvorlage
Produktseite bearbeiten woocommerce
Bearbeiten der Woocommerce-Produktseite
elementor woocommerce Produktseite
Woocommerce-Seitenlayout
Übergeordnetes Thema: Anpassen der Woocommerce-Produktseite
Woocommerce-Produktseite anpassen
Woocommerce-Produktseite bearbeiten
woocommerce Produktseite
So passen Sie die Woocommerce-Produktseite an
Seitenvorlage für Woocommerce-Produkte
Woocommerce benutzerdefinierte Produktseite
Woocommerce einzelne Produktseite
woocommerce Produktseite anpassen
Layout der Woocommerce-Produktseite
So bearbeiten Sie die Woocommerce-Produktseite
Woocommerce-Produktlayout
Produktseite Woocommerce anpassen
Benutzerdefinierte Woocommerce-Produktseite
Woocommerce Einzelprodukt
So bearbeiten Sie die Produktseite Woocommerce
Anpassung der Woocommerce-Produktseite
Woocommerce-Produktseitendesign
Benutzerdefinierte Produktseite Woocommerce
Stil Woocommerce Produktseite
So erstellen Sie eine benutzerdefinierte einzelne Produktseite im Woocommerce
Ändern Sie das Layout der Woocommerce-Produktseite
Entfernen Sie die Seitenleiste von der Woocommerce-Produktseite
Woocommerce Single Product Page Customizer
Woocommerce Single Product Page Hooks
woocommerce Produktseite arrangieren
woocommerce css Produktseite
Woocommerce ändert das Layout einer einzelnen Produktseite
woocommerce Produktseite in voller Breite
Ändern Sie die Woocommerce-Produktseite
Seitenleiste Produktseite Woocommerce
Seitenvorlage für Woocommerce-Produktdetails
Produktseite Woocommerce
Woocommerce zeigt Attribute auf der Produktseite
Woocommerce benutzerdefinierte einzelne Produktseite
Anpassen der einzelnen Produktseite Woocommerce
Hintergrund der Woocommerce-Produktseite
Anpassen der einzelnen Produktseite von Woocommerce
Produktseite Vorlage Woocommerce
Produktseite für das Woocommerce-Layout
Bearbeitung der einzelnen Produktseite von Woocommerce
Woocommerce Produktlayout bearbeiten
woocommerce einzelne Produktseite Bildgröße
Anpassen der Woocommerce-Produktseite
Woocommerce in voller Breite einzelne Produktseite
Produktdetailseite für Woocommerce
Anpassung der Woocommerce-Produktseitenvorlage
Woocommerce Product Page Editor
Produktvorlagenseite für Woocommerce
Ändern Sie das Layout der Woocommerce-Produktseite
Benutzerdefiniertes Produktseitenlayout für Woocommerce
Woocommerce Seitenleiste auf Produktseite ausblenden
Woocommerce Display Cross Sells auf der Produktseite
Produktseite für die Nachbestellung von Woocommerce
Produktseitenlayout ändern woocommerce
Erstellen Sie eine benutzerdefinierte Woocommerce-Produktseite
Entfernen Sie den Paypal-Button von der Produktseite des Woocommerce
Position In den Warenkorb Einzelproduktseite Woocommerce
Woocommerce Page Builder einzelne Produktregisterkarten
Woocommerce-Produktseite Hover-Bildänderung
Anpassen des Produktseitenlayouts für Woocommerce
Als nächstes vor der Woocommerce-Produktseite WordPress hinzufügen
Spielen Sie ein S3-Video auf der Woocommerce-Produktseite ab
lange Beschreibung auf der Woocommerce-Produktseite anzeigen
WordPress Woocommerce fügt der Produktseite Registerkarten hinzu
So entfernen Sie auf Lager von der Produktseite Woocommerce
woocommerce verstecken vorgestellten Bild auf der Produktseite
So fügen Sie Banner in die Produktseite Woocommerce ein
So ändern Sie die Produktseite im Woocommerce
Woocommerce-Schaltfläche zum Hinzufügen zu einer einzelnen Produktseite
Codecode für die Woocommerce-Produktseite
So formatieren Sie die Produktseite im Woocommerce
Entfernen Sie die Seitenleisten von der Produktseite des Woocommerce
Woocommerce Preis Produkt Seitengröße
Stil Verkauf Woocommerce Produktseite
Woocommerce-Produktseitenformat
WordPress Woocommerce Produkt Seitenlayout
Verschieben Sie die Position der Registerkarten auf der Produktseite des Woocommerce
Text unter Variation hinzufügen in den Warenkorb auf der Woocommerce-Produktseite
So entfernen Sie Tags von der Produktseite woocommerce
Woocommerce Seitenleiste zur Produktseite hinzufügen
