WooCommerce uses number inputs for the cart quantities by default, as most browsers now support. <input type="number" />
However, you may want to have JavaScript powered inputs if you want greater control over appearance. Simply all you need to change Plus and minus Quantity button is, first get lead of the default quantity-input.ph by replacing it with this code
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
|
<?php
/**
* Product quantity inputs with plus/minus buttons
*
* Save this template to your theme as woocommerce/global/quantity-input.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.5.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
if ( $max_value && $min_value === $max_value ) {
?>
<input type="hidden" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $min_value ); ?>" />
<?php
} else {
?>
<div class="quantity">
<input class="minus" type="button" value="-">
<input type="number" 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' ) ?>" class="input-text qty text" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" />
<input class="plus" type="button" value="+">
</div>
<?php
}
?>
|
then add this simple Ajax Javascript codes that will update your product Quantity and amount every time you change your Product Quantity.
NB: this must be placed in your Function.php or wherever your loading your Javascript if your working on a Custom Theme.
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
|
<?php
// Add this to your theme's functions.php
function jh_add_script_to_footer(){
if( ! is_admin() ) { ?>
<script>
jQuery(document).ready(function($){
$(document).on('click', '.plus', function(e) { // replace '.quantity' with document (without single quote)
$input = $(this).prev('input.qty');
var val = parseInt($input.val());
var step = $input.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
$input.val( val + step ).change();
});
$(document).on('click', '.minus', // replace '.quantity' with document (without single quote)
function(e) {
$input = $(this).next('input.qty');
var val = parseInt($input.val());
var step = $input.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
if (val > 0) {
$input.val( val - step ).change();
}
});
});
</script>
<?php
}
}
add_action( 'wp_footer', 'jh_add_script_to_footer' );
?>
|
