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)
.
