How to add quantity field with each product on shop page WooCommerce ?

In this tutorial we’ll learn how to add quantity field with each product on shop page, so that we can add any number of products from the shop page as well.

Initially it looks something like this:

To do the job you need to replace the code of the add-to-cart file with the one given below.

You can find the add-to-cart file under wp-content > plugins >woocommerce > templates > loop > add-to-cart.php

Replace all the code in this file with this one.

<?php
 
/**
 
* Loop Add to Cart
 
*
 
* @author     WooThemes
 
* @package     WooCommerce/Templates
 
* @version     1.6.4
 
*/
 
 
 
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' => ''
 
       );
 
 
 
       $handler = apply_filters( 'woocommerce_add_to_cart_handler', $product->product_type, $product );
 
 
 
switch ( $handler ) {
 
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 ( $product->product_type == 'simple' ) {
 
            ?>
 
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
 
<?phpwoocommerce_quantity_input(); ?>
 
 
<button type="submit" class="button alt"><?php echo $label; ?> Add to Cart</button>

 
</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 );
 
       }
 
   ?>
  
<?phpendif; ?>

Refresh the shop page and you’ll see the changes.

Waqas

I hope you enjoy reading this blog post. If you want my team to do WooCommerce Maintenance for you, click here.

Leave a Comment

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