Remove "Add to Cart" button on specific shop page + remove price on shop front page

Site URL: https://www.jonasstensgaard.com/free-craft-files-svgs-and-more/free-easter-egg-heart-cut-files

I'm on the York template.

Question 1:

On this product page https://www.jonasstensgaard.com/free-craft-files-svgs-and-more/free-easter-egg-heart-cut-files I'd ideally want to REPLACE the "Add to Cart" button with just a normal button for downloads but I can't find any code for that. Does it exist? Or would I need to buy a plugin?

As a workaround, I figured I'd just REMOVE the "Add to Cart" button entirely and add the download button in the Additional Info section but the code I found in another thread didn't do the trick. Let me explain. Here's the code:

<style>
.sqs-add-to-cart-button-wrapper {
 display: none !important;
}
</style>

I placed it in the Page Header Code Injection of the specific shop page where it's only freebies (https://www.jonasstensgaard.com/free-craft-files-svgs-and-more) and it worked - but only once I added the "!important" part. But the code also removed the "Add to Cart" button on all my other shop pages where I actually sell products and don't want to remove the button.

So my question is: How do I remove the "Add to Cart" button on ONE specific shop front page without affecting other shop front pages?

EDIT:

So I managed to remove the "Add to Cart" button on my freebie shop front page without it affecting other shops by adding a tag, in this case "freebie" to the free product. So it looks like this ".tag-freebie".

Full code:

<style>
.tag-freebie .sqs-add-to-cart-button-wrapper {
    display: none !important;
}
</style>

But I'd still be interested to know if there's a (free) way of replacing the "Add to Cart" button with just a simple download button instead of having to place it in the Additional Info section. But if there isn't a way, this works too.

Question 2:

Using this code from Ghostplugins (https://www.ghostplugins.com/steps/kqw603hn) I changed the price ONLY ON THE INDIVIDUAL item pages! But on the freebie front page (https://www.jonasstensgaard.com/free-craft-files-svgs-and-more), how do change it to say FREE instead of "$0.00". And if that's not possible, is there a way to remove the "$0.00" entirely?

Add to Home > Design > Custom CSS

body#collection-5e3a9ce33d8d7e063b050d42 span.sqs-money-native {
    visibility: hidden;
}
body#collection-5e3a9ce33d8d7e063b050d42 span.sqs-money-native:before {
    visibility: visible;
    content: "FREE";
}

Dude, you're awesome! Thank you so much! 😎

Thank you both!!!! This was so helpful

I had the same issue-
Wanted to remove the 'add to cart button' and as well as prices, including '$0.00' on certain products only (but not all of them)

I found that after tagging the specific products I didn't want to show as for sale (I'm using the tag 'archive' rather than 'freebie') this code worked perfectly:

<style>
.tag-archive .sqs-add-to-cart-button-wrapper {
    display: none !important;
}
</style>
<style>
.tag-archive .product-price {display: none !important;}
}
</style>