WooCommerce: Añadir campo para la cantidad en la Tienda

Como sabe, puede marcar la casilla de verificación “ Habilitar botones AJAX para agregar al carrito en archivos ” en la configuración de WooCommerce para agregar productos al carrito 

Menu WooCommerce / ajustes / productos / Activar botones AJAX de añadir al carrito en los archivos

Esto es excelente para ciertas empresas, especialmente aquellas que venden al por mayor y donde los clientes saben exactamente lo que necesitan comprar sin la necesidad de consultar la página de un solo producto.

La mala noticia es que el botón Agregar al carrito de Ajax , es que el botón Ajax Agregar al carrito solo funciona para productos simples, mientras que para los variables se convertirá en un enlace “Seleccionar opciones” sin posibilidad de agregar una variación al carrito desde allí.

Implementacion

Pegar el codigo en tu archivo functions.php   

Codigo obtenido desde:

https://stackoverflow.com/questions/48722178/add-a-quantity-field-to-ajax-add-to-cart-button-on-woocommerce-shop-page

<?php
/*
https://stackoverflow.com/questions/48722178/add-a-quantity-field-to-ajax-add-to-cart-button-on-woocommerce-shop-page
Me tomó un día entero hacer que esto funcionara, pero aquí está el código que funcionó para mí. 
Agregue a su funciones.php: está adaptado de lo anterior y estoy en WooCommerce 5.0.0
*/
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
          // Get the necessary classes
        $class = implode( ' ', array_filter( array(
            'button',
            'product_type_' . $product->get_type(),
            $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
            $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
        ) ) );

         // Adding embeding <form> tag and the quantity field
        $html = sprintf( '%s%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>%s',
        '<form class="cart">',
        woocommerce_quantity_input( array(), $product, false ),
        esc_url( $product->add_to_cart_url() ),
        esc_attr( isset( $quantity ) ? $quantity : 1 ),
        esc_attr( $product->get_id() ),
        esc_attr( $product->get_sku() ),
        esc_attr( isset( $class ) ? $class : 'button' ),
        esc_html( $product->add_to_cart_text() ),
        '</form>'
        );
    }
    return $html;
}


add_action( 'wp_footer' , 'archives_quantity_fields_script' );

function archives_quantity_fields_script(){
    //if( is_shop() || is_product_category() || is_product_tag() ): 

?>


    <script type='text/javascript'>
        jQuery( document ).ready( function( $ ) {
        $( document ).on( 'change', '.quantity .qty', function() {
            $( this ).parent( '.quantity' ).next( '.add_to_cart_button' ).attr( 'data-quantity', $( this ).val() );
            //alert("Changed");
        });
    });
        
        jQuery(function($) {
            // Update quantity on 'a.button' in 'data-quantity' attribute (for ajax) 
            $(".add_to_cart_button.product_type_simple").on('click', function() {
                var $button = $(this);
                $button.data('quantity', $button.parent().find('input.qty').val());
            });
            // remove old "view cart" text, only need latest one thanks!
            $(document.body).on("adding_to_cart", function() {
                $("a.added_to_cart").remove();
            });
        });
    </script>
    <?php //endif;
     }
     ?>

Activar botones AJAX de añadir al carrito en los archivos

Debemos activar : 

Menu WooCommerce / ajustes / productos / Activar botones AJAX de añadir al carrito en los archivos

Referencia

https://www.businessbloomer.com/woocommerce-ajax-add-to-cart-quantity/

Vea tambien 

→  WooCommerce: Mostrar Carrito Flotante con Plugin Free Side Cart Woocommerce