I want to have no price and no add to cart button on SPECIFIC products (not all of them) on my store!

For some of the originals in my shop, I want to have just the link to the contact page so buyers can negotiate a price for the artwork. I have looked through many forums and most of them just tell you to add CSS code that removes the price and "add to cart" function of all the items in the shop. I would like to just remove the price and "add to cart" for these certain products on the website! Please help!

I dont think there will be a way with the Squarespace settings, however you will be able to hide them for this page only using css. You can find the page id and add the code there. If you send me the URL of the page, I can create the css code for you to copy

Here are the pages:

https://www.domingoravenet.org/shop/p/form-no-1-ttwma-956kd-wpymp-8lgw7-wrplz-8eeej

https://www.domingoravenet.org/shop/p/form-no-1-ttwma-956kd-wpymp-8lgw7-wrplz

https://www.domingoravenet.org/shop/p/form-no-1-ttwma-956kd-wpymp-8lgw7

https://www.domingoravenet.org/shop/p/form-no-1-ttwma-956kd-wpymp

https://www.domingoravenet.org/shop/p/form-no-1-ttwma-956kd

Thank you so much!

@TLedo Add the following code under Website > Pages > Website Tools > Code Injection > Header to hide the product price and add to cart button, and add a new "Enquire" button linking to the Contact page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
// Create a new button div
var newbutton = $('<div class="enquire-button"><a href="/contact">Enquire</a></div>');
// Replace product ID here for each products  
var targetDiv = $('#item-667ec996c9c1d260d36e816c .sqs-add-to-cart-button-wrapper');
targetDiv.append(newbutton);
});
</script>

<style>
// Hide Product price and add to cart button  
#item-667ec996c9c1d260d36e816c .sqs-add-to-cart-button, #item-667ec996c9c1d260d36e816c .ProductItem-product-price {
  display: none !important;
}
  
.enquire-button a {
  font-family: var(--primary-button-font-font-family);
  font-style: var(--primary-button-font-font-style);
  font-weight: var(--primary-button-font-font-weight);
  letter-spacing: var(--primary-button-font-letter-spacing);
  text-transform: var(--primary-button-font-text-transform);
  padding: var(--primary-button-padding-y) var(--primary-button-padding-x);
  width: auto;
  max-width: 100%;
  min-height: 50px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--primaryButtonTextColor);
  background-color: var(--primaryButtonBackgroundColor);
  border: 1px solid var(--primaryButtonBackgroundColor);
  transition: .1s opacity linear;
}
.enquire-button:hover {
  opacity: 0.8;
}
</style>

The code is intended to work on this page: https://www.domingoravenet.org/shop/p/form-no-1-ttwma-956kd-wpymp-8lgw7-wrplz-8eeej

For the other product pages, copy and paste the script, replacing the Product ID. In the style section, copy and paste the first line of code followed by a comma, then replace the Product ID.

Let me know how it goes. Thank you!

Please see the following.

Let us know how it goes.

The Enquire button works perfectly! The price and "add to cart" are still there sadly.

@TLedo Can you remove this part of the code inside the <style> </style> section. 

#item-667ec996c9c1d260d36e816c .sqs-add-to-cart-button, #item-667ec996c9c1d260d36e816c .ProductItem-product-price {
  display: none !important;
}

And then add this code:

#item-667ec996c9c1d260d36e816c .pdp-details-price {
    display: none !important;
}
#item-667ec996c9c1d260d36e816c .sqs-add-to-cart-button {
   display: none !important;
}

Thank you! That worked for the "add to cart" button. Now it's only the price that still remains! 

@TLedo Please recheck the code you added again. Code should have removed the price.

This is the code that I typed in.

Thank you so much! That worked!