Product color question

[Bakana Media]

Hello,

I would like to differentiate each product by a different colour.
To do this I have modified the CSS but it changes the colour of all my titles.

How can I assign a colour to each article title like on the screenshot ?

Thank you in advance

[Supporter]

Hi,

Each product will have a product ID attached to the class in the tag li.
You can combine this product class id to style your own color for each product

View demo at: https://prnt.sc/1dz6iou

li.product.type-product.post-317 h2.woocommerce-loop-product__title a {
    color: #92920f;
}

• This reply was modified 3 years, 8 months ago by Supporter.
• This reply was modified 3 years, 8 months ago by Supporter.

[Bakana Media]

Hello again,

Perfect, I managed to change the colour of your title, thanks.

Is it possible to change the colour of the price and also the frame when you move the mouse over it?

[Supporter]

– Change color boder hover:

li.product .product-block-list-elementor:hover {
    border-color: #your-color !important;
}

– With Price:

li.product .product-block-list-elementor .price ins {
    color: #your-color !important;
}

if you want to style for each product, you can use
li.post-317.product

[Bakana Media]

Hello,

Incredible, thank you very much

Is it also possible for the “add to cart” or “select options” button?

I just changed the CSS for the price because it doesn’t work:

li.post-4794.product .product-block-list-elementor .woocommerce-Price-amount.amount {
    color: #your-color !important;
}

[Supporter]

Hi,

#1. Price css: I checked with this css code and it works normally: https://prnt.sc/1ea9lur

#2. Add to cart button css:

li.post-4794.product .product-block-list-elementor a[class*=product_type_]:before{
   color: #your-color;
}

[Bakana Media]

Hi

Small problem when I move my mouse over it: screenshot

When I move my mouse over it, the icon should be white and the background my colour, is this possible?

Thank you again for your help.

[Supporter]

css code for button hover:

.product-block-list-elementor a[class*=product_type_]:hover, .product-block-list-elementor a[class*=product_type_]:focus, .product-block-list-elementor a[class*=product_type_]:active{
 background-color: #your-color !important;
}

[Bakana Media]

Hi,

Thank you for making this work

However now when I move the mouse over it I don’t get the trolley icon

https://i.ibb.co/3cwnTfv/capture.png

[Supporter]

The color of the cart icon is matching the background color on hover, so you have to change the color of the cart icon on hover.

[Bakana Media]

Hi,

What is the code I need to enter to change this? Because I can’t do it

[Supporter]

You can use css code:

li.post-4794.product .product-block-list-elementor a[class*=product_type_]:before:hover{
   color: #your-color !important;
}

• This reply was modified 3 years, 8 months ago by Supporter.

[Bakana Media]

This does not work

[Supporter]

Oh sorry, please edit this css into:

li.post-4794.product .product-block-list-elementor a[class*=product_type_]:hover::before{
   color: #your-color !important;
}

[Bakana Media]

Thank you

[Author]

Posts