[Ashley]

Hi, I need some help resolving an issue I have on my product gallery pages. I had an issue with corrupt database, so had to reinstall everything from scratch, piece by piece, I have nearly everything back but can’t now get my product galleries working as they were before.

I need a border or drop shadow on product gallery pages, some of my images are mainly pure white, as is my site background, so need something to show the edges.

I can live without the drop shadow, but could really use a border round the images.

Also on individual product pages the image used to be small and “fit the page” now it seems a set widtch, fine for landscape images, but portraits run off the screen.

It’s perfectly possible I’m an idiot and cannot find the settings somewhere, but please help 🙂

Theme: Clean Fotografie Pro
Website: https://www.urbanlakephotography.com
example of where border needed: https://urbanlakephotography.com/product-category/fine_art_photography/

[Skandha]

Hello there,
To have border and box shadow in the product image gallery
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.woocommerce ul.products li.product a img {
	border: 1px solid #000;
	box-shadow: 5px 5px #000
}

To adjust the image dimension on single pages
Go to => Appearance => Customize => Theme Options => Woocommerce => Product Images

Let me know if this helps you out!
Kind Regards,
Skandha

[Ashley]

Brilliant I have the drop shadow I wanted, thank you.

But there is nothing about product images in there, all I see is:

Since these options are added via theme support, you will need to save and refresh the customizer to view the full effect.
Check to disable Product Gallery Zoom
Check to disable Product Gallery Lightbox
Check to disable Product Gallery Slider

[Skandha]

Hello there,
My bad, I gave you the wrong path.

Go to => Appearance => Customize => WooCommerce => Product Images
Here you should be able to adjust the product image sizes.

Kind Regards,
Skandha

[Ashley]

That only appears to alter the width (but doesn’t seem to be working for me). Not to worry, all else ok.

Oh could you edit your replies to remove the @ stuff. Don’t really want my details all over the place 😉

[Skandha]

Hello there,
For that do resize the single product image size
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.woocommerce-product-gallery {
    width: 500px !important;
}

You can change the width according to your requirement.
Let me know if this works out!
Kind Regards,
Skandha

[Author]

Posts