So passen Sie die WooCommerce-Produktseitenvorlage an

Suchen Sie nach Möglichkeiten, die Vorlagen Ihrer Produktseiten zu bearbeiten? Wir geben dir Deckung. In diesem Leitfaden lernen Sie verschiedene Möglichkeiten zum Anpassen der WooCommerce-Produktseitenvorlage kennen .

WooCommerce enthält eine große Anzahl von Anpassungsoptionen. Eine der interessantesten Optionen ist die Möglichkeit , die Standardvorlagen Ihres E-Commerce-Shops zu bearbeiten . Und die Tatsache, dass Sie sie mit mehr als einer Methode anpassen können, ist noch beeindruckender.

Werfen wir einen Blick auf einige der Vorteile, die Sie von der Anpassung Ihrer Produktseitenvorlagen erwarten können.

Vorteile der Bearbeitung der Produktseitenvorlagen

Das Bearbeiten der Produktseitenvorlagen verbessert die Erfahrung sowohl des Websitebesitzers als auch der Kunden. Die standardmäßige WooCommerce-Produktseitenvorlage eignet sich für die meisten Websites. Es bietet alle notwendigen Informationen über Ihr Produkt, die Käufer benötigen. Eine einzigartige Produktseite bietet Ihnen jedoch einen wertvollen Vorteil, um sich von Ihren Mitbewerbern abzuheben .

Auch wenn die Standardvorlage ausreichende Produktinformationen enthält, hilft Ihnen ein guter erster Eindruck dabei, Ihren Umsatz zu steigern. Dazu möchten Sie vielleicht noch einige Details hinzufügen oder entfernen. Möglicherweise müssen Sie auch einige Elemente der Produktseite ändern, abhängig von der Art der Produkte oder Dienstleistungen, die Sie verkaufen, den Kundenanforderungen oder aktuellen Trends. Beispielsweise können Sie Informationen zu Rabatten, Angeboten und Jahresverkäufen anzeigen und regelmäßig aktualisieren, um mehr Besucher anzuziehen.

Darüber hinaus gibt es Farb-, Layout- und Typografieänderungen, die Sie anwenden können, um Ihre Website einzigartig zu machen und einen Eindruck bei Käufern zu hinterlassen.

Dies sind einige der häufigsten Änderungen, die Sie an Produktseitenvorlagen vornehmen können, aber Sie können noch viel mehr tun. Schauen wir uns verschiedene Methoden zum Bearbeiten der Produktseitenvorlagen in WooCommerce an.

So passen Sie die WooCommerce-Produktseitenvorlage an

Es gibt verschiedene Möglichkeiten, die WooCommerce-Produktseitenvorlage zu bearbeiten :

1. Programmatisch
2. Mit Seitenerstellern
3. Verwenden eines Plugins

Bevor wir beginnen, möchten wir Sie bitten, einige Dinge zu beachten.

• Stellen Sie sicher, dass Sie WooCommerce richtig eingerichtet haben und verpassen Sie keine Schritte, um Probleme zu vermeiden
• Da wir einige Designdateien ändern werden, die heikle Informationen über Ihre Website enthalten, empfehlen wir Ihnen, Ihre WordPress-Website zu sichern und ein untergeordnetes Design oder eines dieser untergeordneten Design-Plugins zu erstellen, bevor Sie fortfahren
• Für diese Demonstration verwenden wir das Divi-Design. Die Designdateien können auf Ihrer Website je nach Design unterschiedlich sein, aber Sie sollten in der Lage sein, alle Schritte ohne Probleme zu befolgen
• > Stellen Sie sicher, dass Sie eines der kompatiblen WooCommerce-Designs auf Ihrer Website verwenden

Kommen wir nun ohne weiteres zu den Methoden zum Bearbeiten von Produktseitenvorlagen.

1) Passen Sie die WooCommerce-Produktseitenvorlage programmgesteuert an

Diese Methode wird dringend empfohlen, wenn Sie einfache Änderungen an Ihren Produktseitenvorlagen vornehmen möchten. Sie können sie leicht mit Code bearbeiten, aber es ist besser, wenn Sie über grundlegende Programmierkenntnisse verfügen, wenn Sie diesen Ansatz verwenden.

