Need help removing box shadow in Woocommerce shop page

Support
#1

Hi. I would like to remove the border (shadow?) around the individual products in WooCommerce.

I’ve tried the suggestion from this post:

I’ve tried adding !important after the code, I’ve tried using it in both my child theme and Theme Options CSS, I’ve emptied cache, just in case, but nothing seems to work.

Can you tell me exactly the code I would need? Included is a screenshot of the offending box.

Thank you!

#2

Hi there,

Please try this code in the Global CSS:

.woocommerce div.product .images .x-img-thumbnail {
    padding: 0;
    border: 0;
}

Hope this helps.

#3

Yes! That’s it. That worked perfectly. Thank you! :slight_smile:

#4

By the way, how do you get rid of it for the images of the related products below?

#5

Hello @creatorofstuff,

Thanks for asking. :slight_smile:

You can use following CSS under X > Theme Options > CSS:

.woocommerce li.product {
    border: 0 !important;
    box-shadow: none !important;
}

I used Google Chrome Dev tools to find out the correct selector. If you would like to get started with Chrome dev tools, please take a look at following resources:

If you would like to learn CSS, please watch following YouTube video.

Thanks.

#6

Thank you very much for your suggestion(s) but the code did not work. (I actually do know a little about how to use the Chrome Dev tools, but still couldn’t figure it out.) The “related products” below still have the box shadow around them. :frowning:

#7

Hi there,

Please update the code I have previously provided to this:

.woocommerce div.product .images .x-img-thumbnail, 
.woocommerce li.product .entry-featured {
    border: 0;
    padding: 0;
}

Hope this helps.

#8

Thanks! That’s perfect. :hugs:

#9

You are most welcome. :slight_smile:

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.