So I've created a product page that allows the user to enter a a width and height though text inputs, this then overlays a cropper.js tool onto the product image and allows the user to crop the product image to the right aspect ratio with a button. I then hide the product image and add the base64 encoded image to a ".results" div which replaces the product image with the cropped preview.
I now want to replace the product image with the cropped image when the user clicks "Add to cart" so that it propagates through the purchase process, showing as the thumbnail in the add to cart page and the order details.
I am using the "woocommerce_add_cart_item_data" to add some meta dat to the order and the "woocommerce_before_calculate_totals" to dynamically update the price, but I can't see how I can programmatically update the product image.
Any ideas?