Adding additional customization product when adding product to cart

Technical Q&A
1

I have a customizable product, that has dynamic pricing based on how many letters they want to be printed on to the product (For example, listing includes 3 letters and it costs $10 per additional letter)

I don’t want to create variants for every option in order to keep track of inventory so I’ve added in a customizable field to collect the number of letters they want.

When clicking add to cart, Is there a way to automatically also add another product I created called “Additional Letters” with a quantity dependent on what they choose?

1 Like
2

Hello @JREICHENSTEIN ,

Yes, it’s possible to add another product automatically.

Idea is, With the help of JS you have to count the letter in ‘customizable field’. And once customer leave the ‘customizable field’ and hit ‘add to cart’ , with JS check again is there ‘customizable field’ count available is yes with ajax us ‘customizable field’ count as quantity plus pass target product ID to cart.
Maybe little hard to understand but it’s possible.

Thanks

3

Thanks, Guleria!

I’m actually okay with just having the user choose from a drop-down the number of letters they need (and they’ll leave the exact message in the notes) so I don’t need the JS to count the number of letters but can’t exactly figure out the adding another product to the cart at the same time. Can this be done by injecting code into the form code on the product page or does it have to be on the cart page and checking if the item is in the cart and if it is, automatically adding the extra customization product?

4

Concept will remains same on click of ‘add to cart’ pass hidden ID in ajax and add it to cart.

e.g.

/* Custom Code */
    var quant = 1;  
    var ID =  'product-ID';;
    jQuery.ajax({
       type: 'POST',
       url: '/cart/add.js', 
       data: { 
         quantity: 1, 
         id: ID
       }, 
       dataType: 'json',
       success: function(res) {
		// do what you want
       }
     });
    }
/* Ends here */
1 Like