Cómo mostrar el ícono de carga en el botón Agregar al carrito en Woocommerce [closed]

3 minutos de lectura

Quiero mostrar un símbolo de carga en el botón Agregar al carrito cuando el usuario haga clic en él. Actualmente en mi sitio, cuando el usuario hace clic en el botón, no hace nada durante 2 a 4 segundos y muestra el botón Ver carrito.

Quiero mostrar algún ícono de carga o giro durante estos 4 segundos. ¿Es posible? alguien me puede guiar

Enlace: http://www.myeatable.com/cnc-ongole/

  • También tienes algún problema en este tema. Después de actualizar el carrito, se convierte en cero. Y verifique que los activos de la carpeta del complemento tengan ajax-loader@2x.gif esta imagen o no

    – Shashikant Chauhan

    19 de julio de 2015 a las 18:37

Avatar de usuario de Logan Young
logan joven

Tengo una mejor solución, no hay necesidad de agregar alguna imagen al botón.

WooCommerce proporciona una clase de ‘carga’. Simplemente agregue esta clase al botón Agregar al carrito y listo.

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

Y tan pronto como el producto se agregue al carrito, puede usar la función removeClass para eliminar el cargador como

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

Y para agregar un WooCommerce Loader a una sección en particular, puede usar estas funciones de WooCommerce

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

Estas dos funciones bloquean y desbloquean una sección en particular al pasar la identificación o clase específica.

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();
};

  • Creo que está diciendo que agregue la clase ‘cargador’, no ‘cargando’. ¿Derecha? Además, solo muestra la rueda giratoria. Quiero la pequeña caja superpuesta transparente también. ¿Alguna idea, qué clase se usará para eso?

    – Aman Dhanda

    23 de mayo de 2018 a las 13:15


  • He actualizado mi respuesta.

    – Logan joven

    26 mayo 2018 a las 19:12

  • es este código está funcionando?

    – desarrollador

    21 de julio de 2018 a las 5:36

  • Funciona muy bien para mí, muchas gracias!

    – Rico

    31 de agosto de 2018 a las 15:41

  • ¿Cómo sé si el producto se está cargando o no?

    – Bon André Opina

    1 de septiembre de 2019 a las 6:04

Para la imagen de carga en agregar al carrito, podría sugerir escribir un código en su js que se carga en esa página.

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"/>')});

El enlace a la imagen para cargar es, por ejemplo, puede reemplazarlo con el que desee.

Además, antes de aplicar el código en un archivo, intente agregarlo desde la consola del navegador.

  • ¿Cómo puedo agregar este código a mi fragmento en wordpress, o dónde puedo agregar este código jquery a mi proceso de agregar al carrito?

    – Abdalá Adhami

    14 de septiembre de 2020 a las 5:07

¿Ha sido útil esta solución?