Adding Dropshadow to WooCommerce Product Categories

[MPP_dshoales]

Good afternoon,

I was able to successfully add drop shadows to the product images in our WooCommerce storefront using the following code:

.woocommerce li.product .entry-featured,
.woocommerce-page li.product .entry-featured, 
.woocommerce div.product .images .x-img-thumbnail, 
.woocommerce-page div.product .images .x-img-thumbnail,
.woocommerce div.product .images .x-img-thumbnail:hover {
    border: none;
		margin: 0 9px 2.992em 0;
    box-shadow: 5px 5px 10px #d4cecb !important;
  	border-radius: 5px;
    padding: 10px;
}

However the client now wants the Product Categories to display in the storefront by default instead of the products, so now I need to have the above code affect the categories as well. The result should be that only the image of the category has the dropshadow and not the category name as well.

[friech]

Hi There,

Thank you for writing in, please update your custom CSS code to this:

.woocommerce .product-category.product img {
    border: none;
    margin: 0 9px 2.992em 0;
    box-shadow: 0px 5px 10px #4c4c4c;
    border-radius: 5px;
}

Feel free to adjust the values.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!