WooCommerce Ajax add to cart quantity doesn't work

Question

Been looking for a solution for quite some time now, hopefully someone can help.

The problem:

I'm trying to make a custom product loop in a WP Bakery block (so far so good). The product loop will be added to the frontpage. I've managed to include a quantity field which worked well until I wanted to make it work on AJAX add to cart. Once I made it AJAX it only adds 1 product to cart (as if it doesn't read input from quantity). It seems that everything is working fine when on the product page, so maybe something has to be defined in the WP_Query?

The loop to be displayed on frontpage:

<?php
// Setup your custom query
$args = array( 'post_type' => 'product', 'orderby' => 'date' );
$loop = new WP_Query( $args );

while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

    <div class="product-content-containers">
        <a href="<?php echo get_permalink( $loop->post->ID ) ?>">
            <div id="mobclear" style="background-image: url(<?php echo get_the_post_thumbnail_url($loop->post->ID);?>);" class="product-right-content">
                </div>
        </a>
        <div id="descclear" class="product-left-content">
            <h3 class="h5">
                <a href="<?php echo get_permalink( $loop->post->ID ) ?>">
                    <?php the_title(); ?>
                </a>
            </h3>
            <p><?php echo apply_filters( 'woocommerce_short_description', $product->post->post_excerpt ) ?></p>
            <div>
            <p><span class="woocommerce-Price-amount amount customamount"><?php echo $product->get_price(); ?> <span class="woocommerce-Price-currencySymbol"><?php echo get_woocommerce_currency_symbol(); ?></span> pr. stk.</span></p>
            <form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>

               <?php woocommerce_quantity_input(); ?>

                <button type="submit" data-quantity="1" data-product_id="<?php echo $product->id; ?>"
                class="button alt ajax_add_to_cart add_to_cart_button product_type_simple"><?php echo $label; ?></button>

            </form>
            </div>
        </div>
    </div>
<?php endwhile; wp_reset_query(); // Remember to reset ?>

Answer 1

You had some invalid use of $loop->post->ID which within the loop when you've declared the_post() would be simply $post->ID

Also, $product->id should be $product->get_ID() if you're using the latest WC version.

This below is working in my test.

// Setup your custom query
$args = array( 'post_type' => 'product', 'orderby' => 'date' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; 
?>
<div class="product-content-containers">
    <a href="<?php echo get_permalink( $post->ID ) ?>">
        <div id="mobclear" style="background-image: url(<?php echo get_the_post_thumbnail_url($post->ID);?>);" class="product-right-content">
            </div>
    </a>
        <div id="descclear" class="product-left-content">
            <h3 class="h5">
                <a href="<?php echo get_permalink( $post->ID ) ?>">
                    <?php the_title(); ?>
                </a>
            </h3>
            <p><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?></p>
            <div>
            <p><span class="woocommerce-Price-amount amount customamount"><?php echo $product->get_price(); ?> <span class="woocommerce-Price-currencySymbol"><?php echo get_woocommerce_currency_symbol(); ?></span> pr. stk.</span></p>
            <form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>

               <?php woocommerce_quantity_input(); ?>

                <button type="submit" data-quantity="1" data-product_id="<?php echo $product->get_ID(); ?>"
                class="button alt ajax_add_to_cart add_to_cart_button product_type_simple"><?php echo $label; ?></button>

            </form>
            </div>
        </div>
    </div>
<?php endwhile; wp_reset_query(); // Remember to reset ?>
<script type="text/javascript">
jQuery('input[name="quantity"]').change(function(){
    var q = jQuery(this).val();
    jQuery('input[name="quantity"]').parent().next().attr('data-quantity', q);
});
</script>