Hi @matthew-maslanka @nielslange,
I figured out what the problem is. Composite products use AJAX. When you load the composite product page, you can see that it says ‘loading…’ for a short second. This means that the .on(‘click’) function is not attached to ‘.woocommerce .quantity’ in composite products because it is not yet part of the DOM when the ready function in the script tells it to fire.
There’s a quick fix though. You can simply attach the .on(‘click’) function to a wrapper element that is part of the DOM when the ready function fires. Instead of using ‘.woocommerce .quantity’ I am now using ‘form.cart, form.woocommerce-cart-form’. With ‘form.cart’ the script is loaded in composite products, single products, product bundles alike. It is additionally loaded in the cart using ‘form.woocommerce-cart-form’. However, as far as I could tell, it is never loaded twice as was the case with many other selectors, resulting in double steps up and down.
The complete code for custom.js:
jQuery(document).ready(function($) {
$('form.cart, form.woocommerce-cart-form').on('click', '.minus', function(e) {
var qty = $(this).parent().find('input.qty');
var val = parseInt(qty.val());
var step = qty.attr('step');
var min = qty.attr('min');
if ( 'undefined' !== typeof(min) || val > min) {
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
if (val > 0) {
qty.val(val - step).change();
}
}
});
$('form.cart, form.woocommerce-cart-form').on('click', '.plus', function(e) {
var qty = $(this).parent().find('input.qty');
var val = parseInt(qty.val());
var step = qty.attr('step');
var max = qty.attr('max');
if ( 'undefined' !== typeof(max) || val < max ) {
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
qty.val(val + step).change();
}
});
});
jQuery(document.body).on('updated_cart_totals', function() {
jQuery(document).ready(function($) {
$('.woocommerce .quantity').on('click', '.minus', function(e) {
var qty = $(this).parent().find('input.qty');
var val = parseInt(qty.val());
var step = qty.attr('step');
var min = qty.attr('min');
if ( 'undefined' !== typeof(min) || val > min) {
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
if (val > 0) {
qty.val(val - step).change();
}
}
});
$('.woocommerce .quantity').on('click', '.plus', function(e) {
var qty = $(this).parent().find('input.qty');
var val = parseInt(qty.val());
var step = qty.attr('step');
var max = qty.attr('max');
if ( 'undefined' !== typeof(max) || val < max ) {
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
qty.val(val + step).change();
}
});
});
});
An alternative would be to do something like you did with ‘updated_cart_totals’ @nielslange and load the script after the AJAX. However, this seems to be the simplest solution.
