Before I go to the files and change the code.
No, you should never do this.
Besides the risk of inadvertently breaking something, you’ll lose your edits when you update the theme or plugin.
I would need to change that button to black (#000000)
By “button”, I’m supposing you mean the background color. Use this:
.wc-block-components-skeleton-text-line{
background:#000000;
}
Is there a way to somehow use the “Custom CSS” section from WordPress to override/change the color?
Are you running a classic theme? Put your CSS in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS.
If you add the above CSS code and you don’t see the desired effect, then something else on the page may be overriding it, and you’ll need to adapt your CSS selector. And if you need help with this, you’ll need to provide the URL of the page in question so I can take a look and help you.
Good luck!
Hey,
Ok I won’t touch the code never, thank you for mentioning that.
The code you provided didn’t change anything – The button is already black but I tried it with the code #c9c9c9 (which is gray and it remained black)
Here’s link to the page:
https://www.ora-mentoring.com/index.php/tuote/premium-valmennus-10-viikkoa/
I need to change every WooCommerce color manually so if you have some YouTube tutorials/Blog Posts/anything that would help me learn this myself it would be the best – I would learn and other people would save time.
The code you provided didn’t change anything – The button is already black but I tried it with the code #c9c9c9 (which is gray and it remained black)
That’s because the CSS code that you provided as being responsible for this “button” is totally incorrect. In fact, the CSS class selector that you gave in your post wc-block-components-skeleton-text-line does not appear anywhere on the page that you provided. So the code does nothing because what it’s targeting does not exist.
What “button” are you really referring to?
If you mean the “ADD TO CART” button (“LISÄÄ OSTOSKORIIN”), then use the following code:
.woocommerce button.button.alt {
background-color: #c9c9c9;
}
If you’re referring to some other button, please explain… ideally with an annotated screenshot showing exactly what “button” you’re trying to change the background colour for.
Standing by.
I need to change every WooCommerce color manually so if you have some YouTube tutorials/Blog Posts/anything that would help me learn this myself it would be the best – I would learn and other people would save time.
Here’s a basic primer: https://learn.ww.wp.xz.cn/lesson-plan/introduction-to-css/
But if you really want to get the hang of things, you need to dig deeper. You’ll need to learn how to learn about two key things:
1) Understanding and using CSS selectors
2) Using your browser’s developer console
FreeCodeCamp.org’s Responsive Web Design course is a great introductory course, but if you’re looking for quick 5-minute YouTube bites, you can search for these topics in YouTube.
Good luck!
Hey,
Yes, “ADD TO CART” button (“LISÄÄ OSTOSKORIIN”) this is the button I’m referring to.
Thanks for the code but it didn’t yet change anything so something is overriding the button – Any help here?
Big thanks from the tutorials regarding CSS I’ll start to study it tomorrow when I wake up
Thanks for the code but it didn’t yet change anything so something is overriding the button – Any help here?
The new CSS code is appearing higher up, BEFORE the theme’s original CSS code. The way CSS works, the last one wins… so the old theme code is still winning, and that’s why you’re not seeing the change.
It seems you added the code to the Site Editor’s new “Additional CSS” box, instead of the “Additional CSS” box in APPEARANCE => CUSTOMIZE that I mentioned earlier.
Two options to fix this:
1) Remove the code you added and put it in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS. This outputs the CSS AFTER all theme styles and just before </head> tag.
2) If you prefer to use the Site Editor’s new “Additional CSS” feature instead, then we need to give our new code a higher priority with the !important property, so the code becomes:
.woocommerce button.button.alt {
background-color: #c9c9c9 !important;
}
But note that brute-forcing your way with the !important property may have some unintended consequences. For instance, this will force the same background colour to be applied to the hover state, overriding the current blue hover colour.
I don’t have the additional CSS box anywhere. Maybe it’s because I’m using “Lifestyle Blogger” theme?
Any help here
Usually, the APPERANCE => CUSTOMIZE => ADDITIONAL CSS menu is not available when using a block theme like Lifestyle Blogger.
But before asking you to go there, I installed the theme to check — and, at least from my test, it seems that this theme activates the feature.
Do you not have the “CUSTOMIZE” submenu under APPEARANCE showing below?
I do have that option but when I go from there to add the CSS it doesn’t work. It goes to the wrong place, it goes to the “Site Editors new additional CSS” which we earlier discussed to be the wrong place
