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

Store Design
1

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
Jaspers_0-1653362437889.png610×557 136 KB

Thank you!

etc;

2

@Jaspers_1

May this help you. Click here.

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

1 Like
3

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

1 Like
4

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

5

share your theme.css file

6

Ahh that didn’t work thanks for your trying!

7

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

8

attached :backhand_index_pointing_down:

1 Like
9

@Jaspers_1

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

1 Like
10

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

11

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

12

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