How to hide the Add to Cart Button on Individual Products on a 7.0 Squarespace site without refreshing (Need code that works with AJAX)

I have scoured the internet looking for an answer to this and have come so close so many times.. I am looking for custom code to remove the Add to Cart button on individual products on my Squarespace site. I am looking to have different products on my shop page that just link to amazon affiliate pages, therefore I don't need an add to cart button on the product. It seems the simplest option is to hide the Add to Cart Button and just have a hyperlink in the description of the product for the purchase. But, ideally, I would love a button that just links to a custom URL. I am using a BRINE family template (Sonora) and my website is www.mindfulrelease.com

I have found many ways to do this, but none that are compatible with AJAX being on. I just want the button gone without having to refresh the page. Any help would be greatly appreciated! I tried the following AJAX compatible code, and it was very close, but I couldn't figure out how to apply the hiding of the button to just one product with the tag "hide-atc". I also want individual products to link to different URLs, so if I have to create different tags for those products, I'm happy doing that as well. I am pretty novice at this all, and having an old version of Squarespace definitely doesn't make researching this any easier.

<script>
  window.Squarespace.onInitialize(Y, function() {
    var parent = document.getElementsByClassName("sqs-add-to-cart-button-wrapper")[0];
    var oldBtn;
    var newBtn;

    oldBtn = document.getElementsByClassName("sqs-add-to-cart-button")[0];
    if (oldBtn) {
      oldBtn.style="display: none;"
    }

    if (parent) {
      newBtn = document.createElement("div");
      newBtn.className = "amazoncheckoutbuttonwrapper";
      newBtn.innerHTML = "<a class='amazoncheckoutbutton' target='_blank' href='https://www.amazon.com/Mistys-Tale-Leopold-J-Cimino/dp/1733605800/'>SHOP NOW</a>";
      parent.appendChild(newBtn);
    }
  });
</script>

I also added this:

window.Squarespace.onInitialize(Y, function() {
  var pid = document.querySelector('.ProductItem-details .sqs-add-to-cart-button');
  if (pid) {
    pid.classList.remove('sqs-editable-button');
  }
});

And I tried the variation of this, but it didn't work:

window.Squarespace.onInitialize(Y, function() {
  var pid = document.querySelector('.tag-hide-atc .ProductItem-details .sqs-add-to-cart-button');
  if (pid) {
    pid.classList.remove('sqs-editable-button');
  }
});

Hi,

Instead of using <script> code, you can use CSS code, it always work with Ajax

.hide-atc .sqs-add-to-cart-button-wrapper {
	display: none !important;
}

Code should be at Website > Website Tools (under Not Linked) > Custom CSS