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

<!-- Override Add to Cart with Enquire link -->
<script>
(function() {
  function convertToEnquireButton() {
    // Target the add to cart button on product detail pages
    const addToCartBtn = document.querySelector('.sqs-add-to-cart-button');
    
    if (!addToCartBtn) return;
    
    // Mark as converted to avoid re-processing
    if (addToCartBtn.dataset.converted) return;
    addToCartBtn.dataset.converted = 'true';
    
    // Disable Squarespace's add to cart functionality
    addToCartBtn.classList.remove('sqs-add-to-cart-button');
    addToCartBtn.classList.add('sqs-add-to-cart-button-disabled');
    
    // Change the button text to "Enquire"
    const btnText = addToCartBtn.querySelector('.add-to-cart-text');
    if (btnText) {
      btnText.textContent = 'Enquire';
    }
    
    // Hide the "Added!" text
    const addedText = addToCartBtn.querySelector('.cart-added-text');
    if (addedText) {
      addedText.style.display = 'none';
    }
    
    // Hide the cart loader
    const loader = addToCartBtn.querySelector('.cart-loader');
    if (loader) {
      loader.style.display = 'none';
    }
    
    // Block all click events and redirect to contact (capture phase)
    addToCartBtn.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      window.location.href = '/contact';
      return false;
    }, true); // Use capture phase to intercept before Squarespace
    
    // Also add regular phase listener as backup
    addToCartBtn.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      window.location.href = '/contact';
      return false;
    }, false);
  }
  
  // Run on page load
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', convertToEnquireButton);
  } else {
    convertToEnquireButton();
  }
  
  // Run multiple times to catch dynamic initialization
  setTimeout(convertToEnquireButton, 100);
  setTimeout(convertToEnquireButton, 500);
})();
</script>
Dave Hawkins

As a top tier Squarespace Expert and founder of Made by Dave, I bring over 10 years of Squarespace experience and 600+ bespoke website launches. Our process combines consultancy, design, project management and development for a collaborative and efficient experience with clients like you. Whether you need a new website or updates for your existing site, we'll help you get up and running.

https://madebydave.org
Previous
Previous

Emma Stone Just Burned a Laptop Over a Domain Name. She's Not Wrong.

Next
Next

How to make Related Products a specific ratio - Squarespace 7.1