Add custom color to single product background when hovering over product

[dhndigitalmarketing]

I suggest that in the future, in the ‘single product’ section, there should be an option to customize the background color of the product when zooming in. Currently, my image is a transparent png image with a black background, but when I hover to zoom in on the product, the default gray background appears, making the viewer feel disconnected.

In this case, I want the product background to be black to match the surrounding black background, so that when the customer hovers over it, it will feel like the product is zoomed in.

• This topic was modified 1 year, 7 months ago by dhndigitalmarketing.

Attachments:

You must be logged in to view attached files.

Hello,

Try to use the code below to make the same bg color for the zoomed image bg.

.single-product .woocommerce-product-gallery .zoomImg[src$=".png"] {
    background-color: #000000 ;
}

Define it in Theme Settings -> Custom CSS.

Kind Regards

[Author]

Posts