Changing the Text Color in a Shortcode

  • Resolved tyde1510

    (@tyde1510)


    4 years ago

    Good Day,

    I’m new to CSS, so not good at it at all. I have this shortcode for woocommerce featured products. [featured_products columns="5" limit="10"].

    So I found another forum for something similar, I used this CSS, 

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

    However it only changed the product title color and did not change the price color and star rating color to white.

    So what can I do?

    I want to change all the text to white.

    • This topic was modified 4 years ago by tyde1510.
Viewing 2 replies - 1 through 2 (of 2 total)
  • jessepearson

    (@jessepearson)

    Automattic Happiness Engineer

    @tyde1510 The css in your snippet specifically targets only the title. What you will want to do is use this part as the beginning point to the rule for each item: .woocommerce ul.products li.product . From there, you can right click on each item in the browser and choose to Inspect in order to get the class of that element for the rest of the rules. This would turn out to look something like this:

    
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product .price {
color: #ffffff;
}


    Link to image: https://d.pr/i/9J8WJX

    Thread Starter tyde1510

    (@tyde1510)

    @jessepearson Oh, I see that’s great !!! I never thought of doing it that way. I have to say I think you single-handedly just made me realize that CSS isn’t as hard as I thought it is. Thank you so much !!!

    Amazing support I am really grateful

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Changing the Text Color in a Shortcode’ is closed to new replies.