WooCommerce AJAX agregar al carrito – Tutorial paso a paso

Publicado: 2019-11-20

Hace algunas semanas hablamos sobre cómo agregar la función de carrito mediante programación para aumentar sus ventas. Hoy veremos cómo implementar AJAX en el botón Agregar al carrito en los productos de WooCommerce . Esto mejorará la experiencia del usuario y el proceso de ventas en general, lo que también lo ayudará a optimizar su tienda y aumentar sus ingresos.

Hoy en día, si desea tener una tienda exitosa, es clave que su sitio actualice el carrito dinámicamente. De lo contrario, cada vez que un usuario agregue un producto al carrito, la página se recargará, lo que hará que el proceso de compra sea muy lento y aumentará las posibilidades de que los clientes abandonen. Es por eso que renovar su tienda con la función de agregar al carrito WooCommerce AJAX es imprescindible para reducir el abandono del carrito y aumentar sus ventas.

En esta guía, le mostraremos cómo hacerlo paso a paso.

Beneficios de AJAX en WooCommerce

En resumen, los beneficios de usar AJAX en su tienda son:

  • Reducir la carga del servidor y el ancho de banda
  • Acelera el proceso de compra
  • Mejorar la experiencia del cliente
  • Reducir el abandono del carrito
  • Aumentar las tasas de conversión

Tutorial: WooCommerce AJAX añadir al carrito

Para aplicar la función de añadir al carrito de AJAX en WooCommerce hay dos opciones:

  1. con un complemento
  2. Codificándolo tú mismo

Echemos un vistazo a cada método.

1) AJAX agregar al carrito con un complemento

Si no tiene experiencia en codificación o prefiere una solución fácil, usar un complemento es una excelente opción. Simplemente descargue nuestro complemento WooCommerce para agregar al carrito de AJAX, instálelo y el software hará el resto.

Ajax agregar al carrito para WooCommerce

AJAX add to cart for WooCommerce es uno de los mejores complementos para agregar AJAX al botón Agregar al carrito de WooCommerce. Esta herramienta permite a los compradores incluir productos únicos o variables en sus carritos sin tener que volver a cargar el sitio cada vez. Lo que es aún mejor es que funciona sin problemas en el 99 % de los temas de WordPress y no requiere ninguna configuración inicial. Una vez que lo instale, estará listo para funcionar.

2) Codifícalo tú mismo

¿Tiene algunas habilidades de codificación y prefiere personalizar su botón Agregar al carrito de WooCommerce AJAX? En esta guía, le mostraremos cómo hacerlo paso a paso.

A) Instalar un tema hijo

Lo primero que tienes que hacer es crear un tema hijo . Si no tiene uno, puede usar un complemento. Hay varios, así que elige el que más te guste e instálalo en tu tienda. ¿Por qué deberías instalar un tema hijo? Porque si personaliza directamente los archivos del tema, la próxima vez que actualice el tema, los nuevos archivos reemplazarán sus cambios y todas sus personalizaciones se perderán. Sin embargo, si personaliza el tema secundario, las modificaciones no se anularán.

B) Incluir archivo JavaScript (JS)

En el archivo functions.php del tema secundario, incluya un archivo JavaScript utilizando el enlace wp_enqueue_script . Este es uno de los ganchos más populares que ofrece WordPress para personalizar sitios web. Echemos un vistazo al script que incluye el archivo ajax_add_to_cart.js a continuación:

 función ql_woocommerce_ajax_add_to_cart_js() {
    if (función_existe('es_producto') && es_producto()) {  
       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');

Con el condicional if (function_exists('is_product') && is_product()) en la línea 2, se asegura de que JQuery solo se aplique en una página de producto.

C) Crear un archivo JS

Una vez que haya hecho eso, cree el archivo que incluyó en el paso anterior. Simplemente vaya a su cPanel y luego a la carpeta del tema secundario . Después de eso, sigue la ruta wp_content /themes/ folder . Allí, cree una nueva carpeta en el tema secundario llamada js y luego un archivo dentro con el mismo nombre que usó en el gancho ajax-add-to-cart.js . Tenga en cuenta que este paso también funciona incluso si utiliza un cliente FTP. Si su tema hijo ya tiene una carpeta JS, puede usarla sin crear una nueva.

D) El archivo JQuery/JS

