[Resolved] How to change woocommerce button and title colors?

[verdi]

Ugly test-site: https://www.minddump.nl/shop/
Where: Everything that’s green.
Goal: Changing these colors.

When GP is deactivated, the colors revert to default black (where it now is green). This would suggest they are controlled by GP.

In GP’s Customizer Colors Section there is no option for WooCommerce (I expected this though)

Please help me adjust the colors.

[Leo]

Hi there,

Unfortunately there are no options in Customizer to control Woocommerce element. The color change is probably inheriting from some other settings. Tom is considering adding Woo settings in the future though.

The best way to customize the button and price is to use some CSS. Check out this post: https://generatepress.com/forums/topic/woocommerce-change-button-and-price-colours-css/#post-179058

Let me know if you need more help. It would help me if you enable right click on that page 🙂

[verdi]

Thanks Leo, I’ll use that CSS snipper for now.

And really great to hear that Tom is considering more support for WooCommerce. I think a lot of (potential) customers will appreciate that!

[Leo]

You’re welcome 🙂 Let me know if you need more assistance in the mean time!

[verdi]

Hi Leo,

Just noticed I didn’t respond to your request to remove right click blocking. It’s gone now:
https://www.minddump.nl/shop/

I haven’t used the suggested snippet yet on this test site, but I’m sure it will work just fine.

[verdi]

Update: I have used the snippet, but discovered it does not cover all color elements (like the “On sale” label). Also buttons become yellow, a color not find in the snippet. But it’s ok. I’ll figure it out.

Thanks for your help!

[Leo]

– On sale label:

.woocommerce span.onsale {
    background-color: #000000;
    color: #ffffff;
}

– The yellow #FC0 button is added by this part of the snippet:

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {
	background-color:#FC0 !important;
	color:white !important;
	text-shadow: transparent !important;
	box-shadow: none;
	border-color:#FF9900 !important;
}

.woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {
	
	background-color:#FC0 !important;
	color:white !important;
	text-shadow: transparent !important;
	box-shadow: none;
	border-color:#FF9900 !important;
}

.woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {
	background-color:#FC0 !important;
	color:white !important;
	text-shadow: transparent !important;
	border-color:#FF9900 !important;
}

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {
	background-color:#FC0 !important;
	box-shadow: none;
	text-shadow: transparent !important;
	color:white !important;
	border-color:#FF9900 !important;
}

Hope this helps 🙂

[verdi]

This is awesome! Thank you so much Leo!

Because there is nog other way of doing it: ★ ★ ★ ★ ★ (out of five)

🙂

[Leo]

You’re very welcome 🙂

Could always leave us a quick review if you are up for it 😛
https://wordpress.org/support/theme/generatepress/reviews/

[verdi]

Yes I am! Just left this honest review:

It has been my default theme for every project since I discovered it. It’s fast, easy to use and very flexible.

The premium functions are a great addition for a very reasonable price. Being able to select witch add-on’s you want active or not, is a stroke of genius. I also was surprised at the level of Support GeneratePress gives, truly excellent.

The theme is a perfect marriage with Elementor and also works with WooCommerce, although there is no shopping cart for your menu (yet). When they add that, perfection will be reached!

[Leo]

Thanks for taking the time!! We really appreciate it 🙂

[Kai]

Is there any update related to changing button colors?

[David]

Hi there,

the Colors Module allows to change the Theme Button colors. If your running Woocommerce the the Woocommerce module provides a list of Colors > Woocommerce in the Customizer.

[Author]

Posts