Changing color of image background

I’m trying to control the background color of the images. Please refer to the attachment.

Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

To change the background color of product grid items. You can use the below CSS code in your global custom CSS area under theme settings:

.product-grid-item .hover-img img{
background: grey;
}
.product-grid-item .product-element-top{
background: grey;
}

Result: https://jmp.sh/1IteKxU

Remember that the images must have transparent background like .png images. Otherwise the background color can’t be seen. Also I just used “grey” color just to set an example for you, you can use any other color of your choice.

Best Regards.

…thank you.

Using transparent .png works quite fine on the product grid pages
– https://bidnbuy.auction/product-category/electronics/headphones/

However, the solution is less effective when zooming on the single-product page. How exactly does the zoom feature work- is there a way to hide the underlying image when displaying the larger view?
– https://bidnbuy.auction/bnb-product/active-wireless-noise-cancelling-bluetooth-headphones-with-microphone-over-ear/

Thanks.

Most Welcome,

That zoom feature is a part of WooCommerce functionality. If you do not want that zoom feature inside single product page then you can select any other option for “Main image click action” from Theme settings >> Product Page >> IMAGES.

Also If you just want to change the background color of images in the single product page. You can try the below CSS code in theme settings >> custom CSS >> global custom CSS:

.image-action-zoom .owl-carousel .product-image-wrap {
background: grey;
}

Best Regards.

… the zooming feature provides a lot if usefulness to the user experience, however, the functionality could be improved. We’ll have to take it as is for now and work around any limitations internally.

Regards.

Hello,

Yes, the zoom in functionality might be improved.
But to improve the zoom in feature requires customization which is out of our scope.

Best Regards.

Hello,

Can you provide the info below to include into the general setting of the WP Image Zoom plugin which we are testing.

—
Owl Carousel container class: (If the images are in a Owl Carousel gallery, then type in here the class of the div containing the Owl Carousel gallery)

Thanks.

Hello,

You can get the info to include the WP Image Zoom plugin from the plugin URL:
https://wordpress.org/plugins/wp-image-zoooom/

Do you want to know the class name of that div which contains the products in carousel?

Best Regards.

…that’s correct, I would like to know the class name of that div which contains the products in carousel.

Regards

Hello,

The name of the class which contains the products in carousel is “woodmart-carousel-container”.

Screenshot for clarification: https://jmp.sh/NoWqfu5

Best Regards.

Thanks.

Most Welcome!!!..

Well, bidnbuy!.., it’s been great chatting with you! I hope I resolved your issues thoroughly.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts