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

 add_action( 'woocommerce_single_product_summary', 'QL_add_text_above_add_to_cart', 20 );
Funktion 'QL_add_text_above_add_to_cart'() {
  echo '14-tägige Geld-zurück-Garantie';
}

Andererseits können Sie auch Text unterhalb der Schaltfläche „In den Warenkorb“ hinzufügen . Dies kann nützlich sein, um Käufer darüber zu informieren, dass es beispielsweise Rabatte für Großeinkäufe gibt. Um einen Text unter der Schaltfläche „In den Einkaufswagen“ hinzuzufügen, können Sie dieses Code-Snippet verwenden:

 add_action( 'woocommerce_after_add_to_cart_button', 'QL_add_text_under_add_to_cart' );
Funktion QL_add_text_under_add_to_cart() {
  echo 'Kontaktieren Sie uns für Großeinkäufe';
} 

Wie Sie sehen, sind dies sehr einfache Änderungen, die Sie vornehmen können, um Ihre Konversionsraten im Handumdrehen zu erhöhen.

3) Ändern Sie die Farbe der Schaltfläche „In den Warenkorb“.

Sehen wir uns nun an, wie Sie die Schaltfläche „In den Warenkorb“ bearbeiten, indem Sie ihre Farbe ändern. Auch wenn die meisten WordPress- und WooCommerce-Themes mit Standardfarben für die Schaltflächen geliefert werden, sollten Sie sicherstellen, dass sie zum Stil Ihres Shops passen.

Um die Farbe der Schaltfläche „Zum Warenkorb hinzufügen“ in WooCommerce anzupassen, müssen Sie der style.css -Datei ein CSS-Code-Snippet hinzufügen. Sie können mit einem FTP-Client oder über das WordPress-Dashboard darauf zugreifen, indem Sie zu Aussehen > Anpassen > Zusätzliches CSS gehen. Hier gibt es zwei Möglichkeiten:

1. Ändern Sie die Farbe der Schaltfläche „In den Warenkorb“ für einzelne Produkte
2. Ändern Sie die Farbe der Schaltfläche „In den Warenkorb“ auf Archivseiten

3.1) Ändern Sie die Farbe einzelner Produkte

Fügen Sie diesen Code in die style.css -Datei ein und ändern Sie die Farben in die gewünschten Farben. In diesem Fall haben wir einen roten Hintergrund und silbernen Text.

 .einzelprodukt .produkt .single_add_to_cart_button.button {
Hintergrundfarbe: #FF0000;
Farbe: #C0C0C0;
}

3.2) Ändern Sie die Farbe der Schaltfläche „In den Warenkorb“ auf der Archivseite

Um die Schaltfläche „Zum Warenkorb hinzufügen“ anzupassen und ihre Farbe auf der WooCommerce-Archivseite zu ändern, verwenden Sie diesen Code und ändern Sie die Hex-Codes in diejenigen, die für Ihren Shop sinnvoll sind.

 .woocommerce .product .add_to_cart_button.button {
Hintergrundfarbe: #FF0000;
Farbe: #C0C0C0;
} 

4) Entfernen Sie die Schaltfläche „In den Warenkorb“ und fügen Sie auf der Shop-Seite eine Schaltfläche „Direktkauf“ hinzu

Sehen wir uns nun eine erweiterte Option an. Ein Kaufprozess mit mehreren Schritten erhöht die Wahrscheinlichkeit, dass Käufer in jeder Phase abbrechen. Aus diesem Grund ist die Verkürzung des Trichters eine großartige Möglichkeit, den Checkout zu optimieren und die Conversion-Raten zu verbessern.

In diesem Abschnitt zeigen wir Ihnen, wie Sie die Schaltfläche „ Zum Warenkorb hinzufügen“ entfernen und durch eine Schaltfläche zum direkten Kauf mithilfe von „Direct Checkout for WooCommerce “ ersetzen. Dieses Plugin hat sowohl kostenlose als auch Premium-Versionen und verfügt über viele Funktionen, die Ihnen helfen, den Checkout zu vereinfachen. Darüber hinaus können Sie die Warenkorbseite überspringen und Benutzer direkt zur Checkout-Seite umleiten , wodurch der Kaufvorgang verkürzt wird. Sehen wir uns also an, wie Sie die Schaltfläche „In den Warenkorb“ vollständig entfernen und durch eine Schaltfläche zum direkten Kaufen ersetzen.

