Replace “Add to cart” with “Enquire now” on collection product cards for certain products

Technical Q&A
1

Hi all,

I’m using the Palo Alto theme, and I’m adding a new brand to our site where the products are prescription only and cannot be purchased online unless the customer completes a consultation with a skin expert first.

What I’ve already done (works fine):

  • On the product page template for this brand, I removed the Buy Now / Add to Cart buttons and replaced them with a consultation/contact form. That part is working perfectly.

The issue:

  • On collection pages, the product cards will still show “Add to cart”.

  • I can’t allow that, since these items must be approved first and can’t bought on store like normal products.

What I need help with:
I need a way to customise the product cards on collection pages so that for these prescription-only products only:

  • “Add to cart” is removed/hidden on the product card

  • Replaced with an “Enquire now” button (or “Request consultation”)

  • Ideally the button links to the product page (or a dedicated consultation page)

What’s the best approach to swap the collection product-card CTA from “Add to cart” to “Enquire now” based on a vendor?

Thanks!

1 Like
2

Well you can hide the normal atc button and add a button tag with the text and required link. If based on vendor the link changes or anything you can use product metafields for that.

3

Hey @edenskin

Can you share the collection URL of your prescription only products so I can guide you and provide you an accurate solution?

Best,
Moeed

4

@Moeed The collection URL is https://edenskinstore.com/collections/zo-skin-health - For the moment, I just have a test product there. The issue I have is the Quick Buy icon. I need to remove these from ZO Skin Health products. These products would fall into other collections so I’m looking to do on those specific products rather than customising collection pages.

Thanks,

Ciarán

5

Hey @edenskin

Since you want the customization on the products so that can be done by tagging the products along with some custom coding in your product card file and for that I would require the collaborator access of your store because I’ll first need to have a look at the backend.

But if you want to hide the quick add only from this collection then,

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
{% if collection.handle == 'zo-skin-health' %}
<style>
.btn--quick {
    display: none !important;
}
</style>
{% endif %}

RESULT:

image
image1892×851 37.3 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed