aliabid100

I’ve managed to create what seems to be a fix! This applies to FunnelKit and directly via the style 4 wcdp shortcode.

For style 4, I managed to turn the donate button into an ajax-compatible add to cart, along with “donate” turning into “processing” with a spinner shortly before the Funnelkit side cart pops up with the following code (placed under Elementor Pro’s “Custom Code” in the </body> – End location.

<style>
/* --------- REMOVE WooCommerce Default Spinner Globally --------- */
.woocommerce .button.loading::after {
    display: none !important;
}

/* --------- CLEAN MINIMAL SPINNER ONLY ON DONATE BUTTON --------- */
.wcdp-button.donate-loading {
    position: relative;
    opacity: 0.85;
    pointer-events: none;
    transition: 0.3s ease;
}

.wcdp-button.donate-loading::after {
    content: '';
    display: inline-block;
    margin-left: 10px; /* space after text */
    vertical-align: middle;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const donateForm = document.querySelector('#wcdp-get-send');
    const donateButton = donateForm.querySelector('.wcdp-button');

    if (donateForm) {
        donateForm.addEventListener('submit', function (e) {
            e.preventDefault(); // Prevent redirect

            // 1️⃣ Add unique loading class
            donateButton.classList.add('donate-loading');
            donateButton.disabled = true;
            const originalText = donateButton.innerHTML;
            donateButton.innerHTML = 'Processing...';

            const formData = new FormData(donateForm);

            // 2️⃣ Send AJAX to WooCommerce
            fetch(donateForm.action, {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(data => {
                // 3️⃣ Refresh cart fragments
                jQuery.post('/?wc-ajax=get_refreshed_fragments', {}, function (res) {
                    if (res && res.fragments) {
                        jQuery.each(res.fragments, function (key, value) {
                            jQuery(key).replaceWith(value);
                        });

                        // 4️⃣ Open FunnelKit side cart
                        jQuery('body').trigger('fkcart_open');
                    }

                    // 5️⃣ Remove loading spinner
                    donateButton.classList.remove('donate-loading');
                    donateButton.disabled = false;
                    donateButton.innerHTML = originalText;
                });
            })
            .catch(error => {
                alert('Error adding donation, please contact EMAIL HERE');
                donateButton.classList.remove('donate-loading');
                donateButton.disabled = false;
                donateButton.innerHTML = originalText;
            });
        });
    }
});
</script>

Placing the style 4 shortcode on a home page, for example, would then yield another issue where although the product is added to cart via ajax, FunnelKit interprets this home page as a checkout page and thus hides the sidecart icon itself (no trigger of sidecart despite the code above) as well as the menu cart icon. Luckily FunnelKit, via a snippet provided by xlplugins on GitHub, appears to have a way of forcing cart icons to show up on the checkout page (really the home page as well in this case) which also then resolves this issue along with the sidecart actually triggering. I haven’t noticed any issues with this patch thus far.