Archived topic

Woocommerce Shop page Add to Cart button hover

1 reply · Started by Tiffany on July 11, 2019

Viewing posts 1–2 of 2

July 11, 2019 at 8:42 am #955060

Hello,

I'm trying to achieve the hover effects used in the Merch site for adding product to cart on the shop page.

I could work out how to do this by accessing the css files, but the issue is I have an existing site, don't want to override my customizer settings, and therefore can't import Merch from the site library.

Is there a way to access the site files, or could you please instruct me how to accomplish what I'd like to do, please?

Many thanks :)

July 11, 2019 at 8:48 am #955067

Hi there,

Merch uses this CSS to create that button hover effect:

.woocommerce ul.products li.product {
    overflow: hidden;
}

.woocommerce ul.products li.product:hover .button {
    -webkit-transform: translatey(0) !important;
    transform: translatey(0) !important;
}

.woocommerce ul.products li.product .button {
    font-size: 12px;
    line-height: 15px;
    padding: 8px 12px;
    min-height: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .woocommerce ul.products li.product .button {
        position: absolute;
        top: 0;
        -webkit-transform: translatey(-150%);
        transform: translatey(-150%);
        -webkit-transition: 0.35s;
        transition: 0.35s;
        margin-top: 10px;
        margin-left: 10px !important;
    }
}

It may need some tweaking to work on your site. If thats the case share a link to the site so i can assist. You can edit your original topic and use the Site URL field to share the link privately.

This archived topic is closed to new replies.

Start building better websites today.