WooCommerce Quantity Before Add to Cart and Product Update

Recently one of my customer ask me how to add a quantity field before add to cart button in product archive page or product list page. Woocommerce provide a simple code for quantity field but it doesn’t update the value of total cart so I have to find a solution for this after searching lots of websites then found a code on Git Hub and it’s work perfect for me.

Implementation of this code is very easy just follow these steps and quantity field will be displayed if you are facing any problem or have any query please let me know.
Basically what we are doing is that changing default add to cart button with our new code which already included a quantity field as a submit form so currently it not completely ajax.

Read Also Important Topics

WooCommerce Quantity Before Add to Cart and Product Update Total Value

WooCommerce Quantity Before Add to Cart Button on Product

First you need to create file in your theme go to WooCommerce folder into your theme (If not present create new folder and rename it woocommerce) -> then Create another folder name loop after that create a new PHP file and paste below code into that file.

<?php
/**
 * Custom Loop Add to Cart.
 *
 * Template with quantity and ajax.
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly.

global $product;
?>

<?php if ( ! $product->is_in_stock() ) : ?>

 <a href="<?php echo apply_filters( 'out_of_stock_add_to_cart_url', get_permalink( $product->id ) ); ?>" class="button"><?php echo apply_filters( 'out_of_stock_add_to_cart_text', __( 'Read More', 'woocommerce' ) ); ?></a>

<?php else : ?>

 <?php
 $link = array(
 'url' => '',
 'label' => '',
 'class' => ''
 );

 switch ( $product->product_type ) {
 case "variable" :
 $link['url'] = apply_filters( 'variable_add_to_cart_url', get_permalink( $product->id ) );
 $link['label'] = apply_filters( 'variable_add_to_cart_text', __( 'Select options', 'woocommerce' ) );
 break;
 case "grouped" :
 $link['url'] = apply_filters( 'grouped_add_to_cart_url', get_permalink( $product->id ) );
 $link['label'] = apply_filters( 'grouped_add_to_cart_text', __( 'View options', 'woocommerce' ) );
 break;
 case "external" :
 $link['url'] = apply_filters( 'external_add_to_cart_url', get_permalink( $product->id ) );
 $link['label'] = apply_filters( 'external_add_to_cart_text', __( 'Read More', 'woocommerce' ) );
 break;
 default :
 if ( $product->is_purchasable() ) {
 $link['url'] = apply_filters( 'add_to_cart_url', esc_url( $product->add_to_cart_url() ) );
 $link['label'] = apply_filters( 'add_to_cart_text', __( 'Add to cart', 'woocommerce' ) );
 $link['class'] = apply_filters( 'add_to_cart_class', 'add_to_cart_button' );
 } else {
 $link['url'] = apply_filters( 'not_purchasable_url', get_permalink( $product->id ) );
 $link['label'] = apply_filters( 'not_purchasable_text', __( 'Read More', 'woocommerce' ) );
 }
 break;
 }

 // If there is a simple product.
 if ( $product->product_type == 'simple' ) {
 ?>
 <form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype="multipart/form-data">
 <?php
 // Displays the quantity box.
 woocommerce_quantity_input();

 // Display the submit button.
 echo sprintf( '<button type="submit" data-product_id="%s" data-product_sku="%s" data-quantity="1" class="%s button product_type_simple">%s</button>', esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_html( $link['label'] ) );
 ?>
 </form>
 <?php
 } else {
 echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="%s button product_type_%s">%s</a>', esc_url( $link['url'] ), esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );
 }

 ?>

<?php endif; ?>

After putting above code unit to add a simple function into your theme functions.php file so it can show only where it need to be shown.

function insertcart_wc_loop_add_to_cart_scripts() {
 if ( is_shop() || is_product_category() || is_product_tag() || is_product() ) : ?>

<script>
 jQuery( document ).ready( function( $ ) {
 $( document ).on( 'change', '.quantity .qty', function() {
 $( this ).parent( '.quantity' ).next( '.add_to_cart_button' ).attr( 'data-quantity', $( this ).val() );
 });
 });
</script>

 <?php endif;
}

add_action( 'wp_footer', 'insertcart_wc_loop_add_to_cart_scripts' );

After adding days codes save your file.
please note you must take backup before doing changes into your theme so if accidentally something goes wrong you have backup

9 thoughts on “WooCommerce Quantity Before Add to Cart and Product Update

  1. hi!, i need just this!, but, i’m not so sure of where i have to put the codes… in what folders, and how to link to my site… sorry, i’m just 1 month new to wp and woocommerce 🙁

  2. I created a file with all of the code in the 1st code block above, and the file is here:
    /wp-content/themes/dazzling-child/woocommerce/loop/quantity2cart.php

    I named the file quantity2cart.php because you didn’t say what to call it.

    I added the function in the 2nd code block to the functions.php file for my theme. (This I’ve done successfully for several other code snippets.)

    But it’s not working. There is no change to the Add to Cart buttons on my pages. They display exactly as before, with just the Add to Cart button and no quantity field.

    Can you see what I might have done wrong? Thank you.

    1. Ah, GOT IT! I found in another website that the file has to be called add-to-cart.php. Changed the name to that, and it works perfectly.

      THANK YOU thank you for posting this information.

  3. I just update woocommerce to 3.0.2 and is_product_tag() function stop working

    this is what i am using on woocommerce.php file

    if (is_product_tag()) {
    }

  4. Hello Sandy!
    Nice tutorial. I’m have a website where i need to separate the quantity field from the add to cart button. Do you know if there is something similar to this code for do this operation updating the value in the cart too?

    Thank you,
    Bruno

      1. Thank you for your answer Sandy but i don’t understand what you mean. Custom taxonomy for quantity field?

Leave a Reply

Your email address will not be published. Required fields are marked *

Name *
Email *
Website