[Resolved] Woocommerce Add to Car & Price CSS

Home Forums Support [Resolved] Woocommerce Add to Car & Price CSS

Home Forums Support Woocommerce Add to Car & Price CSS

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1529375
    melvin wang

    Hi Dear,

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

    View post on imgur.com

    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

    #1530065
    David
    Staff
    Customer Support

    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.

    #1530080
    melvin wang

    Hi David,

    It works well. Thanks.

    I appreciate it very much.

    Regards,
    Melvin

    #1530087
    David
    Staff
    Customer Support

    Glad to be of help

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.