Add To Cart Button is Disabled until Variant is Selected

Store Design

Topic summary

Objective: Require an explicit size selection (variant) before enabling Add to Cart to prevent accidental orders caused by a default “Small” selection.

Desired behavior:

  • Button starts disabled with label “Select a size.”
  • After a size variant is chosen, label changes to “Add to Cart” and becomes clickable.

Context:

  • Reference implementation: Vuori product page; a screenshot was provided for illustration.
  • Theme: Prestige; site: thankgod.com.
  • “Variant” refers to product options like size.

Attempts:

  • Store owner tried coding the change but couldn’t complete it.

Responses:

  • A reply says the feature is complex and does not provide in-thread code or instructions, advising to hire a developer (service offered by the responder).

Outcome and status:

  • No technical solution, code, or theme setting shared; no alternative workaround suggested.
  • Discussion remains unresolved/ongoing. Next step implied: engage a developer to implement the requested behavior.
Summarized with AI on December 14. AI used: gpt-5.
1

We continually run into an issue where customers will place an order for a size “Small” Tee Shirt but oftentimes, it is an accident because our website is automatically designed so when someone goes to a specific product, “small” is automatically selected. I am trying to figure out how to make it so that on our website, the “add to cart” button is not available until a customer selects the size.

Vuori has this enabled on their website which I thought was super cool and sparked the idea, I’ll attach a photo for a visual. I want the Add to Cart button to initially say “Select a size” and then once they do, it will change to “Add to Cart”. This will probably need coding and I tried working through the code but wasn’t able to figure it out. I have the Prestige theme if that helps and our website is thankgod.com

Thanks for the help!

Screenshot 2024-11-12 at 10.59.54 AM.png
Screenshot 2024-11-12 at 10.59.54 AM.png1122×994 50.2 KB

2

Hello @thankgodusa ,

Great idea but complex one not possible to provide instructions or code to achieve it.

You need to hire a developer to achieve it.

If you want to implement it in your store you can contact me for services.
You can find the email in the signature below.

Thanks