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

Jaspers
Explorer
52 0 19

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)

DelightCart
Shopify Partner
1238 82 157

@Jaspers 

 


May this help you. Click here.

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

Delight Cart - It's time to turn your visitors into loyal shoppers! 

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

@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 19

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

www.JaspersPlus.com
Sajeel
Shopify Partner
272 31 26

share your theme.css file

 

Jaspers
Explorer
52 0 19

attached 👇                            

www.JaspersPlus.com
Mr_RaviRaj
Shopify Partner
505 57 108

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

 

banned
Jaspers
Explorer
52 0 19

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 19

Ahh that didn't work  thanks for your trying!

www.JaspersPlus.com
Sajeel
Shopify Partner
272 31 26

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

 

Jaspers
Explorer
52 0 19

https://1h0ad17vciwqe3kn-56735367320.shopifypreview.com Here is a link to the website.

www.JaspersPlus.com
Sajeel
Shopify Partner
272 31 26

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