Change " add to cart" button text for only ONE product

Highlighted
New Member
11 0 0

Hello

 

 how do I change the text of "add to cart" button for ONLY ONE PRODUCT please??

 

thank you very much!

 

Anissa

0 Likes
Highlighted
Shopify Partner
1 0 1

Hi Anissa,

I had this same problem for a person I do creative work for! Simplest Solution: CSS! Yay - clean, simple, and universal! Go to the product page description and open the code tab - this way it only loads on the specific product page. This is my blackhole text trick! Shrink the "add to cart" font size on that page only to 0% and then add an :after tag (escaping the blackhole) "Content" text with a good font size (mobile/desktop friendly). This way, the font is technically there, but is invisible (not like a display none css tag = non-existentent). 

This code should work for you, as it seems pretty universal to shopify:

<style><!--

.add_to_cart span.text:After {
    content: "Subscribe Now";
    font-size: 18px !important;
}
.add_to_cart span.text {
    font-size: 0%;}

--></style>

See what I did there? I hid the original font to 0 (nothing). Then added in, :after, the text "Subscribe Now". You can change that text to what ever you want the cart button to say. Now you can change the "Add to Cart" button without changin the themes code much easier. If you wanted to change all products to that: Simply add that code to the styles.scss.liquid file - and you're done.

1 Like
Highlighted
New Member
2 0 0

The CSS method doesn't work on some themes. Fortunately it's just as easy to do it the Shopify-approved way: Make a new product template, then change the button text there.  Look for some code like this:

<script>
  // Override default values of theme.strings for each template.
  // Alternate product templates can change values of
  // add to cart button, sold out, and unavailable states here.
  window.productStrings = {
    addToCart: "Add to cart",
    soldOut: "Sold out"
  }
</script>


Select the new template when editing your product and you're good to go. There is one catch, however. If you're using more than one language, your alternate button text might not be available to translate in your translation app when using this method.

0 Likes