Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – How to get the title of a product (Woo-Commerce) to show up in white text

I’m new to wordpress, html, and all so I’m learning slowly but surely. Currently while working on a website for my business, the shop page has 6 items listed but none of the titles of the items are listed. Only the picture themselves. The background and text color of the titles are both #222222. I’m trying to change the text color of the title which is h2. The name of the header is h2.woocommerce-loop-product_title as seen in the inspector.

None of the code I’ve tried has worked so how would I properly reformat the text color?

http://middlesexworms.com/index.php/shop/

Code I’ve tried:

h1,
h2,
h3,
h4,
h5,
h6{
  font-family: 'Krub', sans-serif;
  margin:0;
  padding:10px 0;
  color: #FFFFFF;
  font-weight: bold;
}
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Before I saw your answers, i did a ton of googling. Seems as though there are a lot of ways to fix it but this one was what I used:

    h1,
h2,
h3,
h4,
h5,
h6{
  font-family: 'Krub', sans-serif;
  margin:0;
  padding:10px 0;
  color: #FFFFFF;
  font-weight: bold;
}


h2.woocommerce-loop-product__title, .woocommerce div.product .product_title {
  color:#FFFFFF;
  letter-spacing:1px;
  margin-bottom:10px !important;
}

  2. 0

    You need to edit this class:

    h2.woocommerce-loop-product__title, .woocommerce div.product .product_title {
    color: #ffffff;
    letter-spacing: 1px;
    margin-bottom: 10px !important;
}

    Old class is :

    h2.woocommerce-loop-product__title, .woocommerce div.product .product_title {
    color: #0000;
    letter-spacing: 1px;
    margin-bottom: 10px !important;
}

    So i change color from #000000 to #fffffff

    Login or Signup to reply.
  3. 0

    You can change color by navigating to style.css file of the theme. I hope you can access that file through FTP client. Login to your server using FTP or cPanel go to your webiste setup root then /wp-content/themes/vw-gardening-landscaping/style.css. Go on line #1272 and change color property to #fff.

    If you don’t have access login to wp-admin navigate to appearance > editor. There you can see the sytle.css change the property on line #1272 to #fff

    I know this is not standard practice to edit theme’s core file but if you couldn’t enqueue your own stylesheet or not created child theme you have to do this.

    You can enqueue your own stylesheet setting dependency as theme’s style.css and over write the rules as 

    h2.woocommerce-loop-product__title, .woocommerce div.product .product_title {
color: #fff !important; }

    Let me know if you wish further assistance.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search