-
-
Save helgatheviking/6abe7385c23ba4238710ba6d1ccc5181 to your computer and use it in GitHub Desktop.
<?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 | |
} |
true @robzzt is right
@robizzt & @Adamyus I had the same problem but I made it work. Check it out here:
https://stackoverflow.com/questions/47392550/woocommerce-quantity-increment-with-buttons-not-working-after-ajax-refresh-and-a/47400073#47400073
Same problem here. Replaced
Updated javascript code:
$('.woocommerce .quantity').on('click', '.minus', function (e) {
var $inputQty = $(this).parent().find('input.qty');
var val = parseInt($inputQty.val());
var step = $inputQty.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
if (val > 0) {
$inputQty.val(val - step).change();
}
});
$('.woocommerce .quantity').on('click', '.plus', function (e) {
var $inputQty = $(this).parent().find('input.qty');
var val = parseInt($inputQty.val());
var step = $inputQty.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
$inputQty.val(val + step).change();
});
Still don't work for me. I make small changes and code work's even after update cart:
$('body').on('click', '.minus', function (e) {
var $inputQty = $(this).parent().find('input.qty');
var val = parseInt($inputQty.val());
var step = $inputQty.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
if (val > 0) {
$inputQty.val(val - step).change();
}
});
$('body').on('click', '.plus', function (e) {
var $inputQty = $(this).parent().find('input.qty');
var val = parseInt($inputQty.val());
var step = $inputQty.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
$inputQty.val(val + step).change();
});
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();
}
});
});
If you want a more advanced and easily configurable solution working on the product, cart and optionally shop/category pages with styling included to make the buttons correctly positioned and beautifully styled out of the box, you can use my new free plugin:
Qty Increment Buttons for WooCommerce
it works single time only ... after cart update .. plus minus not working
Qty Increment Buttons for WooCommerce has code that solves the issue of quantity not being changeable after cart update and all other AJAX calls. .ready()
is not enough. Binding the function to cart update event as well is also not enough. Any other AJAX call can possibly break it, so you need to additionally bind it to ajaxComplete()
and use .off
for your selector to avoid the function executing multiple times.
Vanilla for those that may need:
const DOM = {
plusBtns: document.querySelectorAll('.plus'),
minusBtns: document.querySelectorAll('.minus'),
};
const init = () => {
if (DOM.plusBtns.length > 0) {
DOM.plusBtns.forEach((btn) => {
btn.addEventListener('click', (event) => {
event.preventDefault();
const input = btn.nextElementSibling;
const val = Number(input.value);
let step = input.getAttribute('step');
step = (typeof(step) !== 'undefined' ? Number(step) : 1);
input.value = val + step;
});
});
}
if (DOM.minusBtns.length > 0) {
DOM.minusBtns.forEach((btn) => {
btn.addEventListener('click', (event) => {
event.preventDefault();
const input = btn.previousElementSibling;
const val = Number(input.value);
let step = input.getAttribute('step');
step = (typeof(step) !== 'undefined' ? Number(step) : 1);
if (val > 0) {
input.value = val - step;
}
});
});
}
};
export default init;
Thanks for the Vanilla, @samholguin
@samholguin Thanks for the vanilla!
Based on the html structure above, the plusBtns forEach should have:
const input = btn.previousElementSibling;
and the minusBtns forEach should have:
const input = btn.nextElementSibling;
Buttons doesn't work after you press "Update Busket" (if "Update busket" button doesn't refreshs page, it just updates it).