Shipping checkout button disabled? Apply the temporary theme fix

If the checkout button stays disabled after a customer selects Shipping in RP Local Delivery Date, this temporary fix can help restore checkout.

The fix applies only when Shipping is selected. Required date and location checks for Delivery and Pickup remain active.

Temporary workaround: Use this fix if Rose Perl Support has confirmed that your store is affected. Once Support confirms that the app update is deployed and working on your store, remove the temporary fix using the instructions below.

Before you begin

Make a backup of your live theme:

In Shopify admin, go to Online Store → Themes.
Find your live theme and open the … menu.
Select Duplicate.

You will need access to your theme’s code editor to complete the installation.

Step 1: Create the JavaScript asset

Go to Online Store → Themes.
Open the … menu for the theme you want to update, then select Edit code.
Under Assets, create a new JavaScript file named:
shipping-checkout-hotfix.js
Paste the following code into the file and select Save.

(function shippingCheckoutHotfix() {   if (window.__mwShippingCheckoutHotfixInstalled) return;   window.__mwShippingCheckoutHotfixInstalled = true;    const observedRoots = new WeakSet();   const retryDelays = [500, 1000, 2000, 4000];    function shippingIsSelected() {     return Array.from(document.querySelectorAll('mw-delivery-date')).some(       (widget) => {         const selectedTab = widget.shadowRoot?.querySelector(           '[role="tab"][aria-selected="true"]',         );         return selectedTab?.id === 'shipping';       },     );   }    function checkoutControls() {     const configured = window.mwDeliveryDateSelectors || {};     const selectors = (configured.checkout_button || [       '[name="checkout"]',       '[href="/checkout"]',       'form[action="/checkout"] input[type="submit"]',       '.checkout_button',       '.Button--modal_checkout',     ]).concat(configured.buy_it_now || []);      if (       typeof window.mwDeliveryDateFindAllByGroupNameSelectors === 'function'     ) {       return window.mwDeliveryDateFindAllByGroupNameSelectors(selectors);     }      return Array.from(document.querySelectorAll(selectors.join(',')));   }    function unlockShippingCheckout() {     if (!shippingIsSelected()) return;      window.mwDeliveryDateCheckoutReady = true;      checkoutControls().forEach((control) => {       if ('disabled' in control) control.disabled = false;       control.removeAttribute('disabled');       control.removeAttribute('aria-disabled');     });   }    function scheduleUnlock() {     retryDelays.forEach((delay) => {       window.setTimeout(unlockShippingCheckout, delay);     });   }    function observeWidgets() {     document.querySelectorAll('mw-delivery-date').forEach((widget) => {       const root = widget.shadowRoot;       if (!root || observedRoots.has(root)) return;        observedRoots.add(root);        root.addEventListener('click', (event) => {         const tab = event.composedPath().find(           (node) =>             node instanceof HTMLElement && node.getAttribute('role') === 'tab',         );          if (tab?.id === 'shipping') scheduleUnlock();       });        new MutationObserver(scheduleUnlock).observe(root, {         subtree: true,         attributes: true,         attributeFilter: ['aria-selected'],       });     });   }    const pageObserver = new MutationObserver(() => {     observeWidgets();     scheduleUnlock();   });    pageObserver.observe(document.documentElement, {     childList: true,     subtree: true,   });    let attempts = 0;    const startup = window.setInterval(() => {     observeWidgets();     scheduleUnlock();     attempts += 1;      if (attempts >= 60) window.clearInterval(startup);   }, 250); })();

Step 2: Add the script to your theme

In the code editor, open Layout → theme.liquid.
Find the closing </body> tag near the bottom of the file.
Paste this line immediately before </body>:

<script src="{{ 'shipping-checkout-hotfix.js' | asset_url }}" defer="defer"></script>

Select Save.

Add this line only once.

Step 3: Test your storefront

Open your storefront in a private or incognito window, add a product to the cart, and complete these checks:

Test	Expected result
Select Delivery without completing required selections.	Checkout remains blocked until the required selections are complete.
Select Pickup without completing required selections.	Checkout remains blocked until the required selections are complete.
Select Shipping.	Checkout becomes available after the tab finishes updating. Allow up to a few seconds.
Switch from Shipping → Pickup or Delivery → Shipping.	Required checks work for Pickup and Delivery, and checkout becomes available again for Shipping.
Change the cart quantity while Shipping is selected.	Shipping checkout remains usable after the cart refreshes.
Repeat the checks on desktop and mobile.	The behavior is consistent on both.

If you installed the fix on an unpublished theme, use that theme’s Preview to test it before publishing.

How the fix works

The script checks whether Shipping is the selected app tab before enabling checkout. It repeats the check briefly to allow the app to finish updating the cart and shipping fees.

It also watches for tab changes and cart updates that happen without reloading the page. A built-in guard prevents it from installing twice on the same page.

Remove the temporary fix after the app update

Once Rose Perl Support confirms that the permanent update is working on your store:

Open Layout → theme.liquid.
Remove the script line added in Step 2 and save.
Delete Assets → shipping-checkout-hotfix.js.
Open a new private or incognito window and repeat the testing checklist.

Need help?

Contact Rose Perl Support through the app’s live chat. Include your store URL, theme name, and which test failed so our team can review the behavior.