So fügen Sie die Schaltfläche „In den Warenkorb“ auf Divi-Shop-Seiten hinzu

Veröffentlicht: 2020-06-21

Verwenden Sie Divi und möchten Ihre Shop-Seiten anpassen? In diesem Tutorial erfahren Sie, wie Sie die Schaltfläche „In den Warenkorb“ in Divi-Shop-Seiten einfügen.

Wenn Sie vorhaben, einen Online-Shop zu eröffnen, ist WooCommerce der einfachste und schnellste Weg, dies zu tun. Auch wenn Sie kein Entwickler sind, können Ihnen einige hervorragende WooCommerce-Designs beim Einstieg helfen und die Funktionen Ihres Shops verbessern. Eine der besten Optionen da draußen ist Divi.

Warum sollten Sie auf den Shop-Seiten eine Schaltfläche „In den Warenkorb“ einfügen?

Das Divi-Theme ist eine der beliebtesten Optionen für WooCommerce-Shops. Es ist ein sehr flexibles Thema, das mit vielen leistungsstarken Funktionen ausgestattet ist. Ein Nachteil ist jedoch, dass die Produkte auf den Shop-Seiten keinen In den Warenkorb-Button haben. Dies fügt dem Kauftrichter einen Schritt hinzu und kann sich auf die Conversions auswirken. Die gute Nachricht ist, dass es eine Möglichkeit gibt, das zu beheben.

In dieser Anleitung zeigen wir Ihnen, wie Sie die Schaltfläche „In den Warenkorb“ ganz einfach zu Divi-Shop-Seiten hinzufügen können .

Wie füge ich die Schaltfläche „In den Warenkorb“ in Divi hinzu?

Hier zeigen wir Ihnen die einfachsten und effektivsten Möglichkeiten, die Schaltfläche „In den Warenkorb“ in Divi einzufügen. Obwohl wir einige Änderungen an den Kerndateien des Themas vornehmen werden, sind diese Methoden selbst für Anfänger sehr einfach zu befolgen.

Die beiden wichtigsten Methoden zum Hinzufügen der Schaltfläche „In den Warenkorb“ auf den Shop-Seiten sind:

  1. Ändern der Datei functions.php
  2. Verwendung des Code-Snippets-Plugins

Beide Methoden sind anfängerfreundlich und ermöglichen es Ihnen, die Schaltfläche „In den Warenkorb“ im Handumdrehen hinzuzufügen.

Bevor wir anfangen

Bevor wir beginnen, empfehlen wir Ihnen:

  • Erstellen Sie ein vollständiges Backup, falls etwas schief geht.
  • Erstellen Sie ein untergeordnetes Design: Wir empfehlen nicht, die Dateien des Designs direkt zu ändern. Stattdessen können Sie ein untergeordnetes Thema erstellen und Änderungen daran vornehmen. Dazu gibt es verschiedene Methoden. In diesem Tutorial verwenden wir ein Plugin.

1) Fügen Sie die Schaltfläche „Zum Warenkorb hinzufügen“ aus der functions.php hinzu

Erstellen Sie ein Child-Theme

Bevor wir die Schaltfläche „Zum Warenkorb hinzufügen“ in Divi hinzufügen, müssen Sie ein untergeordnetes Thema erstellen. Dazu verwenden wir ein kostenloses WordPress-Plugin namens Child Themify. Also müssen Sie zuerst Child Themify auf Ihrer Website installieren.

Aktivieren Sie es dann.

Danach sehen Sie die Einstellungen des Plugins im Abschnitt Aussehen .

Aus der Dropdown-Liste müssen Sie ein übergeordnetes Thema auswählen. In unserem Fall werden wir ein untergeordnetes Thema für Divi erstellen. Benennen Sie dann Ihr neues untergeordnetes Thema.

Es gibt auch einige erweiterte Optionen, aber Sie müssen sie dafür nicht verwenden.

