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');
}
});
