How to remove Add To Cart in collection pages

Shopify Discussion
,
1

Hi!We are a service based website so customers are required to view the product to be able to select their schedules. I am trying to find a way to remove this quick add to cart button that pops up when customers hover on products on our collection pages so that they are forced to click on the product.

Screen Shot 2023-03-14 at 7.31.45 PM.png
Screen Shot 2023-03-14 at 7.31.45 PM.png1192×636 446 KB

All past answers i found here from a few months/years back dont seem to work anymore so looking to find if there is an update. Thank you!

2

Hi @sleepybbgirrl ,

what’s the store’s URL? Thanks!

3

Hello @sleepybbgirrl ,

It’s the GemPages Support Team and we are glad to assist you today!

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

4

Hi, its coachpotato.site :slightly_smiling_face: thanks!

5

Hello @sleepybbgirrl ,

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1678866276653.png
GemPages_0-1678866276653.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

Let us know how it works for you.

Best regards,
GemPages Support Team

6

Hi @sleepybbgirrl

Please follow these steps:

  • Step 1: At Shopify Admin, Select Online Store → Theme → Edit Code
  • Step 2: Find the file appointedly-main.js, press Ctrl + F and paste this line at the end of the file. Then, you save your code.
if(window.location.pathname.includes("/collections")) {
   document.querySelectorAll(".card-action:has(#product-add-to-cart)").forEach(item => item.remove())
}

A note that in step 2, if you can’t find the file appointedly-main.js, you can replace it with theme.js or global.js file.
If it doesn’t still work, please share your store access with us, and we will support you.