How to change position of buy button on products from collection page

Store Design
,
1

Hello

I am looking to change the position of the buy now button on my products. I already have a hover effect on it and wish for the button to be in the middle of the product image so when you hover over the product the buy button appears in the middle of the products image.

CAVinhus_0-1750667353429.png
CAVinhus_0-1750667353429.png1384×888 126 KB

The code I used for the hover effect is:

.product-card-wrapper .quick-add {
display: none; /* Hide button initially /
}
.product-card-wrapper:hover .quick-add {
display: block; / Show button on hover /
}
.product-card {
/ Other styles /
text-align: center; / Centers the button */
}

2

Hi @CAVinhus

Could you share the link to your page?

3

https://cavinhus.dk/

pass: auskay

4

Please update this code from this

.product-card-wrapper:hover .quick-add {
display: block; /* Show button on hover */

To this

.product-card-wrapper:hover .quick-add {
    display: block;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 100%;
}
5

Thank you so much this worked! Do you also know how I changed the text on the button?

6

You can change text from your store admin > Sales channels > Online Store > Themes > click “…” in Current theme > Edit default theme content, search and change that text.