Wir werden hier hauptsächlich WooCommerce-Hooks verwenden. Wenn Sie also nicht damit vertraut sind, können Sie sich unseren Leitfaden zur Verwendung von WooCommerce-Hooks ansehen. Dies ist sehr nützlich, da Sie mit Hooks auch jede Art von WooCommerce-Vorlage anpassen können.

Sehen wir uns einige Beispiele an, wie Sie Produktseitenvorlagen bearbeiten können.

1.1) Entfernen von Elementen von der Produktseite

Wenn Sie Elemente von der Produktseite entfernen möchten , können Sie eines der folgenden Snippets verwenden, die Hooks verwenden, um die gewünschten Elemente zu löschen oder auszublenden. Alles, was Sie tun müssen, ist das richtige auszuwählen und den Code zu Ihren Website-Designdateien hinzuzufügen.

Sie finden alle verfügbaren Hooks in den Kommentaren der Datei content-single-product.php in den Vorlagendateien des WooCommerce-Plugins. Alternativ können Sie auf diese Seite verweisen.

Dies sind einige Beispiele für Snippets, mit denen Sie ein Element von Ihren Produktseiten entfernen können:

 // Titel entfernen
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// Bewertungssterne entfernen
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// Produktmeta entfernen 
remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_meta',40 );
// Beschreibung entfernen
remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_excerpt',20 );
// Bilder entfernen
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images',20 );
// verwandte Produkte entfernen
remove_action( 'woocommerce_after_single_product_summary','woocommerce_output_related_products',20);
// Registerkarten für zusätzliche Informationen entfernen
remove_action('woocommerce_after_single_product_summary','woocommerce_output_product_data_tabs',10);

Nachdem Sie den Haken zum Löschen des gewünschten Elements gefunden haben, gehen Sie in Ihrem WordPress-Dashboard zu Darstellung > Themen-Editor und öffnen Sie die Datei functions.php . Fügen Sie dann das gewünschte Code-Snippet mit der Funktion remove_action am Ende der Datei hinzu.

Um beispielsweise den Titel der Produktseite zu entfernen, würden wir das folgende Snippet einfügen:

Drücken Sie dann auf Datei aktualisieren und überprüfen Sie Ihre Website vom Frontend aus. Sie werden sehen, dass der Titel von der Produktseite entfernt wurde.

1.2) Neue Elemente hinzufügen

Sie können Hooks auch verwenden, um Ihre WooCommerce-Seitenvorlage anzupassen und ihr neue Elemente hinzuzufügen. Um ein Element einzufügen, müssen Sie die Funktion add_action mit dem erforderlichen Hook verwenden.

Um beispielsweise Text zur Produktseite hinzuzufügen, kannst du das folgende Snippet in die functions.php deiner Child-Theme-Datei einfügen.

 add_action('woocommerce_before_single_product_summary',function(){
  printf('<h4><a href="?added-content">Herzlichen Glückwunsch, Sie haben gerade einen Link hinzugefügt!</a></h4>');
}
);

Dadurch werden der Produktseite neue Inhalte hinzugefügt. Passen Sie einfach den obigen Code an, um den Text und die Größe zu ändern und beliebige Elemente zu Ihren Produktseiten hinzuzufügen.

1.3) Elemente neu anordnen

Eine weitere Option besteht darin, die WooCommerce-Produktseitenvorlage anzupassen, indem Sie einige Elemente neu anordnen. Ähnlich wie beim Entfernen und Hinzufügen von Elementen müssen Sie Codeschnipsel zur Datei function.php des untergeordneten Designs hinzufügen.

Um Elemente neu anzuordnen, müssen Sie zuerst den Haken aus der Produktseitenvorlage entfernen und dann den Haken an einer anderen Position wieder hinzufügen. Es ist eine Kombination der Codeausschnitte, die wir in den vorherigen Schritten verwendet haben.

Im folgenden Beispiel verschiebt das Skript die Produktbeschreibung direkt unter den Titel, indem es die Positionsreihenfolge ändert.

 // Reihenfolge der Beschreibung ändern
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );

Ebenso können Sie jeden der erforderlichen Hooks verwenden, um die Elemente Ihrer Produktseitenvorlagen neu anzuordnen. Stellen Sie nur sicher, dass Sie die richtigen Positionsaufträge eingeben.

Wenn Sie weitere Beispiele dazu wünschen, sehen Sie sich unsere Anleitung zum programmatischen Bearbeiten der WooCommerce-Produktseite an.

