[Resolved] Woocommerce Add to Car & Price CSS

[melvin]

Hi Dear,

My objective : I would like to have the same effect as below to the plugin display [WCPS]

https://imgur.com/a/t0dgpMt

I am able to achieve that [using normal woocommerce not plugin] with the below code

 .woocommerce ul.products li.product a.button {
        transform: translateY(0);
        width: 100%;
        opacity: 0;
        transition: all 0.4s;
    }

    .woocommerce ul.products li.product:hover a.button,
    .woocommerce ul.products li.product:hover .price {
        transform: translateY(calc(-100% - 10px));
        opacity: 1;
    }

    .woocommerce ul.products li.product .price {
        opacity: 1;
        transition: all 0.4s;
    }

    .woocommerce ul.products li.product:hover .price {
        opacity: 0;
        transform: translateY(calc(-100% - 10px));
    }

I would like to have the same effect on this area with the plugin used. I’ve tested with a amendment but failed to achieve that.

Could you assist me to let me know the correct CSS I shall use?

Thank you.

Regards,
Melvin

[David]

Try this CSS instead:

/* Style WCPS button */
.wcps-container .owl-item .wcps-items-cart a {
    width: 90%;
    display: block;
    text-align: center;
    padding: 5px;
    margin: 20px auto 0;
}

@media(min-width: 769px) {
    .woocommerce ul.products li.product a.button,
    .wcps-container .owl-item .wcps-items-cart {
        transform: translateY(0);
        width: 100%;
        opacity: 0;
        transition: all 0.4s;
    }

    .woocommerce ul.products li.product:hover a.button,
    .woocommerce ul.products li.product:hover .price,
    .wcps-container .owl-item:hover .wcps-items-cart,
    .wcps-container .owl-item:hover .wcps-items-price {
        transform: translateY(calc(-100% - 10px));
        opacity: 1;
    }

    .woocommerce ul.products li.product .price,
    .wcps-container .owl-item .wcps-items-price {
        opacity: 1;
        transition: all 0.4s;
    }

    .woocommerce ul.products li.product:hover .price,
    .wcps-container .owl-item:hover .wcps-items-price {
        opacity: 0;
        transform: translateY(calc(-100% - 10px));
    }
}

Note – i have added the hover effect inside an @media query so it only applies to larger devices. You don’t want the affect on mobile as it doesn’t have a hover state and may lead to your buttons never being displayed.

[melvin]

Hi David,

It works well. Thanks.

I appreciate it very much.

Regards,
Melvin

[David]

Glad to be of help

[Author]

Posts