How we fixed a WooCommerce modal redirect issue on the checkout page

Overview

A client noticed that when users attempted to exit a “Ship From Manufacturer” (SFM) product flow during checkout, the “Exit SFM” link incorrectly redirected them to the Terms & Conditions page instead of displaying the intended confirmation modal. The Freshy development team investigated and corrected this issue by refining the WooCommerce cart template’s modal structure and implementing a script-based solution that preserved site performance and user experience.

Issue background

The issue was discovered during checkout testing for SFM products. While the SFM functionality worked correctly on the product detail page (PDP), the “Do Not Ship from Manufacturer” button failed to trigger any response during checkout. Instead, clicking the Exit SFM link redirected users away from the checkout flow to the Terms & Conditions page — creating confusion and potential cart abandonment.

The challenge stemmed from a misalignment between how the site’s WooCommerce theme and SFM custom scripts handled modal positioning within the checkout template.

Diagnosis

During debugging, Freshy’s developers identified several underlying causes:

  • The SFM modal logic was embedded directly within the WooCommerce cart template.
  • Because of this placement, the modal could not render correctly above the site’s global header.
  • When triggered at checkout, the modal’s JavaScript call was being overridden by a link in the theme’s T&C section.
  • Moving the modal markup outside the cart hierarchy caused layout and script timing issues.

To resolve the conflict, the team needed a solution that restructured how and when the modal loaded — without requiring a full template rebuild.

Resolution steps

After analyzing the checkout template and associated JavaScript functions, the Freshy team took the following approach:

  1. Reviewed modal hierarchy
    Determined that the modal needed to exist outside the cart template in the DOM to display correctly across all checkout pages.
  2. Script-based relocation fix
    Instead of restructuring core templates, the team wrote a lightweight JavaScript snippet that safely relocated the modal element to the appropriate position in the DOM after the page finished loading.
  3. Prevented page redirect conflicts
    Updated the event handler for the “Exit SFM” button to ensure it triggered the intended modal action rather than following the default hyperlink to the Terms & Conditions URL.
  4. Verified functionality across pages
    Conducted extensive QA to confirm that the modal:

    • Opened properly on both PDP and checkout views.
    • Allowed users to cancel or confirm without errors.
    • Preserved page load speed and accessibility compliance.
  5. Performance consideration
    The team avoided adding unnecessary on-load JavaScript dependencies to maintain optimal site performance. Since the fix affected only a small script block, it added no measurable delay to checkout rendering.

Final outcome

The fix successfully restored the intended behavior of the SFM modal across all pages. The “Exit SFM” button now properly opens the confirmation modal at checkout, allowing users to proceed or cancel without unwanted redirects.

Key improvements:

  • Checkout flow is now consistent and intuitive.
  • The modal displays correctly across product and checkout pages.
  • The change required no core WooCommerce template overrides.
  • Site performance remains unaffected.

The update improved the checkout experience and reduced the risk of customer confusion or abandoned transactions.

Key takeaways

  • WooCommerce modals embedded in theme templates can misfire if not structured properly in the DOM hierarchy.
  • Lightweight JavaScript relocation offers a clean solution for modal rendering issues without deep theme edits.
  • Always validate modal event handlers across all checkout states to prevent unexpected link redirects.
  • Optimizing for both functionality and performance ensures a smooth, reliable user experience.

If your WooCommerce store is experiencing modal or redirect issues during checkout, contact Freshy to learn how our developers can streamline your eCommerce user experience.