Need help changing font colors on home and product pages

Resolved rosecody
(@rosecody)

4 years, 5 months ago

I can’t seem to change the font color for the woocommerce product displays
1) on the home page https://www.laudabotanicals.com/ — I want the product title and the price to be white font, right now the price font is green and I need help to change the font to white so it shows on the teal background box
2) on product page https://www.laudabotanicals.com/products/ — I want the price font to be white to match the title font which is white. right now price is showing as green
3) on the individual products page, under the ‘You may also like’ I need the product title font to be black (right now it’s white and you can see it because it’s on a white background as the teal background box is missing) – you can see the product price is the same green font color that appears on the product displays listed in #1-2 described above

So it seems to be a theme for font title and font price color that was set somewhere as white for title, green for price, however I can’t seem to find out where to change this under appearance or under customize. I do see when I inspect these pages where the font colors are, and when I attempt to change them while in inspect mode, the changes don’t stick.

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

Group Of Oceninfo
(@princebhalani143)

4 years, 5 months ago
Solution for Question 1 & 2 you can use any one of them
```
/*Change Price Text Color */
.woocommerce-Price-amount.amount {
    color: #fff!important;
}
```
Or
```
.price > .amount {
    color: #fff!important;
}
```
Solution for Question 3
```
.product-title a {
    color: #000!important;
}
```
Please code in style.css Try to use all code without important if it’s working that’s fine else supply important.
Thread Starter rosecody
(@rosecody)

4 years, 5 months ago

there are problems with these suggested codes
1) applying solution 1 or 2 will change the whole site to white title and white price font color, instead of the 2 pages where the title and price are inside the teal colored box
https://www.laudabotanicals.com/ and https://www.laudabotanicals.com/products/

so then what happens is on the page https://www.laudabotanicals.com/products/ where it says ‘You may also like’ both the title and price are now in white font and you can’t see them since the font is against a white background
2) then if I add code solution 3, it then cancels out code solution 1 or 2 and all title and price font color all over the site becomes black instead of white

Is there a way to just change the ‘You may also like’ product display titles and prices to be black font? and not affect the other instances of how the title and price font color displays?
or
Is there a way to change the teal box color on home page and product page to be a white box? that would then allow the black product title and price font to be visible all over site and look better than the black font against the current teal title box displayed at home: https://www.laudabotanicals.com/ and products: https://www.laudabotanicals.com/products/

thanks for any help you can provide as I’m new to website coding!
Group Of Oceninfo
(@princebhalani143)

4 years, 5 months ago
Kindly remove all the old suggested CSS and use below CSS code as I’ve provided solution for only required pages instead of sitewide solution

Solution 1) https://www.laudabotanicals.com
```
/* Home Page Only CSS */
.page-id-11 .product-title a, .page-id-11 .price > .amount {
    color: #fff !important;
}
```
Solution 2) https://www.laudabotanicals.com/products/
```
/* Product Page Only CSS */
.page-id-196 .product-title a, .page-id-196 .price > .amount {
    color: #fff !important;
}
```
Solution 3) https://www.laudabotanicals.com/products/face-wash-for-oily-skin/ (Any Single Product Page)
```
/* Changing Title Text Color To Black Only For  */
.related.products .product-title a, .upsells.products .product-title a {
	color: #000!important;
}
```
Thread Starter rosecody
(@rosecody)

4 years, 5 months ago

thank you – this worked perfectly for solution 1&2.

For solution 3)
how do I get the price in the ‘related products/upsells’ to read black as it’s still green? only the title in the ‘related products/upsells’ is showing up in black font after I applied your solution 3 — seems like we need a separate code for the price font to turn from teal to black?

https://www.laudabotanicals.com/products/face-wash-for-oily-skin/

Thread Starter rosecody
(@rosecody)

4 years, 5 months ago

Ok – so after playing around with various things to fix solution 3), it seems like this worked for updating the ‘related product / upsells’ price text to black without interfering with solution 1 or 2:

/* Changing Related products Price Text Color To Black Only For */
.related.products .woocommerce-Price-amount.amount, .upsells.products .woocommerce-Price-amount.amount {
color: #000!important;
}

Can you confirm this was the correct way to code?
Group Of Oceninfo
(@princebhalani143)

4 years, 5 months ago
You’ve implemented in the right way, Just use below code as Solution 3 if you need price and title both black.
```
/* Changing Title Text & Price Color To Black Only For  */
.related.products .product-title a, .upsells.products .product-title a, .related.products .woocommerce-Price-amount.amount, .upsells.products .woocommerce-Price-amount.amount {
	color: #000!important;
}
```
Thread Starter rosecody
(@rosecody)

4 years, 5 months ago

Awesome– thank you for all our help!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Need help changing font colors on home and product pages’ is closed to new replies.