I removed the "add to cart" button in one of my products, yet the product zoom doesn't work..

[siliancakery]

Hello, I need some help here.

I'm using the debut theme. I've followed the instruction in this video and removed the "add to cart" button in one of my products, as I want people to email/dm me before I take any of their money.

https://www.youtube.com/watch?v=L_PMguOiwmY

Yet afterwards, the zoom effect in my product page doesn't work properly anymore.

Moreover, there is a "Buy with ShopPay" button instead that I really want to remove it. Is there a way to fix the problems?

Here's the page:  https://siliancakery.ca/collections/rotating-menu/products/vinok-cake

Thanks so much. 

[made4Uo]

Hi @siliancakery ,

Deleting the code broke the script code. I would suggest not deleting it to instead just hide it. Revert back to your original code and add this to the theme.css file under the Asset folder.

.product-form__controls-group ~ .product-form__controls-group--submit {
    margin-top: 0 !important;
    visibility: hidden  !important;
    height: 0 !important;
}

If this helps, please select as a solution. Thank you

[siliancakery]

Hello Made4Uo

My goal is to hide the "add to cart" button in one specific product only. By adding the code above, I assume it'll hide the form in all products??

[made4Uo]

Hi @siliancakery 

That is true. But if you find this class " product-form__controls-group" in your product page and add "hide-buttons" next to it. Then add this code below in the theme.css. This should this should work.

.hide-buttons {

margin-top: 0 !important;
visibility: hidden !important;
height: 0 !important;
}

Let me know, if it works

[siliancakery]

Thanks Made4Uo. 

So 

.product-form__controls-group ~ .product-form__controls-group--submit { margin-top: 0 !important; visibility: hidden !important; height: 0 !important; }

at theme.css under Asset, and then 

.hide-buttons {

margin-top: 0 !important;
visibility: hidden !important;
height: 0 !important;
}

inside the class " product-form__controls-group" in my specific product page??? How to find such page under "edit code"?? Or do I go to the editing interface of that specific product? Sorry for my stupid questions. I'm not too familiar with these.. 

[made4Uo · Accepted solution]

Hi @siliancakery 

I assume you can open the product section that you created. Inside the file, pressed "Ctrl" and "F" to open the search bar, then look for "product-form__item ." Next to it add this "hide-buttons." Click SAVE. Please see image below for placement. 

Then in the theme.css file under the Asset folder, add the code below. 

.hide-buttons {
margin-top: 0 !important;
visibility: hidden !important;
height: 0 !important;
}

[siliancakery]

OMG! Now it works!!!! I have been struggling with the situation for a whole month now! Thank you so sooo sooo sooooo much for the detailed solution!