Change text color in a shortcode!

Resolved frilynt
(@frilynt)

7 years, 4 months ago

Hello😄

I wonder if it is possible to change the text color in the shortcode?😄 I am not into coding, so mabye this is very basic.

I have this shortcode ([products limit=”4″ columns=”4″ best_selling=”true”]) and i want the text to be white (#ffffff). The reason is that i have anorther background color (purple) on this section of the site. It is in the section “Populære kostymer og rekvisitter”.

Is this possible for only this shortcode? Can i add a text color in the shortcode?😄

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

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

Zach W
(@dynamiczach)

Automattic Happiness Engineer

7 years, 4 months ago
Howdy!

You can try adding this CSS under Appearance > Customize > Additional CSS
```
.woocommerce-loop-product_title {
color: #ffffff;
}
```
Thread Starter frilynt
(@frilynt)

7 years, 4 months ago

But will this only change the one on the purple background?😄 I have some shortcodes on white background as well, so if this changes for all, it will not work for me:(

If you go to this site https://www.teaterbanken.no/?p=88 and opens the toggel “Kostymer” You wil see that here it is on white background😄
Zach W
(@dynamiczach)

Automattic Happiness Engineer

7 years, 4 months ago
You can try to find the ID of the page you need the shortcode text color changed to white on, and then add that to the code to see if that will work. It will look something like this:
```
.page-id-123 .woocommerce-loop-product_title {
color: #ffffff;
}
```
Thread Starter frilynt
(@frilynt)

7 years, 4 months ago

Hmm, i tried to add this code:

.page-id-503 .woocommerce-loop-product_title {
color: #ffffff;
}

But the text is still gray:(

https://www.teaterbanken.no/?page_id=503

Thread Starter frilynt
(@frilynt)

7 years, 4 months ago

It worked with this code:

.page-id-503 .woocommerce ul.products li.product .woocommerce-loop-product__title {
color: #ffffff;
}

Does that look right?😄
Zach W
(@dynamiczach)

Automattic Happiness Engineer

7 years, 4 months ago
Try this:
```
.page-id-503 .woocommerce-loop-product_title {
color: #ffffff !important;
}
```
If that doesn’t work, I’m out of ideas. :/
Thread Starter frilynt
(@frilynt)

7 years, 4 months ago

Is it possible to choose a color on hover in the same css code?😄

Thank you very much for helping me😄
Plugin Support Fernando a11n
(@fhaps)

Automattic Happiness Engineer

7 years, 4 months ago
Something like this might help you change the hover color
```
.page-id-503 .woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
	color: #000000;
}
```
Hopefully that helps!
- This reply was modified 7 years, 4 months ago by Fernando a11n.
Plugin Support Fernando a11n
(@fhaps)

Automattic Happiness Engineer

7 years, 3 months ago

We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

bc916
(@bc916)

7 years, 1 month ago

I am having a similar issue I think. My problem is on my Woocommerce cart page and some text appears white on the white background. I just want it all to be black throughout the woocommerce pages.

https://spudnutsacramento.com/cart/

Zach W
(@dynamiczach)

Automattic Happiness Engineer

7 years, 1 month ago

Howdy @bc916!

Can you please post this as a new, separate issue here:

https://wordpress.org/support/plugin/woocommerce/

Thanks!