Nachdem Sie das Parent-Theme ausgewählt und das Child-Theme benannt haben, klicken Sie auf die Schaltfläche Child-Theme erstellen .

Gehen Sie danach zum Abschnitt Darstellung > Themen und Sie sehen das neue untergeordnete Thema. Aktivieren Sie es.

Überprüfen Sie nun die Shop-Seite Ihres Shops. In unserem Fall haben wir anhand einiger Beispielprodukte einen Demoshop erstellt.

Wie Sie im obigen Screenshot sehen können, gibt es keine Schaltfläche „In den Warenkorb“. Wenn ein Benutzer also ein Produkt in den Warenkorb legen möchte, kann er dies nicht direkt von der Shop-Seite aus tun. Stattdessen müssen sie zu den jeweiligen Produktseiten gehen und die Artikel von dort in den Warenkorb legen.

Die gute Nachricht ist, dass es eine einfache Möglichkeit gibt, eine Schaltfläche „In den Warenkorb“ auf der Shop-Seite einzufügen. Dazu müssen Sie Ihrem Child-Theme ein paar Codezeilen hinzufügen.

Ändern Sie die Datei functions.php

Um die Schaltfläche „In den Warenkorb“ auf der Shop-Seite in Divi einzufügen, gehen Sie zum Design-Editor und wählen Sie die Datei functions.php aus . Kopieren Sie den folgenden Code und fügen Sie ihn in Ihre Datei functions.php ein.

 // Dieser Code fügt „In den Einkaufswagen“-Schaltflächen zu einer Seite hinzu, die eine Shop-Schleife anzeigt
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

Schaltfläche zum Hinzufügen zum Warenkorb in Divi - PHP-Skript

Klicken Sie nach dem Einfügen des Codes auf Datei aktualisieren . Und wenn Sie das Frontend der Shop-Seite überprüfen, werden Sie die Änderungen sehen.

Schaltfläche zum Warenkorb hinzufügen in Divi mit PHP

Sie haben die Schaltflächen "In den Warenkorb" zur Shop-Seite hinzugefügt !

2) Code-Snippets-Plugin

Anstatt die Datei functions.php zu aktualisieren, können Sie alternativ die Schaltfläche „Zum Warenkorb hinzufügen“ mithilfe eines Plugins in Divi einfügen. Nach unserer Erfahrung mit WordPress und Anpassung ist Code Snippets eines der besten Tools für diese Aufgabe.

Zunächst müssen Sie das Code Snippets-Plugin auf Ihrer Website installieren und aktivieren.

Code-Snippets-Plug-In, um die Schaltfläche „In den Warenkorb“ in Divi einzufügen

Anschließend müssen Sie Ihrer Website ein neues Snippet hinzufügen.

Benennen Sie einfach Ihr Snippet zur Identifizierung, kopieren Sie den Code von unten und fügen Sie ihn in das Code-Feld ein.

 // Dieser Code fügt "In den Warenkorb"-Schaltflächen zu einer Seite hinzu, die eine Shop-Schleife anzeigt
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

Speichern und aktivieren Sie dann das Snippet.

Wieder sehen Sie die Schaltflächen In den Warenkorb auf Ihrer Shop-Seite.

Schaltfläche „In den Warenkorb“ auf der Divi-Shop-Seite

Wie Sie sehen, sind beide Methoden sehr einfach und effektiv. Wenn Sie ein Anfänger sind, empfehlen wir Ihnen, Code-Snippets zu verwenden. Es ist ein kostenloses Tool, mit dem Sie die Kerndateien einfach ändern können und das Ihre Website nicht beschädigt.

So passen Sie die Schaltfläche „In den Warenkorb“ an

Nachdem Sie nun erfolgreich eine Schaltfläche „In den Warenkorb“ in die Divi-Shop-Seiten eingefügt haben, müssen Sie die Schaltfläche anpassen.

