Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Neighborhood › Color of the "add to cart" button
New Landing › How can we help? › Themeforest Theme Support › Neighborhood › Color of the "add to cart" button
- This topic has 9 replies, 4 voices, and was last updated 10 years by Mohammad – SUPPORT.
-
Posted in: Neighborhood
-
September 20, 2014 at 1:26 pm #112909
Hi,
I would like to custom the color of the “add to cart” button (and its hover), but I can’t find a way in the admin to do it, and my custom CSS didn’t work.
Any idea ?
September 21, 2014 at 10:39 pm #113093Hi,
The “add to cart” button background is taken from “Secondary Accent Color” in Color Accent in Theme Customizer. Hover color of the text are accent color. You can change those there, if you want to do that via Custom CSS let me know. If you think your Custom CSS didn’t work, you can try add a !important to force it.
Let us know,
Thanks,
laranz.September 23, 2014 at 5:06 pm #113840Hi,
Thank you, it worked but it affects the whole site and change a lot of things.
So I prefer to do this with Custom CSS.September 23, 2014 at 11:19 pm #113885Hi,
Sure, use this Custom CSS.
button.single_add_to_cart_button { background-color: #ff0000; }
if that didn’t work, try this.
button.single_add_to_cart_button { background-color: #ff0000 !important; }
Let us know,
Thanks,
laranz.September 24, 2014 at 5:47 pm #114178Thanks but it didn’t work as the woocommerce styles are placed directly in the <style> of the head, so it always overrides my CSS.
September 25, 2014 at 12:53 am #114263Hi,
If you put this, it will override.
button.single_add_to_cart_button { background-color: #ff0000 !important; }
or pass me the WP login details in a private reply, I will take a look at it.
Let us know,
Thanks,
laranz.September 25, 2014 at 9:18 am #114361Sorry, I can’t – for privacy reasons – give you the WP login, but here’s what I put in my custom css :
.woocommerce form.cart button.single_add_to_cart_button {background: #07C1B6!important;color:#FFF!important;}
And it still doesn’t work. The reason is that the style.css is included at the line 140, whereas the <style> with woocommerce css is at the line 373.
So I could add as !important as I want, it won’t change anything (because the woocommerce css has also an !important).I don’t know if it comes from the woocommerce plugin or the neighborhood theme, but I think it’s stupid to add woocommerce styles in a <style> tag AFTER the custom css file. Is there a way for the developer to fix this in the next update of the theme ?
Also, is it necessary to include all the theme styles in the <head> ? Because it makes the page much heavier (328 lines added !) and could be included with a simple <link>.
September 25, 2014 at 10:06 am #114389Hi,
Please replace the previous code by the one below. In this case we will have to use the same css rule that is providing the background and text color.
.woocommerce form.cart button.single_add_to_cart_button, .woocommerce p.cart a.single_add_to_cart_button, ul.products li.product a.quick-view-button { background: #07C1B6!important; color:#FFF!important; }
The styles you see on the header are the dynamic styles generate with the options that are chosen in the color customizer. That can’t be done with a css file.
-Rui
September 25, 2014 at 6:54 pm #114640Hi,
Your code didn’t work ๐
But I added body before .woocommerce and it worked :
body.woocommerce form.cart button.single_add_to_cart_button {background: #07C1B6!important;color:#FFF!important;}
Ok for the styles in the header, I didn’t know.
Resolved !
September 25, 2014 at 7:28 pm #114645Hi,
I’m glad that issue resolved.
Thanks ๐
With Best Regards
Mohammad -
Posted in: Neighborhood
You must be logged in and have valid license to reply to this topic.