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!
Add a comment
|
2 Answers
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; }
-
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– SvetlanaAug 1, 2018 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– SvetlanaAug 1, 2018 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. Aug 1, 2018 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; } Aug 1, 2018 at 10:59
-
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
}
-
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 ?– SvetlanaAug 1, 2018 at 10:56