Disable "Add to Cart" Button in Simple Theme

Highlighted
New Member
2 0 0

My store is using the Simple theme.

 

I want to add a checkbox to my product page, so that users  can only add a product to their cart if the check box is checked (it reads: "I have read the terms").

I tried applying the code found in other answers that essentially inserts a disabled attribute to the button tag.

However, when I load the page the cart button is still functional. 

 

I tried removing all my javascript logic and just hard-coding the disabled attribute:

 

 

 

<button type="submit" name="add" id="AddToCart" disabled="disabled" class="btn product-single__cart-submit{% if section.settings.add_to_cart_width == 'full_width' %} btn--full{% endif %}{% if section.settings.enable_payment_button %} shopify-payment-btn btn--secondary{% endif %}" data-cart-url="{{ routes.cart_url }}">
    <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>

 

 

 

... but the button is still functional (I tried both: disabled and: disabled = "disabled").

Furthermore, if I inspect the add-to-cart button element "at runtime", in my browser, the disabled attribute is nowhere to be seen. Perhaps some javascript that is part of the Simple theme removes my attribute when the page is loaded?

Howe can I disable the "Add to Cart" button in the Simple theme?

0 Likes
Highlighted
Shopify Expert
893 72 209

If you share the url we can check it out.

One quick thing to check, make sure you're previewing the theme you're working on, rather than refreshing the page on the live site. If your html isn't showing up my best guess is it's either you're not previewing the theme you edited, or you're editing code on the wrong element.

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (first performance analysis tool specifically for Shopify sites).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
Highlighted
New Member
2 0 0

Thank you for the tips. Actually, any other changes I make do get reflected once I save the template and reload the procuct page on my browser, so I think am making/checking my changes in the right place.

Also, I found a workaround: If I change the id of the button element from the default "AddToCart" to (say) "AddToCart1" (and modify my script accordingly), then it works.

But this has a side effect: since the out-of-the-box Shopify code can no longer find the button by its new id, when I tap the button and add the product to the cart, instead of the button changing its title/functionality to "View Cart Contents", the cart page is loaded right away (I am okay with this, by the way. The cart has a "continue shopping" button so the user can go back).  

This is a link to one such product page where the workaround is applied: https://shop.rq90s.com/collections/チケット/products/11-29-名古屋撮影会-第1部-第5部-のコピー

By inspecting the source, you can check that the Add to Cart button has an HTML id of "AddToCart1".

0 Likes