Quantity box with plus and minus buttons in woocommerce
How to make Quantity box with plus and minus buttons in woocommerce like this:
Step 1. Add buttons
Go to folder /wp-content/plugins/woocommerce/templates/global, and copy file quantity-input.php to folder your-theme/woocommerce/global/
Edit the file and add two buttons to it. Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <div class="quantity form-group--number"> <?php do_action( 'woocommerce_before_quantity_input_field' ); ?> <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php echo esc_attr( $label ); ?></label> <button class="down minus qty_button" onclick="event.preventDefault();"></button> <input type="number" id="<?php echo esc_attr( $input_id ); ?>" class="form-control <?php echo esc_attr( join( ' ', (array) $classes ) ); ?>" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( 0 < $max_value ? $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' ); ?>" size="4" placeholder="<?php echo esc_attr( $placeholder ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" /> <button class="up plus qty_button" onclick="event.preventDefault();"></button> <?php do_action( 'woocommerce_after_quantity_input_field' ); ?> </div> |
In this code, we have inserted these two buttons:
1 | <button class="minus qty_button" onclick="event.preventDefault();">-</button><button class="plus qty_button" onclick="event.preventDefault();">+</button> |
And added custom classes.
Step 2. Add javascript code
For the buttons to work, you need to connect this script:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <script> jQuery( function( $ ) { if ( ! String.prototype.getDecimals ) { String.prototype.getDecimals = function() { var num = this, match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/); if ( ! match ) { return 0; } return Math.max( 0, ( match[1] ? match[1].length : 0 ) - ( match[2] ? +match[2] : 0 ) ); } } // Quantity "plus" and "minus" buttons $( document.body ).on( 'click', '.plus, .minus', function() { var $qty = $( this ).closest( '.quantity' ).find( '.qty'), currentVal = parseFloat( $qty.val() ), max = parseFloat( $qty.attr( 'max' ) ), min = parseFloat( $qty.attr( 'min' ) ), step = $qty.attr( 'step' ); // Format values if ( ! currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0; if ( max === '' || max === 'NaN' ) max = ''; if ( min === '' || min === 'NaN' ) min = 0; if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1; // Change the value if ( $( this ).is( '.plus' ) ) { if ( max && ( currentVal >= max ) ) { $qty.val( max ); } else { $qty.val( ( currentVal + parseFloat( step )).toFixed( step.getDecimals() ) ); } } else { if ( min && ( currentVal <= min ) ) { $qty.val( min ); } else if ( currentVal > 0 ) { $qty.val( ( currentVal - parseFloat( step )).toFixed( step.getDecimals() ) ); } } // Trigger change event $qty.trigger( 'change' ); }); }); </script> |
Step 3. Add css styles for quantity buttons
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | <style> .form-group--number { max-width: 150px; } label.screen-reader-text { display: none; } .form-group--number button { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 20px; height: 20px; max-width: 20px; color: #222; font-size: 30px; border: none; background: none; } .form-group--number button.down { left: 12px; } .form-group--number button.down:before { position: absolute; top: 50%; left: 50%; display: inline-block; content: ''; width: 14px; height: 1px; background-color: #999; -webkit-transform: translate(-50%, -50%) rotate(0deg); -moz-transform: translate(-50%, -50%) rotate(0deg); -ms-transform: translate(-50%, -50%) rotate(0deg); -o-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } .form-group--number button.up { right: 12px; } .form-group--number button.up:before, .form-group--number button.up:after { position: absolute; top: 50%; left: 50%; display: inline-block; content: ''; width: 14px; height: 1px; background-color: #999; } .form-group--number button.up:before { -webkit-transform: translate(-50%, -50%) rotate(90deg); -moz-transform: translate(-50%, -50%) rotate(90deg); -ms-transform: translate(-50%, -50%) rotate(90deg); -o-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .form-group--number button.up:after { -webkit-transform: translate(-50%, -50%) rotate(0deg); -moz-transform: translate(-50%, -50%) rotate(0deg); -ms-transform: translate(-50%, -50%) rotate(0deg); -o-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } .form-group--number .form-control { border: 2px solid #eaeaea; height: 45px; padding: 0 25px; font-size: 18px; font-weight: 600; text-align: center; color: #222; background-color: transparent; } .form-group--number input { border-radius: 0; } </style> |
As a result, you should get working buttons plus and minus.