2) Bearbeiten Sie die WooCommerce-Produktseitenvorlage mit Page Buildern

Seitenersteller sind großartige Tools, die das Erstellen und Anpassen von Websites vereinfachen. Dies ist auch bei Produktseitenvorlagen der Fall. Wenn Sie keine Programmierkenntnisse haben, können Sie eine WooCommerce-Produktseitenvorlage mit Seitenerstellern mit wenigen Klicks anpassen.

Darüber hinaus können Sie mit Seitenerstellern auch Vorlagen der Produktseiten mit den von Ihnen vorgenommenen Änderungen speichern . Und da Ihnen die meisten Seitenersteller einen Drag-and-Drop-Editor zum Bearbeiten der Vorlagen zur Verfügung stellen, können Sie viel Zeit sparen.

Es gibt viele Seitenersteller in WordPress. Für dieses Tutorial verwenden wir den Divi Builder , da er einer der besten Seitenersteller ist und hervorragend mit unserem Thema Divi funktioniert.

Um mit der Verwendung zu beginnen, stellen Sie sicher, dass Sie Divi erhalten und installieren Sie dann den Divi Builder auf Ihrer Website. Danach können Sie mit der Bearbeitung der Vorlagen beginnen.

2.1) Öffnen Sie den visuellen Editor

Der erste Schritt zum Bearbeiten einer Produktseitenvorlage besteht darin, eine Ihrer Produktseiten zu öffnen und auf die Option „ Visual Builder aktivieren “ in der Admin-Leiste zu klicken. Sie werden zum Divi Visual Editor weitergeleitet, wo Sie die Produktseitenvorlage anpassen können.

Wenn Sie diese Option nicht sehen, vergewissern Sie sich, dass Sie im selben Browserfenster bei Ihrem WordPress-Dashboard angemeldet sind.

2.2) Passen Sie die Vorlage mit Visual Editor an

Mit Hilfe des visuellen Editors können Sie fast alle Elemente Ihrer Produktseite anpassen. Alles, was Sie tun müssen, ist einfach auf eines der vorhandenen Elemente zu klicken, die Sie bearbeiten möchten .

Angenommen, Sie möchten die Hintergrundfarbe der Produktbeschreibung anpassen. Klicken Sie auf die Produktbeschreibung und öffnen Sie die Beschreibungseinstellungen, indem Sie auf das Symbol Einstellungen klicken.

Gehen Sie dann zu Hintergrund und wählen Sie die Farbe aus, die Sie für Ihre Produktbeschreibung festlegen möchten. Sie werden sehen, dass sich die Hintergrundfarbe sofort in der Live-Vorschau ändert. Wenn Sie mit der Farbe zufrieden sind, denken Sie daran, die Änderungen zu speichern.

Angenommen, Sie möchten neben der Änderung der Farbe weitere Module zur Produktseitenvorlage hinzufügen. Klicken Sie einfach auf das „ + “-Symbol in dem Bereich, in dem Sie ein Modul hinzufügen möchten, wählen Sie den Zeilentyp und das gewünschte Modul aus.

Wenn Sie etwas Bestimmtes hinzufügen möchten, können Sie nach bestimmten Modulen suchen, indem Sie das Suchfeld eingeben. Dann müssen Sie nur noch die Optionen in den Moduleinstellungen konfigurieren und die Änderungen speichern.

Angenommen, Sie möchten ein Countdown-Timer -Modul hinzufügen, um einen Weihnachtsverkauf zu starten. Drücken Sie das Symbol + und suchen Sie nach den Schlüsselwörtern des Countdown-Timers.

Fügen Sie dann die erforderlichen Informationen zum Countdown wie Text, Uhrzeit und Datum in den Moduleinstellungen hinzu.

Sie sehen die Änderungen in Echtzeit in der Vorschau, während Sie sie vornehmen. Wenn Sie zufrieden sind, speichern Sie die Produktseitenvorlage, indem Sie die drei horizontalen Punkte unten auf Ihrem Bildschirm erweitern.

Kurztipp zum Anpassen der Produktseitenvorlage mit Divi Builder

Abhängig von der Art des Produkts, das Sie in Ihrem Online-Shop verkaufen, können Sie auch unterschiedliche Produktseitenvorlagen verwenden. Alles, was Sie tun müssen, ist, in Ihrem WordPress-Dashboard zu Divi > Divi Builder zu gehen und auf Neue Vorlage hinzufügen zu klicken.

