Jump to content

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

Go to solution Solved by Lesum,

Recommended Posts

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!image.thumb.png.f136c2817094eace46bee83201621353.png

Link to comment
  • Replies 11
  • Views 298
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

@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!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@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;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.