Woocommerce product gallery Lightbox color change

Hi, @sibichan Did you use a plugin for lightbox or did you use the default one.

Can you provide the link to that so that we can see your problem and provide a solution accordingly?

Thank You

Using default one. See the screenshot here.

View post on imgur.com

Iam using oceanwp free theme.

@sibichan Sit link would be better to that page directly if that screenshot is front-end of the site.

Hope you will understand.

Site is not live. As you can see in the screenshot, a popup window with black background when we click on the zoom icon. I need that background to White or need to reduce black color opacity.

Hey @sibichan,

With regards to the lightbox background transparency you can change that by adjusting this CSS using the opacity which by default is set to 1.0. Use increments of 0.1 to adjust the transparency.

.pswp__bg {
    opacity: 0.5 !important
}

If you wanted to change the background to white you could use this CSS instead.

.pswp__bg {
    background-color: white;
}

Changing the zoom functionality would however require some more advanced development as by default when you hover over a product image it automatically zooms to the areas you’re hovering over. You’d need to try and change that functionality along with changing the like zoom icon to cover the entire product image.

THat may be possible with only some CSS but it may however also require some custom development using Javascript and CSS too.

@sibichan Okay I see

Then You can do one thing

div.pswp__bg{
 opacity : 0.2;
}

paste this code to WP Admin > Appearance > Customize > Additional CSS
it will reduce the opacity of the background.

Hopefully, that will work for opacity whereas for the magnifying images it is a topic of development.

Thank you

Its working.

Thanks @zworthkey12vaibhav @stuartduff

Glad to hear that the CSS codes were helpful!

If you have any other questions, I recommend creating a new thread.

Cheers!