Change color for Product Title

Hi,

I have a template in Elementor with a black background and I would like to change the product’s title to white. It’s currently grey.

However, I only want to do this at the home page, not the rest of the pages where the products are shown. So I’m guessing I should put a CSS code into the custom CSS for elementor for that page. I tried one, but did not work.

This problem is for the widget PRODUCTS (grid or carousel), in the styles:
– icons and “add to cart”
– icons on hover
– quick
– show button on hover
– show summary on hover
– standard button

How can I achieve this?

Thanks.

Hello,

You can set the title individually for each page: image or color. https://xtemos.com/docs/woodmart/options-for-pages/

Please clarify your second problem.

Best Regards

Hi, sorry for the delay. What I want to change is what you can find on the URL in the private section. There I have a dark background and since the product names are in a light grey they can’t be seen well (in case this works fine I would change the pictures to remove the background).

I do not want to change global setting as this would be just for the home page, and not for the rest of the website where we would keep the white background and the grey would remain ok.

Hello,

Please add this code to the Page settings:

body .product-title, .product-grid-item .product-title,
body .product-grid-item .woodmart-product-cats a{
color:white!important
}

Best Regards

Hi!

1) This worked perfectly. However, I now need to change the hover effect which is still grey and need it to be white as well.

2) I also need for the product category widget for elementor in the default style for which I already changed the title color with the following code, but need to add a greay shadow to it. How can I do that?
body .category-grid-item .category-title,
body .product-grid-item .woodmart-product-cats a{
color:white!important
}

Regards.

Hello,

I am a bit confused, please provide the screen what you want to change #1 and #2

Best Regards

Hi, sorry for the delay. In the private are content area you will find the URL and a short video showing the problem. Only #1, forget about #2.

When I pass through the product title (which is now white per the code you had sent before), it turns color dark grey and it doesn’t look good as with the black background it’s not visible.

Also, a new problem I encountered is that if I add a product on this page (or add it elsewhere and come back to this page) the product title is not visible in the cart as it’s also white. Hence, the CSS code is changing the product title everywhere on that page, not just the products on the elementor canvas.

Hello,

Please replace the code with this one:

body .woodmart-products-element  .product-grid-item .product-title,
body .woodmart-products-element  .product-grid-item .product-title:hover{
color:white!important
}

Best Regards

Thanks!, that worked perfect for the cart problem, but the grey hover over the product title is still grey.

Hello,

Please replace the code:

body .woodmart-products-element  .product-grid-item .product-title,
body .product-grid-item .product-title a:hover:hover{
color:white!important
} 

Best Regards

Now it’s awesome, thanks!!!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts