Change color CSS

[Lucas]

Hello, I would like to know how to modify the CSS code of the theme in order to be able to modify this element in photo : https://ibb.co/4W6sJjX

I know that I have to work on the child file, and that I have to duplicate the css file. But I can’t find the tag in the css file that corresponds to the framed place on the picture.

I would like all the products in the store to have a specific color in the background and that the writing of the product is white.

Can you tell me the lines and file indicating this change?

[Billy Nguyen]

Ok, please copy this css code to file style.css:

ul.products li.product .product-block, ul.products .wc-block-grid__product .product-block, .wc-block-grid__products li.product .product-block, .wc-block-grid__products .wc-block-grid__product .product-block{
background-color: #your-color !important;
}

ul.products li.product h2 a, ul.products li.product h3 a, ul.products li.product .woocommerce-loop-product__title a, ul.products li.product .wc-block-grid__product-title a, ul.products .wc-block-grid__product h2 a, ul.products .wc-block-grid__product h3 a, ul.products .wc-block-grid__product .woocommerce-loop-product__title a, ul.products .wc-block-grid__product .wc-block-grid__product-title a, .wc-block-grid__products li.product h2 a, .wc-block-grid__products li.product h3 a, .wc-block-grid__products li.product .woocommerce-loop-product__title a, .wc-block-grid__products li.product .wc-block-grid__product-title a, .wc-block-grid__products .wc-block-grid__product h2 a, .wc-block-grid__products .wc-block-grid__product h3 a, .wc-block-grid__products .wc-block-grid__product .woocommerce-loop-product__title a, .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title a{
color: #your-color !important;
}

[Lucas]

This reply has been marked as private.

[Billy Nguyen]

Hi,

#1. Please copy this css code to file style.css ( child-theme):

li.product .product-block:hover .content-product-imagin{
background-color: #your-color;
}

#2. Change color:

– Category:

ul.products li.product .posted-in a, ul.products .wc-block-grid__product .posted-in a, .wc-block-grid__products li.product .posted-in a, .wc-block-grid__products .wc-block-grid__product .posted-in a{
color: #your-color !important;
}

– the number of comments:

ul.products li.product .technocy-count-review, ul.products .wc-block-grid__product .technocy-count-review, .wc-block-grid__products li.product .technocy-count-review, .wc-block-grid__products .wc-block-grid__product .technocy-count-review{
color: #your-color !important;
}

– Price:

ul.products li.product .price, ul.products .wc-block-grid__product .price, .wc-block-grid__products li.product .price, .wc-block-grid__products .wc-block-grid__product .price{color: #your-color !important;}

[Lucas]

Perfect! There is just one small thing left to fix:
The change of color of the price in promotion as on the following screenshot:
https://ibb.co/MMWBS9d

And the “…” that also appear in the base color of the theme when the title is too big. (https://ibb.co/frgD8Rm)

[Billy Nguyen]

Hi,

#1. Price sale:

ul.products li.product .price del, ul.products .wc-block-grid__product .price del, .wc-block-grid__products li.product .price del, .wc-block-grid__products .wc-block-grid__product .price del{
color: #your-color !important;
}

#2. title:

ul.products li.product h3.woocommerce-loop-product__title{
color: #your-color !important;
}

[Lucas]

This reply has been marked as private.

[Billy Nguyen]

Ok,

ul.products li.product .price ins, ul.products .wc-block-grid__product .price ins, .wc-block-grid__products li.product .price ins, .wc-block-grid__products .wc-block-grid__product .price ins{
color: #your-color !important;
}

[Lucas]

This reply has been marked as private.

[Lucas]

This reply has been marked as private.

[Billy Nguyen]

Try to use css code:

ul.products li.product .product-caption-bottom, ul.products .wc-block-grid__product .product-caption-bottom, .wc-block-grid__products li.product .product-caption-bottom, .wc-block-grid__products .wc-block-grid__product .product-caption-bottom{
    background-color: #your-color !important;
}

[Author]

Posts