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

Technical Q&A
1

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.

1 Like
2

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

1 Like
3

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??

4

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

5

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..

6

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.

Screenshot 2022-03-08 180422.jpg
Screenshot 2022-03-08 180422.jpg3152×1367 360 KB

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;
}
7

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!

1 Like