Site logo

[Support request] Woocommerce product border and hover

Home Forums Support [Support request] Woocommerce product border and hover

Home Forums Support Woocommerce product border and hover

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1878071
    Atefan

    Hello, I wish I could get a border as given the link below on the products and a hover effect as the second link.

    Is this possible?

    Kind Regards

    #1878268
    David
    Staff
    Customer Support

    Hi there,

    do you have a link to your Shop site so i can see what CSS would be required?

    And likewise do you have any Content Boxes that are similar where you want to apply the hover effect ?

    #1878277
    Atefan

    Hi David, the link is below,
    Content boxed would be the product page, with the products.
    like here https://www.delightingideas.com/products-hover-efects/products-hover-no-shadow/

    Good Day!

    #1878519
    David
    Staff
    Customer Support

    Just to be clear, on your newwebsite shop page you would like the Border ( rounded corners ) and the fancy Shadow Hover effect ?

    #1878982
    Atefan

    Yes, this would be nice David.

    #1879548
    David
    Staff
    Customer Support

    Try this CSS:

    .woocommerce ul.products li.product {
        border-radius: 10px;
        overflow: hidden;
        padding: 10px;
    }
    .woocommerce ul.products li.product .button {
        border-radius: 5px;
    }
    
    .woocommerce ul.products li.product {
        box-shadow: 0px 10px 30px 0px rgba(0,0,0,0);
        transform: translate3d(0,0,0); 
        transition: all 0.2s ease-in;
    }
    .woocommerce ul.products li.product:hover {
        box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
        transform: translate3d(0,-5px,0); 
    }

    May look better with a lower column count 🙂

    #1879937
    Atefan

    WOW, This looks very nice!
    Thanks a million, David!

    #1880268
    David
    Staff
    Customer Support

    Glad to be of help!

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