[Support request] Add to Cart on Hover over Product Thumbnail

Home Forums Support Add to Cart on Hover over Product Thumbnail

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1031642
    Devin

    Loving the theme so far. Can you tell me how I can disable the “Add to Cart” button/link that appears when you over over a product thumbnail as the product price is hidden? I’m trying to disable this feature on all pages and make it where the product Price will stay visible when you hover over a product thumbnail.

    Thanks,
    Devin

    #1031645
    David
    Staff
    Customer Support

    Hi there,

    the Site you imported uses some Additional CSS in the Customizer. These two parts are what changes the button to a link and creates the hover effect. Remove that code:

    .woocommerce ul.products li.product a.button {
        padding: 5px 0;
        color: inherit;
        background-color: #ffffff;
        text-transform: uppercase;
    }
    
    /* Transform add to cart and pricing on hover */
    @media (min-width: 768px) {
    
        .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));
        }
    }
    #1031653
    Devin

    Perfect, thank you so much! I appreciate the quick reply. It worked great.

    Devin

    #1031656
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.