Return to previous page

How to add drop shadow and border to woocommerce product?

This topic has 4 replies, 2 voices, and was last updated 4 years, 7 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

    #255393 Copied Theme version: 7.0.2 WooCommerce version: 4.6.0
    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

    #255426 Copied
    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

    #255512 Copied
    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

    #255554 Copied
  • 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

Recent Community Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Beaty & Cosmetics – WordPress WooCommerce Theme
lazy-placeholder
Web Agency – WordPress WooCommerce Theme
lazy-placeholder
Pet Shop – WordPress WooCommerce Theme
lazy-placeholder
Restaurant – WordPress WooCommerce Theme
lazy-placeholder
Mango – Responsive eCommerce PSD Template
lazy-placeholder
Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Carwash – WordPress WooCommerce Theme
lazy-placeholder
Electron Store 01 – WordPress WooCommerce Theme
lazy-placeholder
Landing Watch – WordPress WooCommerce Theme
lazy-placeholder
Jewelry Store – WordPress WooCommerce Theme

See All Templates

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