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!

Hi @4vke,

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

Thanks.

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 2 years, 8 months ago by abwaita a11n. Reason: *added clarifications

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.