How to Add a Quantity Field to Shop Pages in WooCommerce

Including a amount subject in your WooCommerce Store web page is nice improve to the consumer expertise. This enables customers to vary the amount of the product on the store web page earlier than including to cart. On this tutorial we’ll do this with out putting in any plugin. As a substitute of getting to navigate to the cart or the product web page to extend the amount, they’ll enhance the amount from the store web page. If you consider it, making it simpler on your prospects to buy extra of your merchandise means extra gross sales for you.

1. Set up & activate the Code Snippets WordPress Plugin
2. What’s a code snippet?
3. Create a brand new code snippet known as “Add Amount Area On Store Web page for WooCommerce”
4. Copy & paste this PHP code into the snippet
5. Save & activate the snippet, then check

Copy & paste this PHP code into the snippet

• <?php // For implementation directions see: https://aceplugins.com/how-to-add-a-code-snippet/
  
  /**
  * Add amount subject on the store web page.
  */
  function ace_shop_page_add_quantity_field() {
  
  /** @var WC_Product $product */
  $product = wc_get_product( get_the_ID() );
  
  if ( ! $product->is_sold_individually() && 'variable' != $product->get_type() && $product->is_purchasable() ) {
  woocommerce_quantity_input( array( 'min_value' => 1, 'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity() ) );
  }
  
  }
  add_action( 'woocommerce_after_shop_loop_item', 'ace_shop_page_add_quantity_field', 12 );
  
  /**
  * Add required JavaScript.
  */
  function ace_shop_page_quantity_add_to_cart_handler() {
  
  wc_enqueue_js( '
  $(".woocommerce .products").on("click", ".quantity input", function() {
  return false;
  });
  $(".woocommerce .products").on("change input", ".quantity .qty", function() );
  // Trigger on Enter press
  $(".woocommerce .products").on("keypress", ".quantity .qty", function(e) {
  if ((e.which||e.keyCode) === 13) 
  });
  ' );
  
  }
  add_action( 'init', 'ace_shop_page_quantity_add_to_cart_handler' );