Box shadow in main product image

[ArtK]

Dear Harry,

I wanted to add a box-shadow in main product image in product page and quick-view as you can see in staging (Link in private below)

To achieve this I added custom css:

.slick-list {
box-shadow: 11px 12px 12px 2px grey;

}

However this class is shared by other elements and hence related product and other product display area got a box-shadow which I do not want. (See screenshot in private below)

Since, I could not find a unique selector to call the div to add my custom class, I found a way by editing template files :

.productshadow{
box-shadow: 11px 12px 12px 2px grey; /*my custom class for box-shadow*/

}

a. product-image.php line 33 where I added my custom class .productshadow to $classes
b. content-quickview-product.php where I added my custom class .productshadow in line 18 <div class=”p-thumb images jas-carousel .productshadow”….

1. Is there any pure CSS way by which I can achieve the same effect without the need to edit template file?

The issue is the classes are shared and I could not find a unique class and hence added my own in template files 😉

Thanks a lot Harry. I put my codes public to help your other users implement the solution. The codes are working perfectly.

Founder, Artk (Learning a bit of coding)

[ArtK]

This reply has been marked as private.

[Harry]

Hi ArtK,

Please change code to

.p-thumb .slick-list {
	box-shadow: 11px 12px 12px 2px grey;
}

You only need add unique parent element class to make it and don’t affect to other element https://monosnap.com/file/j9cTPTCoYLJkeijVIdnNpwmOllKC9S#

Best regards and have nice weekend!

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ArtK]

This reply has been marked as private.

[Harry]

Thank for your kind words.

I wish your business grow up faster and I can visit Europe in soon time :))

Have a nice weekend!

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts