Solved

How Do I Rename Add To Cart Button when No Variant Is Selected To Not Say Unavailable

GraceCooke
Tourist
6 0 0

Hello All,

 

Currently I have a product in which I need no variants to be selected automatically because I cannot have the variant be the first picture. The problem with this is that the add to cart button now says "Unavailable" until selections are made. How do I change the text of the button? 

 

https://www.mypaperdolls.com/products/my-paper-dolls?variant=

 

Thank you!!

Grace

 

 

Accepted Solution (1)
theycallmemakka
Shopify Partner
1157 249 267

This is an accepted solution.

Hi @GraceCooke ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.button--add-to-cart[disabled="disabled"] span.text {    
    color: transparent;
    position: relative;
}
.button--add-to-cart[disabled="disabled"] span.text:after {
    content: "Add to cart";
    position: absolute;
    left: 0;
    color: #000;
}
.button--add-to-cart[disabled="disabled"]:hover span.text {    
    color: transparent;
    position: relative;
}
.button--add-to-cart[disabled="disabled"]:hover span.text:after {
    content: "Add to cart";
    position: absolute;
    left: 0;
    color: #fff;
}
</style>

Result:

theycallmemakka_0-1702442887370.png

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

 

 

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store

View solution in original post

Replies 6 (6)

theycallmemakka
Shopify Partner
1157 249 267

Hi @GraceCooke ,

 

What would you like the new text to be?

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store
GraceCooke
Tourist
6 0 0

Hello @theycallmemakka,

 

Thanks for helping... 
I would still like it to say "add to cart" (I know it will not work but that's perfectly fine)

theycallmemakka
Shopify Partner
1157 249 267

This is an accepted solution.

Hi @GraceCooke ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.button--add-to-cart[disabled="disabled"] span.text {    
    color: transparent;
    position: relative;
}
.button--add-to-cart[disabled="disabled"] span.text:after {
    content: "Add to cart";
    position: absolute;
    left: 0;
    color: #000;
}
.button--add-to-cart[disabled="disabled"]:hover span.text {    
    color: transparent;
    position: relative;
}
.button--add-to-cart[disabled="disabled"]:hover span.text:after {
    content: "Add to cart";
    position: absolute;
    left: 0;
    color: #fff;
}
</style>

Result:

theycallmemakka_0-1702442887370.png

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

 

 

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store
GraceCooke
Tourist
6 0 0

Thank you so much it worked!!!!! 

theycallmemakka
Shopify Partner
1157 249 267

Happy that it worked. Do accept the reply as a solution to mark this complete

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store

EasifyApps
Trailblazer
358 9 27

Hi @GraceCooke,

I recommend converting your current Collection options/ variants to custom options within the product option app. Currently, it appears you're utilizing Shopify variants and styling them as buttons through the app.

If you intend to manage inventory for each collection, consider creating a duplicate product with its variants. Afterward, delete the variants of the original product, hide the duplicated product on the storefront, and leverage the add-on product feature to link the variants with the custom Collection options of the main visible product.

While this method may seem intricate, an alternative option is to explore Easify Product Options app. We can assist you in setting it up, making the process smoother 😊.

Furthermore, during my review of your setup, I identified areas for improvement. After customers upload a photo, the layout appears broken. I suggest refining this aspect. Additionally, consider presenting a single file upload field allowing multiple uploads rather than multiple sections.

 

EasifyApps_0-1702448226920.png

Here's a suggested setup using the Easify Product Options app for your store:

  • Replace 2 file upload sections with a single file upload section enabling multi-file upload:

f1.png

f3.png

f2.png

  • Additionally, replace Collection options and variants with options within the app. This still allows you to change the product image when customers select an option:

f4.png

  • App Settings:

EasifyApps_1-1702449284012.png

EasifyApps_2-1702449296062.png

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support