Replace Add To Cart button with another button based on product tag

Store Design
1

I need to achieve the following when a product is tagged with a particular word:

  1. Remove the Add To Cart, Shop Pay and other payment buttons
  2. Replace them with another single button that will lead to a new page

In other words, this is for products that cannot be purchased online and the visitor needs to contact the store to make an appointment.

I think, and please correct me if I’m wrong, we’d need a new product page that was customised and applied to the products in question? However, I don’t know how to remove the buttons and replace them with a single new button.

We are using the Capital theme.

2

@csne1 there are 2 options

1] create a completely new template for these products for whom you want other button and not ad to cart button, you can remove add to cart button code and add your button code

or

2] add tag to these products and then using coding we can check if a product has this particular tag and if yes then we can code it in a way that it will show this new button and not add to cart

3

The best way to minimise code interference is to make a separate template, so you will have full control over the content for these products, you will need to hide the buy buttons, add a block (custom liquid) if there is no block with a button and paste the button code snippet that you have on your site with the appropriate link.

Another option: make changes to the theme, namely to the block with buttons, making a check, if the product has the necessary tag, then display the button with a link if there is no tag, then display regular buttons.
{% if product.tags contains ‘U TAG’ %}
NEXT link
{% else %}
… default code
{% endif %}

4

I have opted for the separate product template and removed the buttons from it, replacing them with a new button that directs the visitor to another page.

However, I do like the conditional tag code idea.

I’m wondering if there is way of forcing any correctly tagged product to use the new product template rather than the standard product template. If not, it’s not a huge task to ensure those products are assigned the new product template upon creation (in fact it could be argued it is quicker to do that than tag it).

5

Hey! @csne1 ,

Yes, you’re right—you can achieve this by creating a custom product template in the Capital theme and applying it to products tagged with a specific word (like appointment). In that template, use Liquid to check for the tag and conditionally hide the Add to Cart and payment buttons, replacing them with a custom button linking to your appointment page. For example: {% if product.tags contains 'appointment' %} to hide default buttons and show your custom one. This way, only tagged products will display the alternative button, and others will function normally.

6

If I’m not mistaken, you can make a flow that will automatically change the template when creating a product.