FROM CACHE - en_header

How do I make add to cart / action buttons always visible on product grid ?

Jaspers
Explorer
52 0 14

Please help me I've been struggling so much! I need to disable the hover animation that reveals the add to cart button and just make them always visible like this... 

Jaspers_0-1653362437889.png

Thank you! 

 

etc;

www.JaspersPlus.com
Replies 11 (11)
DelightLoyalty
Shopify Partner
1064 90 135

@Jaspers 

 


May this help you. Click here.

Please don't hesitate to reach out.
Yours faithfully!

Delight Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.
Sajeel
Shopify Partner
272 31 25

@Jaspers  try by adding below code in theme.css file

.productitem--actions {
    visibility: visible !important;
    opacity: 1;
}

if this didn't worked then there will be a js code we need to change

Jaspers
Explorer
52 0 14

didnt work , not that easy keep in mind theres still a hover animation in the css

www.JaspersPlus.com
Sajeel
Shopify Partner
272 31 25
Jaspers
Explorer
52 0 14

Ahh that didn't work  thanks for your trying!

www.JaspersPlus.com
Sajeel
Shopify Partner
272 31 25

@Jaspers share your file so we can check the code and do modifications

 

Jaspers
Explorer
52 0 14

attached 👇                            

www.JaspersPlus.com
Mr_RaviRaj
Shopify Partner
505 57 99

@Jaspers 

 

.has-touch .productitem--actions {
    position: relative;
    bottom: auto;
    width: 100%;
    visibility: visible !important;
    opacity: 1;
    margin-left: 0;
}

 

Add this code in the theme.css file.

 

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: raviraj@zworthkey.com
,We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
Jaspers
Explorer
52 0 14

Thats already implemented in the CSS. There is some hover animation commands / if -than  codes that need to be changed

www.JaspersPlus.com
Jaspers
Explorer
52 0 14
Sajeel
Shopify Partner
272 31 25

@Jaspers copy the code from the attached file and paste it in theme.css