0

how can I change text size and color for SKU, tags, and category meta description on the product page? It's too big and bright. Takes too much place especially in the mobile version. Thanks! enter image description here

1

If you want all of the product meta to be styled in the same way, then add the following to your theme custom CSS or style.css in your child theme, and edit as required...

.product_meta { padding-top: 6px; border-top: 1px solid #dadada; color: #666; font-size: 18px; }

If you want something different for each of the product meta elements, then you would add something like the following...

.sku_wrapper { padding-top: 6px; border-top: 1px solid #dadada; color: #666; font-size: 18px; }

and

.posted_in { padding-top: 6px; border-top: 1px solid #dadada; color: #666; font-size: 18px; }

|improve this answer|||||
  • Yes, it's okay if all of the product meta to be styled. I've added this code to custom css, but nothing was changed – Svetlana Aug 1 '18 at 10:39
  • Oh, I'm sorry. The only words Category, tags , sku and commas were changed (they are red now) but content is still the same. bit.ly/2KcYWE8 – Svetlana Aug 1 '18 at 10:50
  • Just to confirm - are you using woocommerce? If not, then you'll need to share the url of the product page so that we can check it out. If you are using woocommerce, it's possible something else is subsequently overwriting your change. Check to make sure there are no other references to this class within your custom css. Try adding !important before the semi-colon in your css (e.g. font-size: 18px!important; ). If that works, you'll ideally need to figure out why your change has not taken effect, as it's not advisable (although not out of the question) to leave the !important in permanently. – Martin Jarvis Aug 1 '18 at 10:56
  • Ah ok. In that case you need to style the links for the .product_meta class in your custom css. Something like... .single-product div.product .product_meta a { font-weight: 600; text-decoration: underline; color: red; } – Martin Jarvis Aug 1 '18 at 10:59
  • Yes!! Just what I need! Thank you so very much!!<3 – Svetlana Aug 1 '18 at 11:02
0

Add the your custom style for this below "product_meta" class in your active theme css file

   .product_meta
    {
     /// Here add your custom css code
      font-size: small;
      color : red
    }
|improve this answer|||||
  • Thanks! It changes words "Category", "tags" , "sku" and commas. (they are red now) bit.ly/2KcYWE8 But is there a way change tags and category names as well ? – Svetlana Aug 1 '18 at 10:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.