El siguiente paso es trabajar en el archivo JQuery que cargó en su tema hijo. Ese archivo está vacío, por lo que debe agregar scripts. Primero, evite que el botón Agregar al carrito vuelva a cargar la página con el siguiente script:

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

Tenga en cuenta que usamos el selector $('.single_add_to_cart_button') para activar la llamada AJAX cuando se hace clic en el botón. Debe comprender esto porque todo el siguiente script irá dentro de esta función.

E) JQuery WooCommerce AJAX agregar al carrito en productos individuales

Entonces, el script JQuery completo para agregar AJAX al carrito en productos individuales es:

 jQuery(documento).ready(función($) {
    $('.single_add_to_cart_button').on('click', function(e){ 
    e.preventDefault();
    $esteboton = $(este),
                $formulario = $esteboton.closest('formulario.carrito'),
                id = $esteboton.val(),
                product_qty = $formulario.find('entrada[nombre=cantidad]').val() || 1,
                id_producto = $formulario.find('entrada[nombre=id_producto]').val() || identificación,
                id_variación = $formulario.find('input[nombre=id_variación]').val() || 0;
    var datos = {
            acción: 'ql_woocommerce_ajax_add_to_cart',
            id_producto: id_producto,
            producto_sku: '',
            cantidad: cantidad_producto,
            variación_id: variación_id,
        };
    $.ajax({
            tipo: 'publicación',
            URL: wc_add_to_cart_params.ajax_url,
            datos: datos,
            beforeSend: función (respuesta) {
                $thisbutton.removeClass('agregado').addClass('cargando');
            },
            completo: función (respuesta) {
                $thisbutton.addClass('agregado').removeClass('cargando');
            }, 
            éxito: función (respuesta) { 
                if (respuesta.error & respuesta.product_url) {
                    ventana.ubicación = respuesta.product_url;
                    regreso;
                } demás { 
                    $(documento.cuerpo).trigger('agregado_al_carrito', [respuesta.fragmentos, respuesta.carrito_hash, $esteboton]);
                } 
            }, 
        }); 
     }); 
});

F) El script PHP

Luego, necesita el controlador de PHP. La mejor manera es usar algunos de los ganchos de filtro de WooCommerce para construir su función de agregar al carrito . Esta vez lo harás usando AJAX. Simplemente copie y pegue el siguiente script en el archivo functions.php del tema secundario debajo del script anterior que usamos para incluir el archivo JS.

 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');          
función ql_woocommerce_ajax_add_to_cart() {  
    $product_id = apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $cantidad = vacío($_POST['cantidad']) ? 1 : wc_stock_amount($_POST['cantidad']);
    $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 ('sí' === get_option('ql_woocommerce_cart_redirect_after_add')) { 
                wc_add_to_cart_message(array($product_id => $cantidad), verdadero); 
            } 
            WC_AJAX :: get_refreshed_fragments(); 
            } demás { 
                $datos = matriz( 
                    'error' => verdadero,
                    'product_url' => apply_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));
                echo wp_send_json($datos);
            }
            wp_morir();
        }

¡Eso es! ¡Acabas de crear tu botón Agregar al carrito de WooCommerce AJAX ! Pero, ¿cómo sabes que has hecho todo correctamente? Puedes comprobarlo fácilmente. Cuando hace clic en el botón Agregar al carrito , el producto debe agregarse al carrito sin recargar la página.

Conclusión

Con todo, si desea optimizar su tienda, la función de agregar al carrito de WooCommerce AJAX es imprescindible. La manera fácil de aplicarlo es usando el complemento WooCommerce para agregar al carrito de AJAX. Sin embargo, si tiene habilidades de codificación, puede codificar AJAX agregar al carrito usted mismo con un tema secundario y un poco de PHP como se describe anteriormente.

Ambas opciones son excelentes así que elige la que mejor se adapte a tus necesidades y habilidades. Esto lo ayudará a mejorar la experiencia del usuario y aumentar sus tasas de conversión. Háganos saber sus pensamientos en la sección de comentarios a continuación.

Finalmente, para obtener más guías sobre WooCommerce, le recomendamos que consulte nuestras guías sobre cómo agregar productos de WooCommerce y cómo crear atributos de productos predeterminados en WooCommerce.