So zeigen Sie das Ladesymbol auf der Schaltfläche „In den Warenkorb“ in Woocommerce an [closed]

Ich möchte ein Ladesymbol auf der Schaltfläche „In den Warenkorb“ anzeigen, wenn der Benutzer darauf klickt. Wenn der Benutzer derzeit auf meiner Website auf die Schaltfläche klickt, geschieht 2-4 Sekunden lang nichts und die Schaltfläche zum Anzeigen des Einkaufswagens wird angezeigt.

Ich möchte während dieser 4 Sekunden ein Lade- oder Drehsymbol anzeigen. Ist es möglich? kann mich jemand anleiten

Verknüpfung: http://www.myeatable.com/cnc-ongole/

Ich habe eine bessere Lösung, es ist nicht nötig, ein Bild an die Schaltfläche anzuhängen.

WooCommerce stellt eine Klasse „loading“ zur Verfügung. Hängen Sie diese Klasse einfach an die Schaltfläche „In den Einkaufswagen“ und fertig.

$( '.add_to_cart_button' ).on( 'click', function(){
   $(this).addClass('loading');
});

Und sobald das Produkt in den Warenkorb gelegt wurde, können Sie die Funktion removeClass verwenden, um den Loader wie zu entfernen

 $(this).removeClass('loading');

Und um einen WooCommerce Loader zu einem bestimmten Abschnitt hinzuzufügen, können Sie diese WooCommerce-Funktionen verwenden

block( $( 'div.summary.entry-summary' ) );
unblock( $( 'div.summary.entry-summary' ) );

Diese beiden Funktionen blockieren und entsperren einen bestimmten Abschnitt, indem sie die bestimmte ID oder Klasse übergeben.

var is_blocked = function( $node ) {
    return $node.is( '.processing' ) || $node.parents( '.processing' ).length;
};

var block = function( $node ) {
    if ( ! is_blocked( $node ) ) {
        $node.addClass( 'processing' ).block( {
            message: null,
            overlayCSS: {
                background: '#fff',
                opacity: 0.6
            }
        } );
    }
};

var unblock = function( $node ) {
    $node.removeClass( 'processing' ).unblock();
};

Für das Ladebild beim Hinzufügen zum Warenkorb könnte ich vorschlagen, einen Code in Ihr js zu schreiben, der auf dieser Seite geladen wird.

jQuery('a.add_to_cart_button').click(function(){jQuery(this).append('<img src="http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_3.gif" width="20px" height="20px"/>')});

Der Link zum Bild zum Laden ist zum Beispiel, Sie können es durch das gewünschte ersetzen.

Bevor Sie den Code in einer Datei anwenden, versuchen Sie außerdem, ihn über die Browserkonsole hinzuzufügen.