How to add drop shadow and border to woocommerce product?

This topic has 4 replies, 2 voices, and was last updated 3 years, 5 months ago ago by Rose Tyler

  • Avatar: Usman Shahzad
    Dox
    Participant
    October 16, 2020 at 19:38

    How to add drop shadow and border to woocommerce product

    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 17, 2020 at 07:41

    Hi,

    Add the next code in Theme Options > Theme Custom CSS:

    .products-loop .content-product,
    .product-slide .content-product{
        box-shadow: 0 0 3px 1px rgba(0,0,0,.1);
        padding: 15px 15px 0px 15px;
    }

    Regards

    Avatar: Usman Shahzad
    Dox
    Participant
    October 17, 2020 at 17:48

    Dear, we have added the code and the code works like charm, but it causes another issue as the boxes of related products are not competed at the end.

    We are sharing you the snapshot that will helpful for you to determine the problem.

    https://ibb.co/BrkrRbp

    The second issue we are facing that product not showing any shadow. we are looking to achieve the same effect as shown in the below pic. Please take a look at it.

    https://ibb.co/6vfFpQw

    Thanks

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 18, 2020 at 07:42

    Hi,

    Change the previous code to:

    .products-loop .content-product, .product-slide .content-product {
        padding: 15px 15px 0 15px;
        border: 1px solid #e1e1e1;
        -webkit-box-shadow: 10px 10px 11px -4px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 11px -4px rgba(0,0,0,0.75);
        box-shadow: 10px 10px 11px -4px rgba(0,0,0,0.75);
    }
    .product-slide .content-product {
        margin-bottom: 15px;
    }

    Use this service to achieve the desired box-shadow – https://www.cssmatic.com/box-shadow

    Regards

  • Viewing 4 results - 1 through 4 (of 4 total)

The issue related to '‘How to add drop shadow and border to woocommerce product?’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.