David
asked 5 years ago

Is there a way to add up/down arrows alongside the quantity field?

If not, that should definitely be possible in the next update.

1 Answers
DominicStaff
answered 5 years ago

Hi,
To resolve this issue, you can download the quantity-input.php file here: https://www.dropbox.com/s/88xbcye29actj9b/quantity-input.php?dl=0
And copy/paste the file into the \wp-content\themes\dw-store\woocommerce\global folder.
Then Add the following code under line 23 of the \wp-content\themes\dw-store\footer.php file:

<script type="text/javascript">
 // The jQuery script that makes the Arrows for quantity work.
jQuery(document).ready(function($) {
  $(".product_quantity_minus").click(function(e){
    var quantityInput = $(this).closest(".quantity").children("input");
    var currentQuantity = parseInt($(quantityInput).val());
    var newQuantity = ( currentQuantity > 1 ) ?  ( currentQuantity - 1) : 1;
    $(quantityInput).val(newQuantity);
  });

  $(".product_quantity_plus").click(function(e){
    var max_quantity = 99999;
    var quantityInput = $(this).closest(".quantity").children("input");
    var currentQuantity = parseInt($(quantityInput).val());
    var newQuantity = ( currentQuantity >= max_quantity ) ?  max_quantity : ( currentQuantity+1 );
    $(quantityInput).val(newQuantity);
  });
});
</script>

Finally, add the following code to the style.css file:

.woocommerce .quantity  {
    position: relative;
}

.woocommerce .quantity .product_quantity_minus,      
.woocommerce .quantity .product_quantity_plus {      
    width: 12px;         
    height: 19px;        
    display: inline-block;       
    color: #000;         
    padding: 2px 6px;                
    margin-right: 0;         
    border-radius: 3px;      
    font-size: 22px;         
    cursor: pointer;         
    line-height: 1;      
    position: absolute;
}        
 .woocommerce .quantity .product_quantity_minus {
    top: 16px;
 }
.woocommerce .quantity .qty {        
    display: inline-block;       
    height: 17px;        
    vertical-align: top;         
}        

/* Smartphone - portrait (max 479px) */      
@media screen and (max-width: 479px) {       
    .woocommerce .shop_table.cart .quantity .product_quantity_minus,         
    .woocommerce .shop_table.cart .quantity .product_quantity_plus {         
        width: 29px;         
        height: 18px;        
        display: block;      
        padding: 3px 5px 3px 20px;       
    }        
}   

Hope this helps !

Powered by DW Question & Answer Pro