How do I change the background of a product?

Hi @4vke,

Sorry for the delay.

If you are trying to add a background color (same color) to each item from the shop, you can use the CSS code below:

li.product.type-product{
    background-color: #0AFEFF;
}

Change #0AFEFF to the color code you want to use.

I hope this helps!

@battouly hi and thx for answer! ??
This is almost what I need. But the ideal option would be as follows:
https://prnt.sc/1qgcxgl

Is it possible to make a separate color for the picture and a different color for the rest?

I will have transparent pictures of goods. And therefore, I want their background to be different from the general background of the product card.

Is it possible?

Hi @4vke,

For easier checks, is it possible to kindly share with us a link to your site?

Thanks.

@abwaita no problem:
https://spojler.ru/shop

but now only one img with transperent bg:
https://prnt.sc/1qh3von

this is my site for tests.

Thanks for sharing the link.

Try adding the following in your Customizer → Additional CSS box:

/*Change image background color*/
.woocommerce ul.products li.product a img {
    background: orange !important;
}

Edit: At this point, you only need the above code to change the background color of the image. You will want to couple it with the code shared earlier by @battouly.

*******
If you want to target the other elements in the product card separately, the following should do:

/*Change product title background color*/
h2.woocommerce-loop-product__title{
    background: purple;
}

/*Change rating background color*/
.star-rating{
    background: purple;
}

/*Change price background color*/
.price {
    background: purple;
}

Let us know how it goes.
Thanks.

• This reply was modified 3 years, 7 months ago by abwaita a11n. Reason: *added clarifications

@abwaita this is what you need! Thx ??

If it’s not difficult, could you tell me how to do the same, but with blocks?
The page on which the blocks are located:
https://spojler.ru/wc-blocks

Thanks for getting back @4vke.

For the blocks, try the following:

/*Change product card background color*/

li.wc-block-grid__product {
    background-color: purple;
}

/*Change image background color*/

.wc-block-grid__product-image {
    background-color: red !important;
}

Hope this helps.
Thanks.

@abwaita hello ??

In shop page – good!
https://prnt.sc/1qkdmor

but with blocks – problems…
I used this code:

/*Change product card background color*/

li.wc-block-grid__product {
    background-color: purple;
}

/*Change image background color*/

.wc-block-grid__product-image {
    background-color: red !important;
}

Results (all blocks purple):
https://prnt.sc/1qkdrir

shop page:
https://spojler.ru/shop/
page, where i used blocks:
https://spojler.ru/wc-blocks/

• This reply was modified 3 years, 7 months ago by 4vke.

Hey @4vke,

You can try this CSS:

li.wc-block-grid__product {
background-color: #0afeff;
}
.wc-block-grid__product {
border-left: 8px solid #fff !important;
border-right: 8px solid #fff !important;
border-bottom: 16px solid #fff !important;
}

and this is how the page https://spojler.ru/wc-blocks/ will look like:

Link to image: https://bit.ly/3Dlt4tH

For continued support with customizations we recommend hiring a web developer or one of the customization experts listed at https://woocommerce.com/customizations/.

Cheers!

Hi there,

It’s been a while since we last heard back from you. I’m going to mark this thread as resolved.

Hopefully, the above information helped you out! If you have further questions, please feel free to open a new topic.

Cheers.