Wenn Sie nach unten zum Abschnitt Produkte scrollen, sehen Sie, dass Sie Vorlagen für bestimmte Produktseiten erstellen können . Dies kann von den Kategorien, Tags oder bestimmten Produkten abhängen. Wählen Sie einfach die gewünschte Option aus und drücken Sie Vorlage erstellen.

Dann müssen Sie der Produktseitenvorlage, die Sie gerade erstellt haben , einen benutzerdefinierten Text hinzufügen . Sie können entweder von Grund auf neu erstellen oder eine der Vorlagen aus der Bibliothek verwenden. Unabhängig davon, was Sie auswählen, müssen Sie den visuellen Editor erneut verwenden, um die WooCommerce-Produktseitenvorlage anzupassen.

Wenn Sie mehr über die Verwendung von Divi Builder erfahren möchten, werfen Sie einen Blick auf unsere ausführliche Anleitung zum Anpassen der WooCommerce-Produktseite in Divi.

Alternativ können Sie andere Seitenersteller verwenden, um die Produktseitenvorlagen zu bearbeiten. Wenn Sie Elementor verwenden, können Sie sich unser Tutorial zum Anpassen der WooCommerce-Produktseite in Elementor ansehen, um weitere Informationen zu erhalten.

3) Passen Sie die WooCommerce-Produktseitenvorlage mit einem Plugin an

Wenn Sie ganz bestimmte Änderungen an Ihren WooCommerce-Produktseitenvorlagen vornehmen möchten, können Sie ein Plugin verwenden. Einige Seitenersteller wie Elementor sind auch als Plugins verfügbar, aber es gibt andere dedizierte Tools, die Sie für sehr spezifische Funktionalitäten verwenden können.

Eines dieser Plugins ist Direct Checkout für WooCommerce . Dieses Tool soll Ihnen helfen, den Checkout-Prozess in WooCommerce zu vereinfachen. Mit diesem Plugin können Sie Kunden von der Produktseite direkt auf die Checkout-Seite umleiten, nachdem Sie ein Produkt in den Warenkorb gelegt haben. So verkürzen Sie den Kaufprozess und steigern Ihre Conversion Rates.

Alles in allem ist dies ein hervorragendes Tool, um die Schaltflächen der Produktseitenvorlagen in Ihrem Geschäft zu bearbeiten.

Sehen wir uns die Schritte zum Bearbeiten der Produktseitenvorlage mit Direct Checkout an .

3.1) Installieren und aktivieren Sie das Plugin

Zunächst müssen Sie das Plugin installieren und aktivieren. Sie können die kostenlose Version hier herunterladen oder einen der Premium-Pläne erwerben, die mehr Funktionen beinhalten und bei 19 USD (einmalige Zahlung) beginnen.

Alternativ können Sie in Ihrem WordPress-Dashboard zu Plugins > Neu hinzufügen gehen, nach dem Plugin suchen und es installieren.

Nachdem Sie das Plugin installiert und aktiviert haben, müssen Sie es einrichten.

3.2) Konfigurieren Sie die Direct Checkout-Optionen

Gehen Sie zu WooCommerce > Direct Checkout und öffnen Sie die Registerkarte Allgemein .

Stellen Sie dann die folgenden Optionen ein:

• Weiterleitung zum Einkaufswagen hinzugefügt: Ja
• Weiterleitung zum Warenkorb hinzugefügt: Checkout

Speichern Sie schließlich die Änderungen und sehen Sie sich eine der Produktseiten in Ihrem Online-Shop an. Sobald Sie jetzt bei einem beliebigen Produkt auf die Schaltfläche „ Kaufen “ klicken, werden Sie direkt zur Checkout-Seite weitergeleitet.

Weitere Informationen zum Hinzufügen von Ein-Klick-Kauf-Buttons finden Sie in unserer Anleitung zum Hinzufügen eines Schnellkauf-Buttons in WooCommerce.

Zusammenfassend lässt sich sagen, dass das Anpassen der Produktseitenvorlagen dem Bearbeiten der Produktseite ähnelt. In unserem Tutorial zum Anpassen von WooCommerce-Produktseiten finden Sie weitere Informationen und Ideen, wie Sie Ihre Produktseitenvorlagen optimal nutzen können.

