Change button from 'Add to cart' to 'Contact us'

Tony22
Shopify Partner
46 0 0

In the course of this thread, I asked how to programmatically change an 'Add to Cart' button to a 'Contact us' one when a product (places on a printmaking course) is sold out (ie, course is full) but the question wasn't answered. Can anyone provide a hint or point me to where it might be answered?

Thanks,
Tony.

PS: if this is the wrong forum for asking coding advice, my apologies and please redirect me.

0 Likes
Andy_Lower
Shopify Partner
45 0 7

Hi Tony.

This may be of some help but I don't know much about your website. In the admin side, go to Online Store > Themes. Click the 3-dot menu button on your current theme and choose 'Edit HTML/CSS'.

On the left, open the sections folder and see if you have a 'product-template.liquid' file. In there, look for 'AddToCart'. you'll then find an element that looks something like this:

<button type="submit" name="add" id="AddToCart" class="btn">
    <span id="AddToCartText">Add to Cart</span>
</button>

Replace all the above with:

{% if product.available %}
​
    <button type="submit" name="add" id="AddToCart" class="btn">
        <span id="AddToCartText">Add to Cart</span>
    </button>

{% else %}

    <a href="http://www.leicesterprintworkshop.com/contact_us/" class="btn">
        Contact Us
    </a>

{% endif %}

Hope you're able to find it and that the above helps.

Kind regards, Andy Lower PandaCake Shopify Partners
0 Likes
Tony22
Shopify Partner
46 0 0

That's perfect, Andy (though we're not using sections apparently and the code was in the similar product.liquid template file). Many thanks.

I was confused about the code higher up cycling through the product.variants and thought I'd have to do the same to check availability. All working now. On to the next challenge, different templates for the courses and prints.

And thanks for taking the time to visit and find our contact page! :)

Cheers,
Tony.

0 Likes
seanq
New Member
3 0 0

Hi Andy, this has been exactly what I'm looking for, but how I would make it link to the contact page all the time, not only when the product is out of stock? Thank you, really appreciate it. 

0 Likes
ChrisBeattie
Excursionist
40 0 11

Hi,

That's simple... Back your code up first (always a good idea)

Replace this:

{% if product.available %}
​
    <button type="submit" name="add" id="AddToCart" class="btn">
        <span id="AddToCartText">Add to Cart</span>
    </button>

{% else %}

    <a href="http://www.leicesterprintworkshop.com/contact_us/" class="btn">
        Contact Us
    </a>

{% endif %}

 

With this:

<a href="http://www.leicesterprintworkshop.com/contact_us/" class="btn">
        Contact Us
    </a>

 

0 Likes