WooCommerce AJAX in den Warenkorb legen – Schritt-für-Schritt-Anleitung

Veröffentlicht: 2019-11-20

Vor einigen Wochen haben wir darüber gesprochen, wie Sie die Warenkorbfunktion programmatisch hinzufügen können, um Ihren Umsatz zu steigern. Heute sehen wir uns an , wie AJAX in der Schaltfläche „ Zum Warenkorb hinzufügen“ in WooCommerce-Produkten implementiert wird . Dies verbessert die Benutzererfahrung und den gesamten Verkaufsprozess, was Ihnen auch dabei hilft, Ihr Geschäft zu optimieren und Ihren Umsatz zu steigern.

Wenn Sie heutzutage ein erfolgreiches Geschäft betreiben möchten, ist es entscheidend, dass Ihre Website den Warenkorb dynamisch aktualisiert. Andernfalls wird die Seite jedes Mal neu geladen, wenn ein Benutzer ein Produkt in den Warenkorb legt, was den Kaufprozess sehr langsam macht und die Wahrscheinlichkeit erhöht, dass Kunden abbrechen. Aus diesem Grund ist die Überarbeitung Ihres Shops mit der WooCommerce AJAX-Funktion zum Hinzufügen zum Warenkorb ein Muss, um die Aufgabe des Warenkorbs zu reduzieren und Ihren Umsatz zu steigern.

In dieser Anleitung zeigen wir Ihnen Schritt für Schritt, wie es geht.

Vorteile von AJAX in WooCommerce

Zusammenfassend sind die Vorteile der Verwendung von AJAX in Ihrem Geschäft also:

Reduzieren Sie Serverlast und Bandbreite
Beschleunigen Sie den Kaufprozess
Verbessern Sie das Kundenerlebnis
Reduzieren Sie Warenkorbabbrüche
Konversionsraten erhöhen

Tutorial: WooCommerce AJAX in den Warenkorb legen

Um die AJAX-Funktion zum Hinzufügen zum Warenkorb in WooCommerce anzuwenden, gibt es zwei Möglichkeiten:

Mit einem Plugin
Selber codieren

Werfen wir einen Blick auf jede Methode.

1) AJAX mit einem Plugin in den Warenkorb legen

Wenn Sie keine Programmiererfahrung haben oder eine einfache Lösung bevorzugen, ist die Verwendung eines Plugins eine ausgezeichnete Wahl. Laden Sie einfach unser AJAX- Add-to-Cart -WooCommerce-Plugin herunter, installieren Sie es und die Software erledigt den Rest.

Ajax für WooCommerce in den Warenkorb legen

AJAX Add to Cart for WooCommerce ist eines der besten Plugins, um AJAX zur WooCommerce Add to Cart -Schaltfläche hinzuzufügen. Mit diesem Tool können Käufer einzelne oder variable Produkte in ihren Warenkorb legen, ohne die Website jedes Mal neu laden zu müssen. Noch besser ist, dass es in 99 % der WordPress-Themes reibungslos läuft und keine Ersteinrichtung erfordert. Sobald Sie es installiert haben, ist es einsatzbereit.

2) Codieren Sie es selbst

Haben Sie einige Programmierkenntnisse und bevorzugen es, Ihre WooCommerce AJAX-Schaltfläche zum Hinzufügen zum Warenkorb anzupassen? In dieser Anleitung zeigen wir Ihnen Schritt für Schritt, wie es geht.

A) Installiere ein Child-Theme

Das erste, was Sie tun müssen, ist ein untergeordnetes Thema zu erstellen. Wenn Sie keins haben, können Sie ein Plugin verwenden. Es gibt mehrere davon, also wählen Sie einfach die aus, die Ihnen am besten gefällt, und installieren Sie sie in Ihrem Geschäft. Warum sollte man ein Child Theme installieren? Denn wenn Sie die Dateien des Designs direkt anpassen, werden beim nächsten Aktualisieren des Designs die neuen Dateien Ihre Änderungen ersetzen und alle Ihre Anpassungen gehen verloren. Wenn Sie jedoch das untergeordnete Design anpassen, werden die Änderungen nicht überschrieben.

B) JavaScript-Datei (JS) einschließen

Fügen Sie in der Datei functions.php des untergeordneten Designs eine JavaScript-Datei ein, indem Sie den Hook wp_enqueue_script verwenden . Dies ist einer der beliebtesten Hooks, die WordPress zum Anpassen von Websites anbietet. Schauen wir uns das Skript an, das die folgende Datei ajax_add_to_cart.js enthält:

 Funktion ql_woocommerce_ajax_add_to_cart_js() {
    if (function_exists('is_product') && is_product()) {  
       wp_enqueue_script('custom_script', get_bloginfo('stylesheet_directory') . '/js/ajax_add_to_cart.js', array('jquery'),'1.0' );
    }
}
add_action('wp_enqueue_scripts', 'ql_woocommerce_ajax_add_to_cart_js');

Mit der Bedingung if (function_exists('is_product') && is_product()) in Zeile 2 stellen Sie sicher, dass die JQuery nur auf einer Produktseite angewendet wird.

C) Erstellen Sie eine JS-Datei

Sobald Sie dies getan haben, erstellen Sie die Datei, die Sie im vorherigen Schritt eingefügt haben. Gehen Sie einfach zu Ihrem cPanel und dann zum Child-Theme-Ordner . Folgen Sie danach der Route wp_content /themes/ folder . Erstellen Sie dort im untergeordneten Thema einen neuen Ordner mit dem Namen js und darin eine Datei mit demselben Namen, den Sie im Hook ajax-add-to-cart.js verwendet haben . Denken Sie daran, dass dieser Schritt auch funktioniert, wenn Sie einen FTP-Client verwenden. Wenn Ihr Child-Theme bereits einen JS-Ordner hat, können Sie ihn verwenden, ohne einen neuen zu erstellen.