Ändern Sie die Funktion der Schaltfläche In den Warenkorb

Zuerst müssen Sie Direct Checkout installieren und aktivieren. Sie können die kostenlose Version über diesen Link herunterladen oder sich einen der Premium-Pläne ansehen, die bei 19 USD (einmalige Zahlung) beginnen.

Gehen Sie nach der Aktivierung des Plugins in Ihrem WordPress-Dashboard zu WooCommerce > Direct checkout > General und füllen Sie die Optionen wie folgt aus:

Weitere Informationen zum Anpassen der WooCommerce-Shopseite finden Sie in dieser vollständigen Anleitung.

Ändern Sie den Text der Schaltfläche „Zum Warenkorb hinzufügen“.

Nachdem Sie die Optionen auf der Registerkarte „Allgemein“ eingerichtet haben, leitet die Schaltfläche „In den Einkaufswagen“ die Benutzer zur Checkout-Seite weiter. Sie sollten jedoch auch den Text der Schaltfläche bearbeiten, wenn Sie ihre Funktion geändert haben. Die Schaltfläche fügt dem Warenkorb keine Produkte mehr hinzu, daher ist es besser, sie zum Beispiel in etwas wie Jetzt kaufen zu ändern. Gehen Sie dazu auf die Registerkarte Archive und füllen Sie die Optionen wie folgt aus: Hier können Sie den Schaltflächentext für bestimmte Produkttypen ändern. Wir wenden die Änderungen auf alle Produkttypen an, indem wir alle im entsprechenden Feld auswählen. Danach ist es Zeit, das Frontend zu überprüfen.

Wie Sie sehen können, haben wir die Schaltfläche „In den Warenkorb“ in unserem WooCommerce-Shop angepasst und die Schaltfläche „In den Warenkorb“ durch eine Schaltfläche „Jetzt kaufen “ ersetzt, die Kunden von der Shop-Seite direkt zur Checkout-Seite führt. Darüber hinaus haben wir die Warenkorbfunktion vollständig aus unserem Shop entfernt.

Weitere Informationen zum Entfernen der Schaltfläche „In den Warenkorb“ finden Sie in dieser Schritt-für-Schritt-Anleitung.

5) Passen Sie die Schaltfläche „In den Einkaufswagen“ an und fügen Sie auf der Produktseite eine Schaltfläche „Direktkauf“ hinzu

Schließlich können wir etwas Ähnliches tun und die Schaltfläche In den Warenkorb anpassen, um die Benutzer von der Produktseite zur Kasse umzuleiten .

Auf diese Weise können Sie in WooCommerce sowohl auf der Shop- als auch auf der Produktseite ganz einfach eine benutzerdefinierte Schaltfläche „In den Warenkorb “ erstellen. Und das Beste daran ist, dass Sie auf jeder Seite unterschiedliche Schaltflächen haben können.

So passen Sie die Nachricht „Zum Warenkorb hinzugefügt“ an

Neben dem Anpassen der Schaltfläche können Sie auch die Nachricht „Zum Warenkorb hinzugefügt“ bearbeiten. Der einfachste Weg, dies zu tun, besteht darin, einfach die Nachricht zu ändern, indem Sie das folgende Skript in die Datei functions.php einfügen.

 add_filter( 'wc_add_to_cart_message_html', 'quadlayers_custom_add_to_cart_message' );
Funktion quadlayers_custom_add_to_cart_message() {
   $message = 'Ihr Produkt wurde in den Warenkorb gelegt. Danke für ihren Einkauf!' ;
   $nachricht zurückgeben;
}

In diesem Fall ändern wir die Nachricht in Ihr Produkt wurde Ihrem Warenkorb hinzugefügt. Danke für ihren Einkauf!

Um es persönlicher zu gestalten, können Sie den Namen des Produkts, das der Kunde gerade in den Warenkorb gelegt hat, wie folgt anzeigen:

 add_filter( 'wc_add_to_cart_message', 'quadlayers_custom_wc_add_to_cart_message', 10, 2 ); 
 
