Archived topic

Woocommerce Add to Car & Price CSS

3 replies · Started by melvin on November 13, 2020

Viewing posts 1–4 of 4

November 13, 2020 at 12:42 am #1529375

Hi Dear,

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

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

November 13, 2020 at 7:58 am #1530065

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.

November 13, 2020 at 8:08 am #1530080

Hi David,

It works well. Thanks.

I appreciate it very much.

Regards,
Melvin

November 13, 2020 at 8:10 am #1530087

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.