Bonus: Bearbeiten Sie die WooCommerce-Produktseitenvorlage mit CSS

Bisher haben wir gesehen, wie man die WooCommerce-Produktseite programmgesteuert, mit Seitenerstellern und mit speziellen Plugins anpasst. Aber es gibt noch etwas, was Sie tun können. Sie können Ihre Vorlage auch mit etwas CSS bearbeiten. Dies ist die schnellste Methode, um kleine Designänderungen auf Ihrer Produktseite vorzunehmen.

CSS-Skripte sind sehr nützlich, um die Anzeige- und Designoptionen zu ändern, sodass Sie sie einfach zu Ihrer Website hinzufügen können, indem Sie zu Darstellung > Anpassen > Zusätzliches CSS gehen. Dort können Sie Ihre CSS-Skripte hinzufügen, um die Produktseitenvorlagen anzupassen.

Hier sind einige Beispiele dafür, was Sie tun können, um Ihre Produktseiten mit CSS zu verbessern.

Ändern Sie die Schriftgröße des Titels

Der folgende CSS-Code ändert die Schriftgröße des Titels auf der Produktseite auf 16.

 .woocommerce div.product .product_title { 
        Schriftgröße: 16px; 
}

Sie können jede andere Schriftgröße auswählen, indem Sie einfach die Zeile für die Schriftgröße im Snippet anpassen.

Ändern Sie die Titelfarbe

Sie können die Produktseitenvorlagen auch anpassen, indem Sie die Farbe des Titels mit CSS ändern. Suchen Sie einfach mit CSS nach den Hex-Codes der Farbe, die Sie Ihrer Website hinzufügen möchten, und verwenden Sie den folgenden Code.

In diesem Snippet haben wir beispielsweise den Farbcode #800000 verwendet, der die Titelfarbe in Kastanienbraun ändert.

 .woocommerce div.product .product_title { 
            Farbe: #800000; 
}

Sobald Sie alle Änderungen vorgenommen haben, veröffentlichen Sie sie.

Weitere Beispiele für CSS-Snippets finden Sie in diesem Beitrag. Es zeigt Ihnen, wie Sie die Shop-Seite anpassen, aber Sie können die gleichen Snippets anwenden, um die Produktseitenvorlagen zu bearbeiten.

Weitere spezifische Beispiele für die Anwendung auf Divi finden Sie in diesem anderen Artikel.

Fazit

Alles in allem kann Ihnen das Bearbeiten der Vorlagen Ihrer Produktseite dabei helfen, einzigartige Produktseiten zu erstellen und sich von Ihren Mitbewerbern abzuheben. Abhängig von der Art der Produkte, die Sie verkaufen, und dem Feedback Ihrer Kunden können Sie Elemente hinzufügen, entfernen oder neu anordnen und sicherstellen, dass Sie Ihre Produktseiten optimal nutzen.

In diesem Leitfaden haben wir verschiedene Möglichkeiten zum Anpassen der WooCommerce-Produktseitenvorlage auf Ihrer Website gesehen

• Programmatisch
• Mit Seitenerstellern
• Verwenden eines Plugins

Alle diese Methoden sind auf ihre Weise effektiv, also wählen Sie die für Ihre Bedürfnisse am besten geeignete aus. Wenn Sie über Programmierkenntnisse verfügen, ist der programmatische Ansatz sehr effektiv und gibt Ihnen viel Flexibilität, was Sie ändern können. Andernfalls können Sie einen Seitenersteller verwenden, um verschiedene Abschnitte Ihrer Vorlagen einfach anzupassen. Schließlich können Sie Plugins wie Direct Checkout verwenden, mit denen Sie bestimmte Änderungen an Ihren Produktseiten vornehmen können.

Haben Sie Ihre Vorlagen bearbeitet? Welche Methode hast du verwendet? Lassen Sie es uns in den Kommentaren unten wissen.

Wenn Sie dieses Tutorial interessant fanden, finden Sie hier einige weitere Artikel, die Ihnen gefallen könnten:

• So passen Sie die WooCommerce-bezogenen Produkte an
• Beste Plugins zum Anpassen der WooCommerce-Produktseite
• So fügen Sie einem Produkt in WooCommerce ein Bild hinzu