How to override the ‘Add to Cart’ buttons for specific links - Squarespace 7.1

This setup lets you turn specific product Add to Cart buttons into links that open external sites in a new tab.

1. Only chosen products are affected

2. Button styling stays exactly the same

3. Button text can be changed to “View Product” or something different

4. Works on product pages and store grids

What this does

For selected products, clicking Add to Cart will:

1. Open an external URL in a new tab

2. Skip the Squarespace cart

3. Keep all default button styles and layout

All other products continue to work normally.

---

Code to use

Add Code to Code Injection > Footer

<script>
(function () {
  // Product URL path → external URL (opens in a new tab)
  const redirects = {
    "/store/p/product-a": "https://www.amazon.co.uk",
    "/store/p/product-b": "https://www.google.com",
    "/store/p/product-c": "https://www.bbc.co.uk"
  };

  const BUTTON_TEXT = "View Product";

  function normPath(input) {
    try {
      const u = new URL(input, window.location.origin);
      return u.pathname.replace(/\/$/, "");
    } catch (e) {
      return (input || "").replace(/\/$/, "");
    }
  }

  function setButtonText(el, text) {
    if (!el) return;

    // Keep Squarespace structure intact, just swap label text
    const span =
      el.querySelector?.(".sqs-add-to-cart-button-inner span") ||
      el.querySelector?.("span");

    if (span) span.textContent = text;
  }

  function openNewTab(url) {
    const w = window.open(url, "_blank", "noopener,noreferrer");
    if (w) w.opener = null;
  }

  // --- PDP buttons (product detail page) ---
  function wirePdpButtons() {
    const path = normPath(window.location.pathname);
    const externalUrl = redirects[path];
    if (!externalUrl) return;

    const buttons = document.querySelectorAll(
      ".sqs-add-to-cart-button, .ProductItem-details-add-to-cart .sqs-add-to-cart-button, .ProductItem-addToCart .sqs-add-to-cart-button"
    );

    const productVariants = document.querySelector(".product-variants");
    function variantInStock() {
      if (!productVariants) return true;
      return productVariants.getAttribute("data-variant-in-stock") !== "false";
    }

    buttons.forEach((btn) => {
      if (btn.dataset.pcExternalBound === "1") return;
      btn.dataset.pcExternalBound = "1";

      setButtonText(btn, BUTTON_TEXT);

      btn.addEventListener(
        "click",
        function (e) {
          if (!variantInStock()) return;

          e.preventDefault();
          e.stopImmediatePropagation();

          setTimeout(function () {
            openNewTab(externalUrl);
          }, 200);
        },
        { capture: true }
      );
    });
  }

  // --- List/grid buttons (store pages / product lists) ---
  function wireListButtons() {
    const products = document.querySelectorAll(".product-list-item");

    products.forEach((product) => {
      const productLink = product.querySelector(".product-list-item-link");
      if (!productLink) return;

      const productPath = normPath(productLink.getAttribute("href"));
      const externalUrl = redirects[productPath];
      if (!externalUrl) return;

      // Target the actual Squarespace add-to-cart button inside the list item
      const btn = product.querySelector(".product-list-item-add-to-cart .sqs-add-to-cart-button");
      if (!btn) return;

      if (btn.dataset.pcExternalBound === "1") return;
      btn.dataset.pcExternalBound = "1";

      setButtonText(btn, BUTTON_TEXT);

      btn.addEventListener(
        "click",
        function (e) {
          e.preventDefault();
          e.stopImmediatePropagation();

          setTimeout(function () {
            openNewTab(externalUrl);
          }, 200);
        },
        { capture: true }
      );
    });
  }

  function init() {
    wirePdpButtons();
    wireListButtons();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }

  window.addEventListener("mercury:load", init);
})();
</script>