How to add drop shadow and border to woocommerce product?

Solved3 replies2 participantsUpdated by Rose Tyler

  • Avatar: Usman Shahzad
    Dox
    Participant

    How to add drop shadow and border to woocommerce product

    #255393 Copied Theme version: 7.0.2 WooCommerce version: 4.6.0

    3 Answers

    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    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

    #255426 Copied
    Avatar: Usman Shahzad
    Dox
    Participant

    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

    #255512 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    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

    #255554 Copied

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