D) Die JQuery/JS-Datei

Der nächste Schritt besteht darin, an der JQuery-Datei zu arbeiten, die Sie in Ihr untergeordnetes Design hochgeladen haben. Diese Datei ist leer, also müssen Sie Skripte hinzufügen. Verhindern Sie zunächst mit dem folgenden Skript, dass die Schaltfläche „In den Warenkorb “ die Seite neu lädt:

 $('.single_add_to_cart_button').on('click', function(e) { 
    e.preventDefault();
});

Bitte beachten Sie, dass wir den Selektor $('.single_add_to_cart_button') verwenden , um den AJAX-Aufruf auszulösen, wenn auf die Schaltfläche geklickt wird. Sie müssen dies verstehen, da alle folgenden Skripte in diese Funktion eingefügt werden.

E) JQuery WooCommerce AJAX bei einzelnen Produkten in den Warenkorb legen

Das vollständige JQuery-Skript für das Hinzufügen von AJAX zum Warenkorb für einzelne Produkte lautet also:

 jQuery(Dokument).ready(Funktion($) {
    $('.single_add_to_cart_button').on('click', function(e){ 
    e.preventDefault();
    $dieseSchaltfläche = $(dies),
                $form = $thisbutton.closest('form.cart'),
                id = $thisbutton.val(),
                product_qty = $form.find('input[name=quantity]').val() || 1,
                product_id = $form.find('input[name=product_id]').val() || Ich würde,
                Variation_id = $form.find('input[name=variation_id]').val() || 0;
    var-Daten = {
            Aktion: 'ql_woocommerce_ajax_add_to_cart',
            Produkt-ID: Produkt-ID,
            product_sku: '',
            Menge: Produkt_Menge,
            Variations-ID: Variations-ID,
        };
    $.ajax({
            Typ: 'post',
            URL: wc_add_to_cart_params.ajax_url,
            Daten: Daten,
            beforeSend: Funktion (Antwort) {
                $thisbutton.removeClass('hinzugefügt').addClass('loading');
            },
            komplett: Funktion (Antwort) {
                $thisbutton.addClass('hinzugefügt').removeClass('loading');
            }, 
            Erfolg: Funktion (Antwort) { 
                if (Antwort.Fehler & Antwort.Produkt-URL) {
                    window.location = response.product_url;
                    Rückkehr;
                } anders { 
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                } 
            }, 
        }); 
     }); 
});

F) Das PHP-Skript

Danach benötigen Sie den PHP-Handler. Der beste Weg ist, einige der WooCommerce-Filter-Hooks zu verwenden, um Ihre Funktion zum Hinzufügen zum Warenkorb zu erstellen. Diesmal machen Sie es mit AJAX. Kopieren Sie einfach das folgende Skript und fügen Sie es in die Datei functions.php des untergeordneten Designs unterhalb des vorherigen Skripts ein, das wir zum Einbinden der JS-Datei verwendet haben.

 add_action('wp_ajax_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart'); 
add_action('wp_ajax_nopriv_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart');          
Funktion ql_woocommerce_ajax_add_to_cart() {  
    $product_id = apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $menge = leer($_POST['menge']) ? 1 : wc_stock_amount($_POST['Menge']);
    $variation_id = absint($_POST['variation_id']);
    $passed_validation = apply_filters('ql_woocommerce_add_to_cart_validation', true, $product_id, $quantity);
    $product_status = get_post_status($product_id); 
    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'publish' === $product_status) { 
        do_action('ql_woocommerce_ajax_added_to_cart', $product_id);
            if ('yes' === get_option('ql_woocommerce_cart_redirect_after_add')) { 
                wc_add_to_cart_message(array($product_id => $quantity), true); 
            } 
            WC_AJAX :: get_refreshed_fragments(); 
            } anders { 
                $daten = array( 
                    'Fehler' => wahr,
                    'product_url' => apply_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));
                echo wp_send_json($daten);
            }
            wp_die();
        }

Das ist es! Sie haben gerade Ihre WooCommerce AJAX- Schaltfläche zum Hinzufügen zum Warenkorb erstellt! Aber woher wissen Sie, dass Sie alles richtig gemacht haben? Sie können es leicht überprüfen. Wenn Sie auf die Schaltfläche „In den Warenkorb “ klicken, sollte das Produkt dem Warenkorb hinzugefügt werden, ohne die Seite neu zu laden.

Fazit

Alles in allem, wenn Sie Ihren Shop optimieren möchten, ist die WooCommerce AJAX- Add-to-Cart -Funktion ein Muss. Der einfache Weg, es anzuwenden, ist die Verwendung des AJAX- Add-to-Cart -WooCommerce-Plugins. Wenn Sie jedoch über Programmierkenntnisse verfügen, können Sie AJAX selbst mit einem untergeordneten Thema und etwas PHP wie oben beschrieben in den Warenkorb legen.

Beide Optionen sind ausgezeichnet, also wählen Sie diejenige, die Ihren Bedürfnissen und Fähigkeiten besser entspricht. Dies wird Ihnen helfen, die Benutzererfahrung zu verbessern und Ihre Konversionsraten zu erhöhen. Bitte teilen Sie uns Ihre Gedanken im Kommentarbereich unten mit.

Für weitere Anleitungen zu WooCommerce empfehlen wir Ihnen schließlich, unsere Anleitungen zum Hinzufügen von WooCommerce-Produkten und zum Erstellen von Standardproduktattributen in WooCommerce zu lesen.