I am building an eCommerce website using WooCommerce. On the product page, in addition to the specific product, I have optional addons with quantity buttons beneath them to add to the cart.
I am trying to get these items to add to the cart every time the quantity is changers (i.e when someone hits the plus sign, it automatically adds the corresponding item to the cart).
I have done this successfully (sort of) but for some reason, even if I call them by ID, value or any other specific field it adds all of them to the cart at once, ideally whichever item I hit the plus sign for is the only item I want added to the cart. Here is my code.
I am willing to give as much info as needed to get this done and will post an answer if I find one in the mean time. Thank you.
<script>
var timeout;
jQuery( function( $ ) {
$('.woocommerce').on('change', 'input.qty', function(){
if ( timeout !== undefined ) {
clearTimeout( timeout );
}
timeout = setTimeout(function() {
$("[name='update_cart']").trigger("click");
}, 500 );
timeout = setTimeout(function() {
$("[id='co2-alarm']").trigger("click");
}, 500 );
timeout = setTimeout(function() {
$("[id='motion-sensor']").trigger("click");
}, 500 );
timeout = setTimeout(function() {
$("[id='outdoor-camera']").trigger("click");
}, 500 );
timeout = setTimeout(function() {
$("[id='smoke-alarm']").trigger("click");
}, 500 );// 1 second delay, half a second (500) seems comfortable too
});
} );
</script>