WooCommerce自定义商品表单提交后无法加入购物车求助

在WooCommerce网站中，用户可在画布上自定义商品图片后将商品加入购物车。但实现AJAX上传图片并动态向表单追加含图片URL的隐藏输入字段后，表单提交时商品无法加入购物车。

相关代码片段 #

// Capture the "Add to Cart" button click event
document.addEventListener('click', function(e) {
    if (e.target && e.target.matches('.single_add_to_cart_button')) {
        console.log('Button clicked');  
        e.preventDefault();

        // On successful image upload, submit the form to add the product to the cart
        var cartForm = document.querySelector('.cart');
        console.log('Cart form:', cartForm);
        cartForm.insertAdjacentHTML('beforeend', `<input type="hidden" name="uploaded_image_url" value="http://google.com/image.png">`);
        cartForm.insertAdjacentHTML('beforeend', `<input type="hidden" name="preview_image_url" value="http://google.com/image2.png">`);                   
        cartForm.submit();
    }
});

已确认情况 #

• AJAX调用成功上传图片，服务器返回图片URL
• 隐藏输入字段已正确添加到表单（经DOM检查和控制台日志验证）
• 调用cartForm.submit()后页面刷新，但购物车为空
• 表单action URL正确指向商品页面，服务器端脚本已配置处理表单提交并添加商品到购物车
• 浏览器控制台及服务器日志均无报错
• 环境为仅安装Divi主题和自定义插件的纯净WordPress环境

已尝试操作 #

• 成功搭建AJAX图片上传至服务器的功能
• 使用insertAdjacentHTML动态向表单追加图片URL
• 在AJAX调用成功并添加隐藏字段后，调用cartForm.submit()提交表单

结果对比 #

预期结果：点击"加入购物车"按钮后，图片上传至服务器，URL追加到表单，表单提交后自定义商品加入购物车，订单详情包含自定义图片URL。
实际结果：图片上传成功，隐藏字段正确添加，表单提交后页面刷新但购物车为空，服务器端AJAX调用正常，无报错信息。

恳请提供问题原因排查方向及解决建议。

内容的提问来源于stack exchange，提问作者DrewG