Funktion quadlayers_custom_wc_add_to_cart_message( $message, $product_id ) { 
    $message = sprintf(esc_html__('%s wurde Ihrem Einkaufswagen hinzugefügt. Vielen Dank für Ihren Einkauf!','tm-organik'), get_the_title( $product_id ) ); 
    $nachricht zurückgeben; 
} 

Dies sind nur einige Beispiele, aber Sie können noch viel mehr tun und der Nachricht Links und Schaltflächen hinzufügen. Weitere Informationen dazu finden Sie in unserer Anleitung zum Ändern der WooCommerce-Add-to-Cart-Nachricht.

Bonus: Ändern Sie den Text der Schaltfläche „In den Einkaufswagen“ für verschiedene Kategorien

Nehmen wir nun an, Sie haben verschiedene Produktkategorien und möchten für jede Kategorie benutzerdefinierte In den Einkaufswagen-Schaltflächen haben. Beispielsweise möchten Sie möglicherweise eine Schaltfläche mit der Aufschrift „Jetzt kaufen“ für Produktkategorie 1 haben, aber den Text „Download“ für Kategorie 2 anzeigen.

Dazu sollten Sie dieselbe Funktion verwenden, die wir in Punkt 1 verwendet haben. add_filter('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');

Sie müssen die Kategorien jedes Produkts abrufen und dann eine Bedingung verwenden, um den Text je nach Taxonomie wie folgt zu ändern:

if($category=='category 1'){
return __('Buy Now', 'woocommerce');
}elseif($category=='category 2'){
return __('Download', 'woocommerce');
}else{
return __('Default text', 'woocommerce');
}

Meine Schaltfläche „In den Warenkorb“ funktioniert nicht. Was kann ich tun?

Es kann mehrere Gründe geben, warum die Schaltfläche „In den Warenkorb“ nicht funktioniert. Die häufigsten sind:

• Plugin-/Theme-Inkompatibilität
• Produkte mit unvollständigen Informationen
• Probleme mit dem Cache
• Checkout-Endpunkte
• Dauerlinks
• ModSecurity-Probleme
• Und mehr

Um zu erfahren, wie Sie jedes dieser Probleme lösen können, lesen Sie unsere Anleitung zur Behebung der Schaltfläche „In den Warenkorb“.

ANMERKUNGEN

• Die Einstellungen, die Sie im Abschnitt „ Archive “ des Plugin-Optionsfensters speichern, gelten für die Basisseiten „Shop“ und „Produktkategorien“, während die Einstellungen im Abschnitt „Produkte“ nur für die Produktseiten gelten.
• Für diese Demo haben wir das Storefront-Design verwendet, aber Sie können jedes mit WooCommerce kompatible Design verwenden.
• Auch wenn sich die meisten Themes ohne Probleme integrieren lassen, können einige Themes die standardmäßigen WooCommerce-Funktionen ändern und Probleme bei der Verwendung von Direct Checkout verursachen.
• Wir haben einige grundlegende Funktionen von Direct Checkout behandelt. Weitere erweiterte Funktionen finden Sie in den Premium-Plänen, mit denen Sie Ihr Geschäft auf die nächste Stufe bringen können.

Fazit

Alles in allem kann die Anpassung der Schaltfläche „In den Warenkorb“ einen großen Einfluss auf Ihr Unternehmen haben. Deshalb empfehlen wir Ihnen, es an die Bedürfnisse Ihres Geschäfts anzupassen. In diesem Leitfaden haben Sie verschiedene Möglichkeiten kennengelernt, die Schaltfläche „Zum Warenkorb hinzufügen“ sowohl programmgesteuert als auch mit Plugins anzupassen:

• Ändern Sie den Text der Schaltfläche In den Warenkorb
• Fügen Sie Text über oder unter der Schaltfläche „In den Einkaufswagen“ hinzu
• Ändern Sie die Farbe der Schaltfläche „In den Einkaufswagen“.
• Entfernen Sie die Schaltfläche „In den Warenkorb“ und fügen Sie auf der Shop-Seite eine Schaltfläche „Direktkauf“ hinzu
• Passen Sie die Schaltfläche „In den Einkaufswagen“ an und fügen Sie auf der Produktseite eine Schaltfläche „Direktkauf“ hinzu