Taking boxes off of products

The “boxes” around the images are there because of CSS box-shadow.

This CSS rule might do it:

ul.products li a img.attachment-shop_catalog.wp-post-image {
box-shadow: none;
}

It ought to go in a child theme style sheet.

It’s a bit tricky because of all the classes on those elements. It may be that rule will deal with that page but not other pages. It depends how the classes are done. It doesn’t take it off the hover either. That will require a separate bit of CSS

.woocommerce ul.products li.product a:hover img, .woocommerce-page ul.products li.product a:hover img {
box-shadow: none;
}

That might deal with the hover effect

okay martcol, thank you. it somewhat helped. check it out, once you hover over it the boxes dissapear. but how do we get the boxes gone for good?

Did you add both rules above?

yes i did

OK delete the selector on that first rule and try it on this:

.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img