I am trying to create a custom wordpress template for products. For which I need to update the Total quantity when 2 sub-quantity is increased or decreased. Also the value of total quantity will be multiplied with price.
Let's say: sub-quantity-1 value = 2 and sub-quantity-2 value = 3, So Total quantity value = 5 and price is 5 x $100 = $500
The problem is I am generating this input fields using wordpress loop, so all the inputs have same class & name.
Lets say: I am increasing sub-quantity for PRODUCT 1 which increases all Total Quantity for PRODUCT 1 to PRODUCT 100
PHP CODE:
<?php $wp_query = new WP_Query( array(
'post_type' => 'product',
'post__in' => array( 481, 478, 934, 178 ),
'posts_per_page' => 15,
'offset' => 0,
'orderby' => '',
'order' => 'ASC' ) );
?>
<?php if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_querys->the_post();
global $product;
$product = get_product( get_the_ID() );
?>
<table>
<thead>
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Total Quantity</th>
<th>Button</th>
</tr>
</thead>
<tbody class="products-container">
<tr class="product-<?php echo esc_attr( $product->id ); ?>">
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
<td class="price">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">
<?php echo get_woocommerce_currency_symbol(); ?>
</span>
<?php echo $product->get_price() ?>
</span>
</td>
<td class="quantity">
<table>
<tr>
<?php echo qty-sz(); ?>
</tr>
<tr>
<?php echo qty-bn(); ?>
</tr>
</table>
</td>
<td class="quantity-total">
<?php woocommerce_quantity_input(); ?>
</td>
<td class="button">
<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
<input type="hidden" name="product_id" value="<?php echo esc_attr( $product->id ); ?>" />
<input type="hidden" name="variation_id" class="variation_id" value="0" />
<button type="submit" class="button buy-now-btn cart-btn product_type_simple add_to_cart_button ajax_add_to_cart" />Add to Cart</button>
</td>
</form>
</tr>
</tbody>
<?php endwhile; wp_reset_query();?>
</table>
GENERATED HTML CODE:
<table>
<thead>
<tr>
<th></th>
<th>Product</th>
<th>Note Box</th>
<th>Price</th>
<th>Choose Your Keyblade</th>
<th>Product Total Quantity</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="product-934" data-role="product">
<form action="/testsite/wholesale-product-page-template-custom/?add-to-cart=934" class="cart" method="post" enctype="multipart/form-data"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/plugins/woocommerce/assets/images/placeholder.png" alt="Placeholder" width="150px" height="150px"> </td>
<td class="title">
<h3>Group Product</h3>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">
$ </span>
786 </span>
</td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td class="quantity-field">
<div class="quantity">
<input step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td class="button">
<input name="add-to-cart" value="934" type="hidden">
<input name="product_id" value="934" type="hidden">
<input name="variation_id" class="variation_id" value="0" type="hidden">
<button type="submit" class="button buy-now-btn cart-btn product_type_simple add_to_cart_button ajax_add_to_cart">Add to Cart</button>
</td>
</tr>
</tbody>
<style>.product-type-variable .summary .price { display: inline-block; } .quantity { display: inline-block; }</style>
<tbody><tr class="product-719 variation-722 wrapper" data-role="product">
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/151-Sterling-Silver-Pink-Tourmaline.png" alt="Custom Key Blades-722" width="150px" height="150px"> </td>
<td class="title">
<h3>Custom Key Blades</h3><br>
<b>18 K Yellow Gold </b>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,150.00</span></span> </td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td>
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td>
<input name="attribute_pa_setting" value="18-k-yellow-gold" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
<input name="variation_id" value="722" type="hidden">
<input name="product_id" value="719" type="hidden">
<input name="add-to-cart" value="719" type="hidden">
</td>
</tr>
<tr class="product-719 variation-723 wrapper" data-role="product">
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/1470935641.png" alt="Custom Key Blades-723" width="150px" height="150px"> </td>
<td class="title">
<h3>Custom Key Blades</h3><br>
<b>18 K White Gold </b>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,000.00</span></span> </td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td>
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td>
<input name="attribute_pa_setting" value="18-k-white-gold" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
<input name="variation_id" value="723" type="hidden">
<input name="product_id" value="719" type="hidden">
<input name="add-to-cart" value="719" type="hidden">
</td>
</tr>
<tr class="product-719 variation-724 wrapper" data-role="product">
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/Modern-Iconic-Key-with-Black-Diamond-.png" alt="Custom Key Blades-724" width="150px" height="150px"> </td>
<td class="title">
<h3>Custom Key Blades</h3><br>
<b>18 K Rose Gold </b>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>950.00</span></span> </td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td>
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td>
<input name="attribute_pa_setting" value="18-k-rose-gold" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
<input name="variation_id" value="724" type="hidden">
<input name="product_id" value="719" type="hidden">
<input name="add-to-cart" value="719" type="hidden">
</td>
</tr>
</tbody>
</table>
AND HERE IS THE JQUERY SCRIPT
<script src="https://code.jquery.com/jquery-1.11.0.js" integrity="sha256-zgND4db0iXaO7v4CLBIYHGoIIudWI5hRMQrPB20j0Qw=" crossorigin="anonymous"></script>
<script>
var quantity = 0;
$(document).ready(function () {
$('input.wh-qty').each(function () {
quantity += parseInt($(this).val());
});
$('input[name="quantity"]').val(quantity);
$('input.wh-qty').on('input', function () {
quantity = 0;
$('input.wh-qty').each(function () {
var amountInfo = parseInt($(this).val());
amountInfo = (amountInfo) ? amountInfo : 0;
quantity += amountInfo;
});
$('input[name="quantity"]').val(quantity);
});
});
</script>
