grey background behind each product image

[adampreuss]

how can I get a background behind each product image like you have in Gecko demo organic store?

I tried this CSS, but didnt work:
.woocommerce #main {
background-color: #d6d8d7;
background-image: none;
}

[Harry]

Hi Adam,

Please add below code

.p-item.woocommerce-product-gallery__image {
background-color: #d6d8d7;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[adampreuss]

Hi Harry,

unfortunally it doesnt work.

[Harry]

Hi Adam,

With this product layout you should have about 3 product images and over. If your product have only one image we recommend use layout 1 or layout 3

and please try this css

.single-product-thumbnail.woocommerce-product-gallery {
background-color: #d6d8d7;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[adampreuss]

also tried this css code but still no change.

[adampreuss]

I just realized where the background gets grey: its on the details page of the product.

We need this in the product listing which is showed on main page and on shop main page as well

 

[Harry]

Hi Adam,

If you want add background color for product images, your images also are .png file and use below code

.products .product-image,
.single-product-thumbnail.woocommerce-product-gallery {
background-color: #d6d8d7;
}

or you have to manual add grey background by photoshop

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts