How to Retain Local Storage When Changing WooCommerce Payment Method?

When users switch payment methods on the WooCommerce checkout page, local storage data may reset, causing issues like lost cart data, saved inputs, or custom form entries. Here’s how to keep local storage intact when the payment method changes.

Why Local Storage Resets on Payment Method Change

WooCommerce dynamically updates the checkout page when a different payment method is selected. This refresh can clear or overwrite data stored in localStorage. To prevent this, we must preserve local storage before the update and restore it afterward.

Step-by-Step Guide

1. Store Data Before WooCommerce Refresh

Use JavaScript to save local storage data before WooCommerce refreshes the checkout.

jQuery(document).ready(function ($) {
    // Function to save local storage data
    function saveLocalStorageData() {
        sessionStorage.setItem('savedLocalStorage', JSON.stringify(localStorage));
    }

    // Detect WooCommerce update event and save data
    $(document.body).on('updated_checkout', function () {
        saveLocalStorageData();
    });
});

2. Restore Local Storage After Checkout Update

Once WooCommerce updates the checkout page, retrieve the stored local storage data.

jQuery(document).ready(function ($) {
    // Function to restore local storage data
    function restoreLocalStorageData() {
        let storedData = sessionStorage.getItem('savedLocalStorage');
        if (storedData) {
            let parsedData = JSON.parse(storedData);
            for (let key in parsedData) {
                localStorage.setItem(key, parsedData[key]);
            }
        }
    }

    // Restore after checkout update
    $(document.body).on('updated_checkout', function () {
        restoreLocalStorageData();
    });

    // Restore data when the page loads
    restoreLocalStorageData();
});

3. Preserve Data When Payment Method Changes

To ensure local storage is retained when switching payment methods, we can listen for changes.

jQuery(document).ready(function ($) {
    $('form.checkout').on('change', 'input[name="payment_method"]', function () {
        saveLocalStorageData();
    });
});

Final Checks

• ✔ Test checkout with different payment methods to ensure data persists.
• ✔ Check the browser’s localStorage using the console (F12 > Application > Local Storage).
• ✔ Clear WooCommerce cache if the script isn’t working properly.

FAQs

Will this method work with all WooCommerce payment gateways?

Yes, this approach works with all gateways since it monitors payment method changes globally.

What if my local storage data still disappears?

Ensure there are no other scripts overriding local storage. Also, check if your caching plugin is interfering with JavaScript execution.

Can I use sessionStorage instead of localStorage?

Yes, but sessionStorage only lasts for the session and clears when the user leaves the page.

By following these steps, you can ensure a seamless checkout experience while keeping essential data stored even when customers change payment methods.