How to add quantity box with add to cart button to variable and simple products on shop page?

Question

By default Woocommerce doesn't have quantity box for variable products.

I've tried https://ru.wordpress.org/plugins/woocommerce-ajax-add-to-cart-for-variable-products/ but it only shows up on single product page.

How to show quantity box on product page?

Kalti Kalti · Accepted Answer · 2019-07-09T10:05:10

You can create your own custom quantity-box:

Here is short overview how I did it for my site: (hope I´m able to help you with this)

I removed the standard woocommerce-hooks inside of my themes functions.php

For example:

remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

Overview for all the woocommerce hooks: (Visual guide)

Archive-Page: https://businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/

Single-Product: https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

After removing the hooks I added them on the desired location with a custom function which contains my custom quantity-box.

add_action( 'woocommerce_after_shop_loop_item_title', 'customize_woocommerce_archive_product', 10 );

function customize_woocommerce_archive_product(){
   global $product;
   $id = $product->get_id();
   $permalink = get_permalink( $product->get_id());
   $step = 1;
   $min_value = 1;
   $max_value = 10000;
   $input_name = $id;
   $input_value = 1;
   $input_name = $id;
   $sku = $product->get_sku();

   <input id="quantity_counter<?php echo $id;?>" 
   type="number" step="<?php echo esc_attr( $step ); ?>" 
   min="<?php echo esc_attr( $min_value ); ?>" 
   max="<?php echo esc_attr( $max_value ); ?>" 
   name="<?php echo esc_attr( $input_name ); ?>" 
   value="<?php echo esc_attr( $input_value ); ?>" 
   title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" 
   class="input-text qty text custom_quantity" size="4"/>

   <div class="custom_pricing_table_row custom_pricing_table_button_container">

        <a href="<?php echo $permalink;?>/?add-to-cart=<?php echo $id; ?>" 
        name="<?php echo $id;?>" data-quantity="1" 
        class="custom_pricing_table_button button product_type_simple 
        add_to_cart_button ajax_add_to_cart quantity_trigger" 
        data-product_id="<?php echo $id;?>" 
        data-product_sku="<?php echo $sku;?>" rel="nofollow">Add to cart</a>

   </div>
}

Now you have to add some javascript to change the value of data-quantity.

Inside my themes function.js I created the following function:

 jQuery('.quantity_trigger').click(function(){
    var clickedTrigger_ID = jQuery(this).attr('name');  
    var searchID = 'quantity_counter' + clickedTrigger_ID;

    var currentCounter = document.getElementById(searchID);
    var quantity = currentCounter.value;

    jQuery(this).attr("data-quantity",quantity);

});

Hope this code is able to help you out.

How to add quantity box with add to cart button to variable and simple products on shop page?

1 Answers