Dazu müssen Sie eine benutzerdefinierte CSS-Klasse für Ihre Schaltfläche angeben. Ein einfacher PHP-Code erledigt die Aufgabe. Dann können Sie ein wenig CSS hinzufügen und die Schaltfläche anpassen.

Fügen Sie dazu den folgenden PHP-Code als neuen Code-Snippets in den Abschnitt Code Snippets ein.

 add_action( 'woocommerce_after_shop_loop_item', 'quadlayers_woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'quadlayers_woocommerce_template_loop_add_to_cart', 10 );

Funktion quadlayers_woocommerce_template_loop_add_to_cart(){
   woocommerce_template_loop_add_to_cart(array('class'=>'button product_type_simple add_to_cart_button ajax_add_to_cart my_class_here')); 
}

Dann können Sie CSS verwenden, um die Schaltfläche zu ändern. In diesem Code haben wir die Standard-CSS-Klassen der Schaltfläche erwähnt wie: button product_type_simple add_to_cart_button ajax_add_to_cart . Außerdem können Sie Ihre benutzerdefinierte CSS-Klasse hinzufügen, indem my_class_here ersetzen.

Wenn Sie Ihrem Design zusätzliches CSS hinzufügen, können Sie Folgendes verwenden: .my_class { option:value !important; } .my_class { option:value !important; } . Stellen Sie sicher, dass Sie my_class durch Ihre CSS-Klasse ersetzen.

Sie können beispielsweise einen CSS-Code wie diesen verwenden:

 .woocommerce-LoopProduct-Link + ein {
    /* Ihr benutzerdefiniertes CSS hier */
}

Das Divi-Design wird mit einem benutzerdefinierten CSS-Editor geliefert, und Sie können den gesamten CSS-Code dort einfügen. Andererseits können Sie den zusätzlichen CSS-Bereich über Ihren WordPress-Customizer verwenden. Wir empfehlen die Verwendung des Customizers, da Sie damit in Echtzeit sehen können, was Sie tun.

Fazit

Auf diese Weise können Sie also ganz einfach eine Schaltfläche „In den Warenkorb“ in die Divi-Shop-Seiten einfügen. Auf diese Weise können Sie den Kaufprozess verbessern, Kunden ein besseres Erlebnis bieten und Ihre Conversions steigern. Darüber hinaus hilft es Ihnen, den Warenkorbabbruch in Ihrem Geschäft zu reduzieren.

Eine weitere interessante Option zur Steigerung der Konversion in Ihrem Geschäft besteht darin, direkte Checkout-Links in Ihr Geschäft aufzunehmen. Auf diese Weise verkürzen Sie den Kaufprozess und verringern die Wahrscheinlichkeit, dass Benutzer abbrechen. Weitere Informationen dazu finden Sie in unserem Leitfaden zum Erstellen von direkten Checkout-Links für WooCommerce.

Wenn Sie Ihren Shop außerdem anpassen möchten, empfehlen wir Ihnen, sich die folgenden Tutorials anzusehen:

  • Wie passe ich die WooCommerce-Shop-Seite an?
  • Funktion „In den Warenkorb“ programmgesteuert in WooCommerce hinzufügen
  • Wie implementiert man die AJAX-Schaltfläche „In den Warenkorb“ in WooCommerce?
  • Wie passe ich die Checkout-Seite von WooCommerce an?

Um das Divi-Theme optimal zu nutzen, können Sie sich schließlich unsere Leitfäden ansehen:

  • Wie verstecke und entferne ich die Fußzeile in Divi?
  • Das Divi-Kontaktformular funktioniert nicht? So beheben Sie das Problem!

Wenn Sie diesen Artikel hilfreich fanden, erwägen Sie bitte, diesen Beitrag mit Ihren Freunden in den sozialen Medien zu teilen. Es hilft anderen, die Divi-Shop-Seiten anzupassen.

Weitere Informationen zur Verbesserung der Conversions finden Sie in den besten WooCommerce-Schnellkauf-Plugins.